watch监听的使用

zzz

watch是什么？
在vue3中，watch函数被重新设计为一个独立的API，用于观察数据变化并执行相应的操作。
watch 函数接受两个参数：
第一个：可以是一个函数或数组。如果是函数，则返回要监听的数据，当数据变化时会触发回调函数；如果是数组，则返回一个数组，包含要监听的多个数据，当任意一个数据变化时都会触发回调函数。
第二个：一个回调函数，用于处理数据变化时的操作。回调函数接收两个参数，第一个参数为新值，第二个参数为旧值。
有两个额外的参数：1.immediate（画面加载后立即执行），2.deep（深度侦听）。
例1：监听单个数据

1. <template>
   
2.     <h1>数量变化：{{ count }}</h1>
   
3.     <a-button @click="addcount">++count</a-button>
   
4. </template>
   
5. <script setup>
   
6. // 声明变量count
   
7. const count=ref(0)
   
8. // count触发方法
   
9. const addcount=()=>{
   
10.     count.value++
    
11. }
    
12. // 触发监听器---单个数据监听
    
13. watch(count,(newValue,oldValue)=>{
    
14.     console.log(`count变化，旧值：${oldValue},新值：${newValue}`);
    
15. })
    
16. </script>
    

复制代码

例2：监听单个数据

1. <template>
   
2.     <h1>数量变化：{{ name }}/{{ count }}</h1>
   
3.     <a-button @click="handleChangeName">++count</a-button>
   
4. </template>
   
5. <script setup>
   
6. // 声明变量count
   
7. const name=ref('小明')
   
8. const count=ref(0)
   
9. // 触发方法
   
10. const handleChangeName=()=>{
    
11.     count.value++
    
12.     name.value='小小明！！！'
    
13. }
    
14. // 触发监听器---多个数据监听
    
15. watch([count,name],([newCount,newName],[oldCount,oldName])=>{
    
16.     console.log(`count变化，旧值为：${oldCount},新值为：${newCount}`);
    
17.     console.log(`name变化，旧值为：${oldName},新值为：${newName}`);
    
18. })
    
19. </script>
    
20. 
    

复制代码

例3：监听多个值的变化

1. <template>
   
2.     <a-form :model="form" label-width="120px">
   
3.         <a-form-item label="价格">
   
4.             <a-input v-model="form.price" />
   
5.         </a-form-item>
   
6.         <a-form-item label="数量">
   
7.             <a-input v-model="form.count" />
   
8.         </a-form-item>
   
9.         <a-form-item label="总价">
   
10.             <a-input v-model="form.total" />
    
11.         </a-form-item>
    
12.         <a-form-item>
    
13.             <a-button @click="setForm">计算</a-button>
    
14.         </a-form-item>
    
15.     </a-form>
    
16. </template>
    
17. 
    
18. <script setup>
    
19. const form = ref(
    
20.     { price: '', count: '', total: '' }
    
21. );
    
22. 
    
23. const setForm = () => {
    
24.     form.value = {
    
25.         price: '24',
    
26.         count: '400',
    
27.         total: '9600'
    
28.     }
    
29. }
    
30. 
    
31. // immediate：立刻执行，进入页面就执行一次，一般用于画面的初始化显示。
    
32. watch(form, (newVal, oldVal) => {
    
33.     console.log("进入页面执行了")
    
34.     console.log("新值：" + newVal + "，旧值：" + oldVal);
    
35. }, {
    
36.     immediate: true
    
37. })
    
38. 
    
39. // deep：深度监视，如果要监听的响应式对象中有多个属性，默认是浅层监听。
    
40. // 传入的响应式对象，如果是简单类型，可以直接监听，如果是复杂类型，监视不到复杂类型内部属性的变化,按照下面的示例，只有form.value重新设置了一个对象，监听才会触发
    
41. // 只有对象的地址发生了变化，才会触发监听，设置deep为true时，对象及对象中的某个属性发生变化时，也可以监听到
    
42. // 如果对象中的属性过多，会影响使用，一般不建议开深度监听
    
43. 
    
44. // 深度监听
    
45. watch(form, (newval, oldVal) => {
    
46.     console.log("深度监听触发")
    
47.     console.log(newval);
    
48. }, { deep: true })
    
49. 
    
50. // 精确侦听对象的某个属性
    
51. watch(
    
52.     () => form.value.price,
    
53.     (newVal, oldVal) => {
    
54.         console.log("精确侦听对象的某个属性");
    
55.         console.log(newVal, oldVal);
    
56.     }
    
57. )
    
58. 
    
59. // 可以侦听某两个属性操作后的值
    
60. watch(
    
61.     () => Number(form.value.price) * Number(form.value.count),
    
62.     (sum) => {
    
63.         console.log("执行了");
    
64.         form.value.total = ''
    
65.         if (sum) {
    
66.             form.value.total = sum.toFixed(2);
    
67.         }
    
68.     }
    
69. )
    
70. </script>
    

复制代码