watch监听器三种监听方式

1、普通监听（无法监听到第一次绑定的变化）

这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。

//当text发生变化时触发
watch: {
    text(newVal, oldVal) {
        console.log(newVal)
    }
}

2、普通监听（可以监听到第一次绑定的变化）

给 text 绑定了一个handler方法，之前我们写的 watch 方法其实默认写的就是这个handler，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。

设置immediate为true，可以在第一次绑定值的时候执行监听函数，否则只有值改变的时候才会执行。

watch: {
    text: {
        handler (newVal, oldVal) {
            console.log(newVal)
        },
        immediate: true,
    }
}

3、深度监听（可以监听到对象内属性的变化）

设置deep: true 则可以监听到text.value的变化，此时会给text的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。

data (){
    return {
        text: {
           value:'一一',
        }
    }
},
watch: {
    text: {
        handler(newVal, oldVal) {
            console.log(newVal)
        },
        immediate: true,
        deep: true,
    }
}

如果只需要监听对象中的一个属性值，则可以做以下优化：

 watch: {
    'text.value': {
      handler(newVal, oldVal) {
         console.log(newVal)
      },
      deep: true,
      immediate: true
    }
  }