vue中侦听器的使用

概念和原理:

watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

 1  data:{
 2      a:1,
 3      b:{
 4          c:1
 5      }
 6  },
 7  watch:{
 8      a(val, oldVal){//普通的watch监听
 9          console.log("a: "+val, oldVal);
10      },
11      b:{//深度监听,可监听到对象、数组的变化
12          handler(val, oldVal){
13              console.log("b.c: "+val.c, oldVal.c);
14          },
15          deep:true //true 深度监听
16      }
17  }

 用法:

  • handler就是你watch中需要具体执行的方法   当你watch的值发生变化的时候,就会触发这个handler,这是vue内部帮你做的事情。
  • deep:就是你需要监听的数据的深度,一般用来监听对象中某个属性的变化    监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,
  • immediate:在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
原文地址:https://www.cnblogs.com/ndh074512/p/15084008.html