vue watch侦听器

 

数据

data(){
    currentChoose:'',
    obj:{ 
        a:'',
        b:'' 
     } 
}

 

1、基础用法

　　监听函数，如事例数据currentChoose数据形式；基本用法在第一次绑定数据时不会监听，只有当值发生改变时才会执行；

watch:{
      currentChoose(val, oldVal){
        console.log("currentChoose = ", val, oldVal);
      }
}, 

 

2、immediate 和 handler用法

　　最初绑定值的时候执行；

currentChoose: {
      /* 数据发生变化就会调用这个函数 */
      handler(newVal, oldVal) {
        console.log('val:', newVal, oldVal)
      },
      /* true:进入页面就触发 */
      immediate: true
}

 

3、深度监听(deep)

　　对象内部数据发生变化时，用到深度监听；可以监听到obj.a、obj.b数据的变化；

watch: {
    obj: {
      /* 数据发生变化就会调用这个函数 */
      handler(newVal, oldVal) {
        console.log('val:', newVal, oldVal)
      },
      /* true:进入页面就触发 */
      immediate: true,
      /* 深度监听数据变化 */
      deep: true
    }
}

　　只监听对象中一个属性值的方法

watch: {
    'obj.a': {
      /* 数据发生变化就会调用这个函数 */
      handler(newVal, oldVal) {
        console.log('val:', newVal, oldVal)
      },
      /* true:进入页面就触发 */
      immediate: true,
      /* 深度监听数据变化 */
      deep: true
    }
}