在 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();