vue watch 深度监听（vue3下watch的使用）

既然是数据监听    
    
    
    
，监听的是它的变化   
    
    
    
   。那么就需要能够捕获它的变更    


     


     


     


   ，于是监听的数据必然要是响应式数据

watch(WatcherSource, Callback, [WatchOptions]) 参数： WatcherSource：想要监听的响应式数据


     


     


     


     

。 Callback：执行的回调函数




 




 




 




 

，入参（newValue,oldValue） 




 




 




 




。 [WatchOptions]：deep   
    
    
    
   、immediate


     


     


     


     

、flush可选   

   

   

   

  。

对于WatchOptions的参数配置：

deep:当需要对对象等引用类型数据进行深度监听时   

   

   

   

，设置deep: true,默认值是false

     

     

     

     
。 immediate：默认情况下watch是惰性的     

     

     

     

  ，设置immediate: true时




  




  




  




  
，watch会在初始化时立即执行回调函数一次
  




  




  




  




。 flush：控制回调函数的执行时机
  


  


  


  


，  


  


  


  


 。它可设置为 pre 




 




 




 




、post 或 sync 
     
     
     
     。 pre：默认值     
     
     
     
 ，当监听的值发生变更时 




   




   




   




   ，优先执行回调函数（在dom更新之前执行）

   




   




   




   




。 post：dom更新渲染完毕后

 



 



 



 



，执行回调函数 



 



 



 



。 sync:一旦监听的值发生了变化                    ，同步执行回调函数（建议少用）                      。

一  




    




    




    




    ，监听单个数据ref

const count = ref(1); watch(count, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); });

可以获取到新值和旧值


    




    




    




    



。

二





















，监听引用类型数据ref:深度监听

const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch(count, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); });

这种情况下                    ，我监听的是整个数组   



     



     



     



    ，它是引用数据类型





















，内部的某一项发生了变更并不会被监听到



















。所以watch中的代码并没有执行                      。

1    
    
    
    
，引用类型ref直接深度监听

此时    


     


     


     


   ，就需要使用深度监听：deep:true

const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch( count, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { deep: true } ); 值发生了变更 Proxy {a: 5, b: 2} Proxy {a: 5, b: 2}

可以注意到的是




 




 




 




 

，深度监听的需要是这个引用数据类型自身   

   

   

   

，而不是其中的属性


     



     



     



     


。并且     

     

     

     

  ，他只能获取到新值




  




  




  




  
，而获取不到旧的值



















。

2
  


  


  


  


，引用类型ref深拷贝深度监听 const count = ref({ a: 1, b: 2 }); const handleClick = function () { count.value.a = 5; }; watch( () => { return { ...count.value }; }, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { deep: true } );

这样把watch的引用类型数据源深拷贝一份     
     
     
     
 ，即可完成对新旧值得获取:

值发生了变更 {a: 5, b: 2} {a: 1, b: 2}

三 




   




   




   




   ，监听单个数据：reactive

const single = reactive({ count: 1, test: 2 }); const handleClick = function () { single.count++; }; watch( () => single.count, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { immediate: true } );

这里主要是() => single.count

 



 



 



 



，监听的是single中的count,只有这个属性发生了变化才会触发回调函数   
    
    
    
   。这种情况下是可以获取到新旧值的


     


     


     


     

。

四                    ，监听引用类型数据：reactive

<template> <div class="mine-box"> <div ref="countDom">{{ single.count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, reactive, watch } from vue; const single = reactive({ count: 1, test: { a: 1, b: 2 } }); const handleClick = function () { single.test.a++; }; watch( single, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { immediate: true } ); </script>

reactive的数据  




    




    




    




    ，用不用deep：true是没有影响的





















，single中的一个属性发生了变化                    ，都能被监听到   



     



     



     



    ，继而执行回调函数 




 




 




 




。

和三中有所不同的是





















，这种情况下是只能获取到新值的   

   

   

   

  。

五    
    
    
    
，immediate: true

默认情况下watch是惰性的    


     


     


     


   ，当我们设置immediate: true时




 




 




 




 

，watch会在初始化时立即执行回调函数

     

     

     

     
。

const count = ref(1); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { deep: true, immediate: true } );

六   

   

   

   

，监听多个数据源

const count = ref(1); const double = ref(2); const handleClick = function () { count.value++; double.value++; }; watch( [count, double], (newValue, oldValue) => { console.log(值发生了变更, newValue, oldValue); }, { deep: true, immediate: true } );

有一个值发生了变更     

     

     

     

  ，则会触发watch




  




  




  




  
，如果两个值同时发生变更
  


  


  


  


，同样只是触发一次watch的回调函数
  




  




  




  




。

如果想变更一格数据就触发一次回调     
     
     
     
 ，可以在两个数据变更中间加下nextTick  


  


  


  


 。

七 




   




   




   




   ，flush的配置

1

 



 



 



 



，默认情况下在dom渲染完毕前调用回调函数

默认情况下                    ，flush的值是pre  




    




    




    




    ，当监听的值发生变更时





















，优先执行回调函数（在dom更新之前执行） 
     
     
     
     。这就意味着                    ，如果在回调函数中有相关dom的操作   



     



     



     



    ，而参数里面配置了immediate:true





















，则会报错    
    
    
    
，因为这个时候dom还没有被渲染    


     


     


     


   ，是获取不到dom的

   




   




   




   




。

接下来看下代码：

<template> <div class="mine-box"> <div ref="countDom">{{ count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, watch } from vue; const count = ref(1); const countDom = ref(null); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log(---, countDom.value.textContent); console.log(值发生了变更, newValue, oldValue); }, { deep: true } ); </script>

得到的结果：

--- 1 值发生了变更 2 1

可以看到




 




 




 




 

，回调函数中新的值已经变成了2   

   

   

   

，而获取到的dom还是之前的 



 



 



 



。说明默认情况下     

     

     

     

  ，flush的值是pre,当有值变更时




  




  




  




  
，是在dom更新之前触发回调函数的执行                      。

2
  


  


  


  


，flush: post’在dom渲染完毕后执行回调函数 <template> <div class="mine-box"> <div ref="countDom">{{ count }}</div> <button @click="handleClick">按钮</button> </div> </template> <script setup> import { ref, watch } from vue; const count = ref(1); const countDom = ref(null); const handleClick = function () { count.value++; }; watch( count, (newValue, oldValue) => { console.log(---, countDom.value.textContent); console.log(值发生了变更, newValue, oldValue); }, { deep: true, flush: post } ); </script>

得到的结果：

--- 2 值发生了变更 2 1

可以看到     
     
     
     
 ，是在dom更新完毕之后才调用的回调函数 




   




   




   




   ，这时候获取到的dom是数据变更后更新完毕的dom


    




    




    




    



。

八

 



 



 



 



，总结

当使用ref创建的响应式数据时



















。 1                    ，基本数据类型：可以直接监听  




    




    




    




    ，可获取新旧值                      。 2





















，引用数据类型：需要deep:true深度监听                    ，但是只能获取新值


     



     



     



     


。要想获取新旧值   



     



     



     



    ，要想获取新旧值





















，需要监听目标数据的深拷贝



















。 当使用reactive创建的响应式数据时   
    
    
    
   。 1    
    
    
    
，基本数据类型：可以直接指定某个属性进行监听    


     


     


     


   ，可以获取到新旧值


     


     


     


     

。 2




 




 




 




 

，引用数据类型：直接监听创建的reactive对象   

   

   

   

，其中只要有属性变更     

     

     

     

  ，都能被监听到 




 




 




 




。但是它只能获取到新值   

   

   

   

  。 3




  




  




  




  
，reactive创建的响应式数据
  


  


  


  


，深度监听设置是无效的     
     
     
     
 ，也就是deep:true/false都是能监听到的

     

     

     

     
。 deep参数 默认是false,只有使用ref创建的响应式引用类型的数据是 




   




   




   




   ，才启用
  




  




  




  




。才生效  


  


  


  


 。 immediate参数 默认是false,初始化的时候不执行回调函数 
     
     
     
     。 如果是true,初始化的时候就会执行一次回调函数

   




   




   




   




。 flush参数 默认是pre,在dom渲染之前执行回调函数

 



 



 



 



，如果有immediate：true时                    ，回调函数有获取dom操作  




    




    




    




    ，则会报错





















，因为初始化时dom还没生成 



 



 



 



。 设置成post                    ，则是在dom渲染完毕（监听的数据变更后dom渲染完毕）后   



     



     



     



    ，再执行回调函数                      。