首次赋值不触发watch的解决方法
vue 2020-05-17 13:04:18

deep,默认值是 false,代表是否深度监听。

immediate:true代表如果在 wacth 里声明了之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行。

 

补充知识:在vue中使用watch监测数据改变的deep:true,和immediate:true

在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。

在次vue中给我们设置了深度监测数据繁盛变化的方法。

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听;

2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数。

 

JavaScript Code复制内容到剪贴板
  1. watch: {  
  2.   "note":{  
  3.       immediate: true,  
  4.       handler:function(newVal, oldVal){  
  5.         console.log("这是前面传来的 props 值: ", newVal , "原来的值是: " ,oldVal);  
  6.         // this.showFlowChart(newVal);  
  7.       }  
  8.   },  
  9. }  

 

 

 也可以加一行deep

JavaScript Code复制内容到剪贴板
  1. watch: {    
  2.   "note":{  
  3.       deep: true,  
  4.       immediate: true,    
  5.       handler:function(newVal, oldVal){    
  6.         console.log("这是前面传来的 props 值: ", newVal , "原来的值是: " ,oldVal);    
  7.         // this.showFlowChart(newVal);    
  8.       }    
  9.   },    
  10. }    

 

本文来自于:http://www.yoyo88.cn/study/vue/511.html

Powered by yoyo苏ICP备15045725号