【Vue3 入门到实战】5. Watch 监视
目录
3. 监视ref 和 reactive定义的对象类型中的某个属性
在 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函数)的。建议的是，当你想要监听对象种的某个属性时(不管是基本类型，还是对象类型)，直接用函数的形式监听，也就是一个函数，返回一个值类型。下图所示。
更多vue3相关内容可以点击下方链接查看 ↓ ↓ ↓
原文地址：https://blog.csdn.net/qq_58195504/article/details/145174422
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！