【Vue3】watch监听使用【超详细】

---

1. #watch使用结构
2. watch(被监视的数据,监视的回调,配置对象(deep,immediate等...))
4. let xxx = ref("1111") 或者 reactive({a:1,b:2})
5. watch(xxx,(newVal,oldVal)=>{
7. },{
8. deep:true,immediate:true
9. })

复制代码

  vue3中watch只能监听的以下四种数据:
  

• 一个getter函数(一个能返回值的函数)
  
• ref定义的值
  
• reactive定义的值
  
• 包罗以上内容的数组`
  

  情况一:监听ref定义的基本范例数据

watch监听ref简单的基本范例数据
代码展示

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.               姓名: <input type="text" v-model="name">
5.           </div>
6.           <div>
7.             <button @click="handleChangeName">修改名称</button>
8.         </div>
9.     </div>
10. </template>
12. <script setup lang="ts" name="item">
13.     import {ref,reactive,toRefs,toRef,watch} from "vue"
14.     let name = ref("小张")
15.         const handleChangeName = ()=>{
16.         name.value="泰罗奥特曼"
17.     }
18.     watch(name,(newVal,oldVal)=>{
19.         console.log("新值:",newVal);
20.         console.log("旧值:",oldVal);
21.     })
22. </script>

复制代码

解除监听案例

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.             当前数量: <span>{{num}}</span>
5.         </div>
6.         <div>
7.             <button @click="handleAdd">添加数量</button>
8.         </div>
9.     </div>
10. </template>
12. <script setup lang="ts" name="item">
13.     import {ref,reactive,toRefs,toRef,watch} from "vue"
14.     let num = ref(1)
16.     const handleAdd = ()=>{
17.         num.value++
18.     }
20.     let stopWatch = watch(num,(newVal,oldVal)=>{
21.         console.log("我监听了");
22.         if(newVal>5){
23.             stopWatch()
24.         }
25.     })
26. </script>

复制代码

情况二:监听ref定义的对象范例数据

watch监听ref简单的对象范例数据,若想监视对象内下属性的厘革，必要手动开启深度监视
代码展示

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.               姓名: <input type="text" v-model="data.name">
5.           </div>
6.           <div>
7.               年龄: <input type="text" v-model="data.age">
8.           </div>
9.           <div>
10.               爱好: <input type="text" v-model="data.hobby">
11.           </div>
12.         <div>
13.             <button type="button" @click="handleChangeData">修改数据</button>
14.         </div>
15.     </div>
16. </template>
18. <script setup lang="ts" name="item">
19.     import {ref,reactive,toRefs,toRef,watch} from "vue"
21.     let data = ref({
22.         name:"小张",
23.         age:18,
24.         hobby:"打篮球"
25.     })
27.     const handleChangeData = ()=>{
28.         data.value = {
29.             name:"小红",
30.             age:20,
31.             hobby:"打乒乓球"
32.         }
33.     }
35.     watch(data,(newVal,oldVal)=>{
36.         console.log("新值:",newVal);
37.         console.log("旧值:",oldVal);
38.     },{
39.         deep:true,//开启深度监听
40.     })
42. </script>

复制代码

情况三:监听reactive定义的对象范例数据

特别注意:如果监听reactive对象中的地址值，默认开启深度监听的，不能关闭
代码展示

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.               姓名: <input type="text" v-model="data.name">
5.           </div>
6.           <div>
7.               年龄: <input type="text" v-model="data.age">
8.           </div>
9.           <div>
10.               爱好: <input type="text" v-model="data.hobby">
11.           </div>
12.           <div>
13.               其他: <input type="text" v-model="data.other.c.d">
14.           </div>
15.         <div>
16.             <button type="button" @click="handleChangeData">修改数据</button>
17.         </div>
18.     </div>
19. </template>
21. <script setup lang="ts" name="item">
22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
24.     let data = reactive({
25.         name:"小张",
26.         age:18,
27.         hobby:"打篮球",
28.         other:{
29.             a:"1111",
30.             b:"2222",
31.             c:{
32.                 d:"1111",
33.                 e:"2222",
34.             }
35.         }
36.     })
38.     const handleChangeData = ()=>{
39.         Object.assign(data,{
40.             name:"小红",
41.             age:20,
42.             hobby:"打乒乓球"
43.         })
44.     }
45.         //此时是有问题的：oldVal会和newVal数据保持一致，当data里面的任意值改变，都会触发该监听,强制开启深度监听
46.     //watch(data,(newVal,oldVal)=>{
47.      //   console.log("新值:",newVal);
48.     //    console.log("旧值:",oldVal);
49.     //})
50.    
51.     //使用()=>箭头函数监听data对象中name属性
52.     watch(()=>data.name,(newVal,oldVal)=>{
53.         console.log("新值:",newVal);
54.        console.log("旧值:",oldVal);
55.     })
57. </script>

复制代码

情况四:监听ref或reactive定义的对象范例数据中某个属性

特别注意:

• 若该属性值不是【对象范例】，必要写成函数形式
  
• 若该属性值是依然是【对象范例】，可直接写，也可以写成函数，建议写成函数。
  

结论:监视的要是对象里的属性，那么最好写函数式。
注意点:如果对象监视的是地址值，必要关注对象内部，必要手动开启深度监视。
代码展示

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.               姓名: <input type="text" v-model="data.name">
5.           </div>
6.           <div>
7.               年龄: <input type="text" v-model="data.age">
8.           </div>
9.           <div>
10.               爱好: <input type="text" v-model="data.hobby">
11.           </div>
12.           <div>
13.               其他: <input type="text" v-model="data.other.c.d">
14.           </div>
15.         <div>
16.             <button type="button" @click="handleChangeOtherData">修改其他</button>
17.         </div>
18.     </div>
19. </template>
21. <script setup lang="ts" name="item">
22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
24.     let data = reactive({
25.         name:"小张",
26.         age:18,
27.         hobby:"打篮球",
28.         other:{
29.             a:"1111",
30.             b:"2222",
31.             c:{
32.                 d:"1111",
33.                 e:"2222",
34.             }
35.         }
36.     })
38.     const handleChangeOtherData = ()=>{
39.        data.other.c={
40.                 d:"wwwww",
41.                 e:"qqqqq",
42.             }
43.     }
45.         //监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数
46.         watch(()=>data.name,(newVal,oldVal)=>{
47.         console.log("新值:",newVal);
48.         console.log("旧值:",oldVal);
49.     })
50.        
51.         //监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
52.     watch(()=>data.other.c,(newVal,oldVal)=>{
53.         console.log("新值:",newVal);
54.         console.log("旧值:",oldVal);
55.     })
57. </script>

复制代码

情况五:监听上述多个数据

代码展示

1. <template>
2.     <div class="itemStyle">
3.           <div>
4.               姓名: <input type="text" v-model="data.name">
5.           </div>
6.           <div>
7.               年龄: <input type="text" v-model="data.age">
8.           </div>
9.           <div>
10.               爱好: <input type="text" v-model="data.hobby">
11.           </div>
12.           <div>
13.               其他: <input type="text" v-model="data.other.c.d">
14.           </div>
15.         <div>
16.             <button type="button" @click="handleChangeOtherData">修改其他</button>
17.         </div>
18.     </div>
19. </template>
21. <script setup lang="ts" name="item">
22.     import {ref,reactive,toRefs,toRef,watch} from "vue"
24.     let data = reactive({
25.         name:"小张",
26.         age:18,
27.         hobby:"打篮球",
28.         other:{
29.             a:"1111",
30.             b:"2222",
31.             c:{
32.                 d:"1111",
33.                 e:"2222",
34.             }
35.         }
36.     })
38.     const handleChangeOtherData = ()=>{
39.         data.other.c={
40.                 d:"wwwww",
41.                 e:"qqqqq",
42.             }
43.     }
44.         //监视，情况五:监视上述的多个数据
45.     watch([data.other.c,()=>data.name,()=>data.age,()=>data.hobby],(newVal,oldVal)=>{
46.         console.log("新值:",newVal);
47.         console.log("旧值:",oldVal);
48.     },{deep:true})
50. </script>

复制代码

  ✨                                                   踩坑不易，还希望各位大佬支持一下                                            \textcolor{gray}{踩坑不易，还希望各位大佬支持一下}                     踩坑不易，还希望各位大佬支持一下