vue 中的 watch 作用就如其命名就是监听的作用

比方有个对象

watchData: {
    name: '',
    age: '',
}

监听这个对象的属性

watchData: {handler: function() {console.log();
    },
    deep: true
}

监听对象能够用 deep，深度监测，不然监测不到对象的变动

监听这个对象的属性

1. 形式一

   watch: {'watchData.name'(newValue, oldValue) {console.log(newValue);
    }
   }

2. 形式二

watch: {
    'watchData.name': {handler: function() {console.log();
        }
    }
},

为什么要监听对象的属性，监听对象的话，一旦对象外部的任何数据变动，都会导致 watch 从新执行，这样的话可能不是你想要的监听某一个属性变动才执行 watch，或者是一旦说对象外部任何一个属性变动就让其 watch 执行，也会对性能有肯定性的损耗，所以咱们用这种监听对象单个属性的形式来解决，给要监听的“对象. 属性，用引号包裹起来”

监听这个对象的属性

computed: {getName() {return this.watchData.name}
},
watch: {getName(newValue, oldValue) {console.log(newValue);
    }
},

这种形式其实和第二种是一样的，区别就是用到了 computed，而后再监听办法 getName，实际上办法 getName 返回的就是 watchData 对象中的 name 属性