【Vue3】监听器watch的使用

定义

监听器：监视某个或某些数据，当其变化时，作出相应处理。

可监视数据

1. ref数据 注意：监听时不需要写 .value
2. reactive数据
3. getter函数，「返回一个值的函数」
4. 以上所有数据的集合 「数组」

语法

注意： 当value为ref数据时，不同于其他地方使用，不需要加.value。

watch(value,(newValue，oldValue)=>{...处理函数},{deep:true,......})

参数说明

1. 监听的数据
2. 回调函数，第一个参数为newValue，即修改后的当前值；第二个参数为oldValue，即修改前的值
3. 配置对象，常用如：deep，immediate…

使用

情况一：如何停止监听

watch函数的返回值是一个「stop函数」，在处理函数中调用「stop函数」即可。

情况二：监听ref的基本数据

watch的第一个参数不需要写 .value

watch(value,(newValue，oldValue)=>{...处理函数},{deep:true,......})

情况三：监听ref的对象数据

如果直接监听对象，默认只有对象被替换成新对象时才会触发，如 obj.value={a:1}。
属性值改变（obj的址未发生改变）则不会监听到。

若要监听每个属性值的变化，则需要开启深度监视，watch函数第三个参数（配置对象）中，添加deep:true。
watch(obj,()=>{},{deep:true})

若对象的值发生改变，则watch的第二个参数中，newValue和oldValue为同一对象
若对象的址发生改变，则watch的第二个参数中，newValue和oldValue为不同对象

情况四：监听reactive数据

如果监听的是reactive数据，默认开启深度监听，且不可关闭，每个属性值改变都会触发。

情况五：监听ref或reactive对象中的某个属性

如果这个属性不是四种可监视数据之一，例如；就是一个基本类型，则报错，需要改为getter函数（一个函数返回一个值）的写法。

如果监听的是对象中的对象，例如car，watch(person.car,()=>{})，因为监听的是对象，所以可以不写成函数，只有属性值发生变化时，才会被监听，如果整个对象被替换，如下图，则无法触发。

如果想要监听整个car对象，需要写成函数式，但一定要开启深度监听，否则只有整个对象被替换才会触发。

总结： 如果监听的是对象中的某个属性，推荐写函数返回值的形式。如果这个属性是对象数据，则可以不写成函数，但是址改变（对象替换）无法被监听。

情况六：监听多个数据

如果监听的是多个数据，可以将他们放到一个数组中，其中一个数据发生改变就会触发处理函数。