watch的使用

用于监听vue实例上数据的变动。

基本用法

watch: {
    value(newVal, oldValue) {
        console.log(newVal, oldValue);
    },
},

或者

watch: {
    value(newVal) {
        console.log(newVal);
    },
},

参数

• deep 用于监听对象内部值的变化。

  用法：

    func: {
        value(val) {
            console.log(val);
        },
        deep: true
    }
  

• immediate 在监听开始后使回调立即被调用

  用法：

    queryData: {
        handler(val) {
            console.log(val);
        },
        immediate: true
    }
  

监听对象具体属性的变化

使用deep属性可以监听对象的变化，但是只要对象发生了变化就会触发该方法，如果对象嵌套比较深，而且只想监听对象中某个属性的变化，这样开销还是很大的。

在vue中我们可以使用引号将属性包裹，就可以实现监听对象某个属性的变化了。

'objectData.name': {
    handler(val) {
        console.log(val);
    },
}

或者

'objectData.name'(val) {
    console.log(val);
}