Vue
【Vue3】watch侦听器
08-13 15:17什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做出特定的操作。例如：监视字符串的变化并发起请求，验证输入的合法性等。
watch 侦听器的基本语法
开发者需要在 watch 节点下，定义自己的侦听器，实例代码如下：
<template>
<input type="text" v-model.trim="user" />
</template>
<script>
export default{
name: '',
data() {
return {
user: ''
}
},
// 在watch节点下，定义侦听器
watch: {
// watch 监听器最简单的定义方式，就是把属性名拿过来变成一个方法，比如下面的：监听 user 值的变化
// 形参类表中，第一个值是“变化后的新值”，第二个值是“变化前的旧值”，若旧值在监听器中使用不到，可以省略
user(newVal, oldVal) {
console.log("newVal:", newVal)
console.log("oldVal:", oldVal)
}
}
}
</script>
watch 侦听器快速入门
案例：使用 watch 侦听器检测用户名是否可用，监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用
① 首先安装依赖包 axios
npm i axios -S
② 在组件中导入 axios
import axios from 'axios'
③ 利用 axios 提供的 get 方法，发起网络请求，它的返回值是一个 Promise 对象，可以使用 async 和 await 简化这次异步操作，简化完毕之后，它的返回值就不再是 Promise，而是一个真正的数据对象，然后使用解构赋值，解构返回的数据对象，赋值出一个 data 属性，重命名为所需的变量。代码示例：
<template>
<!-- 使用 v-model 监听 val 的变化 -->
<input type="text" v-model="val" />
</template>
<script>
import axios from 'axios'
export default {
name: 'WatchData',
data() {
return {
val: 'test',
}
},
watch: {
async val(newVal,oldVal) {
console.log('newVal:', newVal)
console.log('oldVal:', oldVal)
const {data: res} = await axios.get(`http://10.168.1.101/web/chuxing/src/api.php?user=${newVal}`)
console.log(res)
}
}
}
</script>
watch高级语法 - immediate 选项
默认情况下，组件初次加载完成后，不会调用watch侦听器。如果想让watch侦听器在组件加载后被立即调用，则需要使用immediate选项
watch高级语法 - deep 选项
当 watch 侦听的是一个对象时，如果对象中的属性值发生了变化，则无法被监听到，此时需要使用 deep 选项
在 handler 下面声明一个 deep 选项，值为 true，这样就可以通过 watch 侦听器，监听对象中每一个属性的变化，只要属性发生变化，就会触发对应的 handler 处理函数，如下代码：
使用 deep 选项的两个注意事项：
① 使用 deep 选项监听对象 / 数组时，会触发深度遍历，新旧值都指向同一个引用地址，因此 handler 的第二个参数（旧值）和第一个参数（新值）看起来完全一样，无法直接区分
② 监听的对象内，任一属性值发生变化，handler 会返回整个对象，有些操作可能没必要，但也无法避免
watch高级语法 - 监听对象单个属性的变化
有时并不希望监听对象中所有属性的变化，只想监听对象中单个属性值的变化，则可以按照如下的方式定义 watch 侦听器
计算属性vs侦听器
计算属性和侦听器侧重的应用场景不同：
计算属性侧重于监听多个数据的变化，最终计算并返回一个值，它侧重于得到一个结果
侦听器侧重于监听个单个数据的变化，最终执行特定的业务逻辑，不需要有任何返回值
组件生命周期：组件创建 -> 组件运行 -> 组件销毁
组件生命周期强调的是一个时间段
