【Vue3 入门到实战】5. Watch 监视

1. 监听ref定义的数据

1.1 监视ref定义的基本类型数据

1.2 监视ref定义的引用类型

1.2.1 修改属性

1.2.2 修改整个对象

2. 监视reactive定义的数据

3. 监视ref 和 reactive定义的对象类型中的某个属性

3.1 属性值为基本类型

3.2 属性值为引用类型

4. 监视上述多个数据

5. 总结

在 Vue 3 中，watch 是一个非常强大的工具，用于侦听响应式数据的变化，并在变化时执行相应的逻辑。它不仅可以监听单个 ref 或 reactive 对象，还可以监听多个源或更复杂的表达式。以下是关 watch 的详细说明。

vue3 中，官方规定 watch只能监听以下四种数据，

我会根据平时项目中经常遇到的四种情况来进行分段讲解，不是根据上面四种数据分段，但会在四种情况中涵盖以上四种监听数据。

1. 监听ref定义的数据

在之前的文章中，我们得知，ref可以定义基本数据类型，也可以定义引用数据类型。

【Vue3 入门到实战】3. ref 和 reactive区别和适用场景-CSDN博客

1.1 监视ref定义的基本类型数据

代码如下

<template><div class="person">当前求和为{{ sum }}<button @click="total">点击求和</button></div>
</template><script setup lang="ts">import { ref,watch } from 'vue'let sum = ref(0)function total() {sum.value++;}watch(sum, (newValue, oldValue) => {console.log('watch', newValue, oldValue);})
</script><style>
.person {padding: 20px;
}
</style>

控制台输出

1.2 监视ref定义的引用类型

注意：

(1) 直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要开启深度监视。

(2) 若修改的是 ref 定义对象的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

(3) 若修改整个 ref 定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

代码如下

<template><div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button></div></template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let person = ref({name:'张三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

1.2.1 修改属性

当修改年龄名字属性时，控制台打印如下。

详细说明：

修改对象属性：如果你只是修改 ref 对象的某个属性，实际上并没有改变对象本身的引用，只是改变了对象内部的数据。由于对象本身没有变，所以 newValue 和 oldValue 指向相同的对象。可以得出两个都是都是新的值，所以相等。

1.2.2 修改整个对象

当修改整个对象时，控制台打印如下。

详细说明：

修改整个对象：当直接赋值一个新的对象给 ref 时，你实际上是改变了 ref 内部的引用。这意味着newValue 和 oldValue 指向了两个不同的对象。newValue 是新对象，而 oldValue 是旧对象。所以不等。

2. 监视reactive定义的数据

注意：

(1) watch 监听 reactive 定义的数据默认是开启深度监视的，也就是不需要手动写 deep换句话说就是 隐式的创建了深层监听

(2) Vue3官方定义不能整体替换 reactive 定义的对象。可以使 Object.assign() 方法可以在不改变对象引用的情况下更新属性。而因此，无论是修改属性还是用Object.assign()替换，oldValue和newValue都是指向的同一个对象，那二者也就是相等。

代码如下

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><hr><h2>测试：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div></template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj变化了',newValue,oldValue)})</script>

控制台打印

可以看到无论是修改属性还是用Object.assign()替换，oldValue和newValue都是指向的同一个对象，那二者也就是相等。

3. 监视ref 和 reactive定义的对象类型中的某个属性

一个对象类型中的属性可以基本类型，也可以是对象类型(引用类型)。所以，这节我们需要分成两部分。

3.1 属性值为基本类型

当监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式——也就是一开始所说的Vue3中点的watch只能监视的四种类型中的 函数返回一个值(getter函数)

假如我只想监听属性 name的变化，其他都不监听。

代码如下

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeCar">修改车</button><button @click="changePerson">修改整个人</button><hr></div></template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function changeCar(){person.car = {c1:'保时捷',c2:'兰博基尼'}}watch(()=>person.name,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})</script>

点击改变修改名字按钮，控制台打印如下，可以看到只监听了name的变化

3.2 属性值为引用类型

当监听的属性式引用类型的时候，可直接编，也可写成函数，但建议写成函数。

注意：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

监听car属性代码(直接编写)

<template><div class="person"><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeFirstCar">修改第一台车</button><button @click="changeSecondCar">修改第二台车</button><button @click="changeCar">修改车</button><hr></div></template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeFirstCar(){person.car.c1 = '保时捷'}function changeSecondCar(){person.car.c2 = '兰博基尼'}function changeCar(){person.car = {c1:'保时捷',c2:'兰博基尼'}}watch(person.car,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

这样写的话，点击修改第一台、第二太车，都能监听到 person.car 的变化，但点击修改整个车，是监听不到的，因为，监听的是 person对象中的car属性，而 chanrgCar 方法中， person.car = {c1:'保时捷',c2:'兰博基尼'}，这段代码创建了一个新的car,不是之前的person对象中的car了，就监视不到了。

如图，点击 “修改车”按钮，控制台没输出，说明没监视到。而点击第一台车、第二太车按钮，是可以监视的。

监听car属性代码(函数式)

而写成函数式的话也就是官方所谓的getter函数，vue内部会创建一个依赖收集的追踪，是可以监视到变化的。

 watch(()=>person.car,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})

这样写的话，不仅car的属性变化可以监测，整体变化是可以监视到person.car的变化的。

因为分析源码可知，当你传入的是一个函数时，vue内部每次数据发生变化，watch都会主动跟踪捕获，然后触发对用的callback。

结论：监视的要是对象里的属性，那么最好写函数式，

注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

所以这里建议，只要你想监视对象中的属性，直接写成函数(返回一个值、也叫getter()函数)的形式

4. 监视上述多个数据

想要监视多少数据，可以写成数组形式。

代码如下

 watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})

注意：这样写，监听的 person.car 就不是通过一个返回值的函数的形式了。点击修改第一台、第二台车可以监听到，但点击修改整个车，就监听不到了。

5. 总结

回顾一下，vue3官方规定，watch只能监视如下数据，一是ref定义的数据，二是reactive定义的数据，三是getter函数——一个函数，返回一个值类型，四是以上类型的值组成的数据。在上面的内内容中，只有标题3对不上，但是内容中是有体现第三种数据(getter函数)的。建议的是，当你想要监听对象种的某个属性时(不管是基本类型，还是对象类型)，直接用函数的形式监听，也就是一个函数，返回一个值类型。下图所示。