Loading... watch作用：监视数据的变化 特点：只能监视以下四种数据： - `ref`定义定义的数据 - `reactive`定义的数据 - 函数返回一个值（`getter`函数） - 一个包含上述内容的数组 ## 情况一-基本类型数据 使用方法：`watch(监视的值,监视函数)` ```vue <template> <div class="test"> <h2>当前数值为{{ sum }}</h2><br> <button @click="change">点击+1</button> <h2>当前数值从{{ num1 }}变化成了{{ num2 }}</h2> </div> </template> <script lang="ts" setup name="test"> import {ref,watch} from 'vue' let sum=ref(0) let num1=ref(0) let num2=ref(0) function change(){ sum.value+=1 } let stopwatch=watch(sum,(newvalue,oldvalue)=>{ num1.value=oldvalue num2.value=newvalue if(newvalue>=10){ stopwatch() } }) </script> <style> </style> ``` 而watch函数会返回一个停止监视的函数，当我们执行这个函数的时候，watch函数就会停止监视 ## 情况二、对象类型数据（ref） 这一段代码存在三个按钮，而真正能使watch监视的只有person地址的变化，只有修改整个人才能使watch生效 ```vue <template> <div class="test"> <h2>姓名：{{ person.name }}</h2> <h2>年龄：{{ person.age }}</h2> <button @click="changeName">修改姓名</button> <button @click="changeAge">修改年龄</button> <button @click="changePerson">修改整个人</button> <h2>从{{ str1 }}变化为{{ str2 }}</h2> </div> </template> <script lang="ts" setup name="test"> import {ref,watch} from 'vue' let person=ref({ name:'张三', age:18 }) let str1=ref() let str2=ref() function changeName(){ person.value.name +='~' } function changeAge(){ person.value.age+=1 } function changePerson(){ person.value = {name:'李四',age:18} } watch(person,(newvalue,oldvalue)=>{ str1.value=oldvalue str2.value=newvalue }) </script> <style> </style> ```   若想监视内部属性的变化，需要手动开启深度监视。 `watch(person,(newvalue,oldvalue)=>{str1.value=oldvaluestr2.value=newvalue},{deep:true})` 也可以添加 `immediate` 当为true时代表不管怎么样，都先执行一遍watch里的函数。 但是需要注意的是：只有地址值改的时候，既整个数据都更改的时候，newValue和oldValue才会是对应的值，否则都是新的值  ## 情况三、对象类型数据（reactive） 当被监视类型是reactive时，默认开启深度监视  ```vue <template> <div class="test"> <h2>姓名：{{ person.name }}</h2> <h2>年龄：{{ person.age }}</h2> <button @click="changeName">修改姓名</button> <button @click="changeAge">修改年龄</button> <button @click="changePerson">修改整个人</button> <h2>从{{ str1 }}变化为{{ str2 }}</h2> </div> </template> <script lang="ts" setup name="test"> import {ref,watch,reactive} from 'vue' let person=reactive({ name:'张三', age:18 }) let str1=ref() let str2=ref() function changeName(){ person.name +='~' } function changeAge(){ person.age+=1 } function changePerson(){ Object.assign(person,{name:'李四',age:18}) } watch(person,(newValue,oldValue)=>{ str1.value=newValue str2.value=oldValue }) </script> <style> </style> ``` 在对象没有变化的前提下，oldValue和newValue依然是一样的。并且全部更改时也不会有变化。因为object.assign只是批量更改数据，并不是更改地址 ## 情况四、监视对象类型的某个属性 在watch函数的监视中，如果被监视的值是基本数据类型，则不能直接使用 `名.项`来监视，需要用到getter函数（箭头函数） ```vue <template> <div class="test"> <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="changeAllCar">修改整个车</button> <h3>从{{ str1 }}变为了{{ str2 }}</h3> </div> </template> <script lang="ts" setup name="test"> import {reactive,watch,ref} from 'vue' let person = reactive({ name:"张三", age:18, car:{ c1:"奔驰", c2:"宝马" } }) let str1=ref(),str2=ref() function changeName(){ person.name+='~' } function changeAge(){ person.age+=1 } function changeFirstCar(){ person.car.c1='奥迪' } function changeSecondCar(){ person.car.c2='小米' } function changeAllCar(){ person.car={c1:'雅迪',c2:'爱玛'} } watch(()=>{return person.name},(newValue,oldValue)=>{ str1.value=newValue str2.value=oldValue }) </script> <style> </style> ```  可以看到只有修改姓名时才会显示更改的值，其他情况下都不会修改值。 如果被监视的数据任是基本类型，那么可以不必写成函数式，可以直接表示。 但需要注意的是，函数返回的是一个ref类型，如果要监视具体的值，那么需要开启深度监视。 ``` <template> <div class="test"> <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="changeAllCar">修改整个车</button> <h3>从{{ str1 }}变为了{{ str2 }}</h3> </div> </template> <script lang="ts" setup name="test"> import {reactive,watch,ref} from 'vue' let person = reactive({ name:"张三", age:18, car:{ c1:"奔驰", c2:"宝马" } }) let str1=ref(),str2=ref() function changeName(){ person.name+='~' } function changeAge(){ person.age+=1 } function changeFirstCar(){ person.car.c1='奥迪' } function changeSecondCar(){ person.car.c2='小米' } function changeAllCar(){ person.car={c1:'雅迪',c2:'爱玛'} } watch(()=>person.car,(newValue,oldValue)=>{ str1.value=newValue str2.value=oldValue },{deep:true}) </script> <style> </style> ``` 这样就可以做到监视了。  ## 情况五、监视上述多个数据 可以直接把被监视的数据写成数组。 ```vue watch([()=>person.car,()=>person.name],(newValue,oldValue)=>{ str1.value=newValue str2.value=oldValue },{deep:true}) ```  最后修改：2025 年 06 月 02 日 © 允许规范转载 赞 不用打赏哦！