在 Vue.js 2 中，watch 是一个用来观察和响应 Vue 实例数据变动的选项。它可以用来监听数据的变化并执行相应的逻辑，比如在数据变化时更新界面或者执行一些异步操作。

基本用法

监听单个数据源

最简单的用法是监听单个数据源（即一个数据属性）的变化：

new Vue({data: {message: 'Hello, Vue.js!'},watch: {message: function(newVal, oldVal) {console.log(`message 从 ${oldVal} 变为 ${newVal}`);}}
});

监听多个数据源

你也可以同时监听多个数据源，将 watch 中的键值对扩展为多个属性：

new Vue({data: {firstName: 'John',lastName: 'Doe',fullName: 'John Doe'},watch: {firstName: function(newVal, oldVal) {this.fullName = newVal + ' ' + this.lastName;},lastName: function(newVal, oldVal) {this.fullName = this.firstName + ' ' + newVal;}}
});

这时候打印的newval和oldval是不一样的。因为他是单个数据源。当我们监听对象里面的属性时就发现了不同了。

高级用法

深度监听对象或数组的变化

当需要监听对象或数组内部属性的变化时，可以设置 deep: true

new Vue({data: {user: {name: 'John',age: 30}},watch: {user: {handler: function(newVal, oldVal) {console.log('user 对象发生变化',newVal, oldVal);},deep: true}}
});

这时候打印的newVal, oldVal其实是一样的，而且必须加上deep：true。要不然即使对象里面属性改变handler函数也是不执行的。可以去掉试试。

使用 deep: true 可以深度遍历对象内部的属性，当任意属性发生变化时都会触发 watch 的处理函数。

娜娜娜娜，我们yao监听对象里的属性怎么办，只想其中的属性改变时执行某个方法怎么办,

see👇

 监听对象里的属性

new Vue({data: {user: {name: 'John',age: 30,type: 30,}},watch: {'user.type': {handler(newVal, oldVal) {// 打印旧值和新值console.log('旧值:', oldVal, '新值:', newVal);// 执行相关操作if (newVal !== oldVal) {// this.updateStyle();this.addMapServer(newVal);}},immediate: true // 立即执行一次监听函数}}
});

立即触发监听函数

可以通过设置 immediate: true 来立即触发监听函数，即在初始化时立即执行一次监听函数：

new Vue({data: {count: 0},watch: {count: {handler: function(newVal, oldVal) {console.log(`count 的值变为 ${newVal}`);},immediate: true}}
});

如果要监听对象里面多个属性变化

你可以使用计算属性来派生新的数据，然后通过 watch 特性来监听这个计算属性的变化。

computed: {
comSetView() {return `${this.option.lng},${this.option.lat},${this.option.height},${this.option.pitchRadiu}`;}
}watch: {comSetView: {deep: true,handler(){this.metSetView()}},
}

这样就不用一个一个属性的拆开写了

移除监听

如果需要在组件销毁时移除 watch，可以通过 vm.$watch 返回的函数来移除监听：

var unwatch = vm.$watch('expression', callback);// 在适当的时机移除监听
unwatch();