往期内容：
《Vue零基础入门教程》合集（完结）
《Vue进阶教程》第一课：什么是组合式API
《Vue进阶教程》第二课：为什么提出组合式API
《Vue进阶教程》第三课：Vue响应式原理
《Vue进阶教程》第四课：reactive()函数详解
《Vue进阶教程》第五课：ref()函数详解(重点)
《Vue进阶教程》第六课：computed()函数详解(上)
《Vue进阶教程》第七课：computed()函数详解(下)
1) 基本使用
📝侦听器watch()函数
1.参数:
a.侦听的数据源
①可以是引用了响应式对象的副作用函数
②以上类型组成的数组
③响应式对象(ref, reactive, computed)
b.对应的回调: 当数据改变时, 执行的回调函数
c.选项:
①immediate: 创建时立即执行回调
②flush: 设置回调执行的时机
③deep: 当数据是对象, 开启深度侦听
2.作用: 侦听数据源的改变, 当数据源改变时, 重新执行回调
3.返回: unwatch方法
示例1
// 1. 数据源是ref(响应式对象)
const count = ref(0)
watch(count, () => {console.log('count的值改变了:', count.value)
})示例2
// 2. 数据源是reactive对象(默认是深度侦听)
const stu = reactive({name: 'xiaoming',age: 20,gf: {name: 'xiaomei',city: {name: 'wuhan',},},
})
watch(stu, () => {// 由于这种方式会递归遍历每一层属性, 效率不高, 一般不用console.log('侦听整个reactive对象, 是深度侦听的')
})由于侦听对象时会递归遍历每一层属性, 效率不高, 一般不用
一般情况下, 需要侦听的往往是某个具体的属性
此时, 我们需要包装一个函数, 在函数中引用该属性. 这个函数也是副作用函数
示例3
错误的写法
// 不能直接这样写. stu.age相当于读取出了具体的值
watch(stu.age, () => {console.log('不会生效')
})
●对于值类型, 不能直接侦听
●对于对象类型, 依然可用
示例4
正确的写法
// 通过一个副作用函数包装, 在副作用函数中引用需要侦听的属性
watch(() => stu.age,() => {console.log('会生效, 常用')}
)示例5
// 几乎不用
watch([count, () => stu.age], () => {console.log('侦听的数据源是数组的情况')
})
