往期内容：

《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

javascript">// 1. 数据源是ref(响应式对象)
const count = ref(0)
watch(count, () => {console.log('count的值改变了:', count.value)
})

示例2

javascript">// 2. 数据源是reactive对象(默认是深度侦听)
const stu = reactive({name: 'xiaoming',age: 20,gf: {name: 'xiaomei',city: {name: 'wuhan',},},
})
watch(stu, () => {// 由于这种方式会递归遍历每一层属性, 效率不高, 一般不用console.log('侦听整个reactive对象, 是深度侦听的')
})

由于侦听对象时会递归遍历每一层属性, 效率不高, 一般不用
一般情况下, 需要侦听的往往是某个具体的属性
此时, 我们需要包装一个函数, 在函数中引用该属性. 这个函数也是副作用函数
示例3

错误的写法

javascript">// 不能直接这样写. stu.age相当于读取出了具体的值
watch(stu.age, () => {console.log('不会生效')
})

●对于值类型, 不能直接侦听
●对于对象类型, 依然可用
示例4

正确的写法

javascript">// 通过一个副作用函数包装, 在副作用函数中引用需要侦听的属性
watch(() => stu.age,() => {console.log('会生效, 常用')}
)

示例5

javascript">// 几乎不用
watch([count, () => stu.age], () => {console.log('侦听的数据源是数组的情况')
})