Vue前端篇——Vue 3的watch深度解析
原创
前言
在Vue.js的世界里，数据驱动是核心理念。而在这个理念中，watch扮演着一个至关重要的角色。它允许我们监视数据的变化，并在数据变化时执行相应的逻辑，本文也是通过案例代码来讲讲watch的用法。
一、watch的基本作用
watch的主要作用是监视数据的变化。当被监视的数据发生变化时，watch会自动触发相应的回调函数，从而允许我们在数据变化后执行一些特定的操作。
二、Vue3中watch的特点
与Vue2相比，Vue3中的watch有一些显著的特点：
- 监视范围的限制：在Vue3中，
watch只能监视以下四种数据：
- 使用
ref定义的数据。 - 使用
reactive定义的数据。 - 函数返回一个值（即getter函数）。
- 一个包含上述内容的数组。
- 深度监视的能力：通过设置
deep: true选项，我们可以实现对被监视对象的深度监视。这意味着，即使被监视对象的内部属性发生了变化，watch也会触发相应的回调函数。
三、实际应用场景
在实际开发中，watch可以应用于多种场景。例如，在表单验证中，我们可以使用watch来监视表单输入框的值的变化，并在值变化时进行相应的验证操作。
此外，在数据请求和处理中，watch也可以发挥重要作用。例如，当某个数据发生变化时，我们可以使用watch来触发相应的数据请求操作，并在请求完成后对数据进行处理和展示。
四、示例代码解析
接下来使用一个代码案例来说明watch的用法。
<template>
<div class="person">
<h1>情况五：监视上述的多个数据</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="changeC1">修改第一台车</button>
<button @click="changeC2">修改第二台车</button>
<button @click="changeCar">修改整个车</button>
</div>
</template>
<script lang="ts" setup name="Person_watch">
import {reactive,watch} from 'vue'
// 数据
let person = reactive({
name:'张三',
age:18,
car:{
c1:'奔驰',
c2:'宝马'
}
})
// 方法
function changeName(){
person.name += '~'
}
function changeAge(){
person.age += 1
}
function changeC1(){
person.car.c1 = '奥迪'
}
function changeC2(){
person.car.c2 = '大众'
}
function changeCar(){
person.car = {c1:'雅迪',c2:'爱玛'}
}
// 监视，情况五：监视上述的多个数据
watch([()=>person.name,person.car],(newValue,oldValue)=>{
console.log('person.car变化了',newValue,oldValue)
},{deep:true})
</script>运行结果如下：
在提供的示例代码中，可以看到一个典型的watch应用场景。在这个场景中，定义了一个名为person的响应式对象，并使用watch来监视这个对象的变化。
具体来说，使用watch来监视person对象的name属性和car属性的变化。当这两个属性中的任何一个发生变化时，watch会自动触发相应的回调函数，并在控制台中输出变化前后的值。
此外，还可以注意到，在watch的配置选项中，设置了deep: true。这是因为person对象的car属性本身也是一个对象，而希望监视到这个对象内部属性的变化。因此，通过设置deep: true，可以实现对person对象的深度监视。
五、总结
总的来说，Vue3中的watch是一个非常强大且灵活的工具。它允许我们监视数据的变化，并在数据变化时执行相应的逻辑。通过合理地使用watch，我们可以实现更加高效和便捷的数据处理和展示。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
