【Vue】watch与$watch使用详解

配置项

vue-watch 有两个可配置项 deep、immediate，分别表示是否深度监听及是否立即调用

定义形式

监听目标 key

监听目标 的定义形式包括：普通key、字符串、函数（ 仅 $watch）

1. 普通key：name: function() {}，name(){}
2. 字符串：监听具体深层属性 a.b.c、监听当前路由信息 $route
3. 函数：仅可在 $witch 中定义，可同时监听多个数据变化，可以通过监听 computed 的返回值来达到同样的效果

响应事件 value

响应事件 的定义形式包括：函数、对象、字符串、数组

1. 函数：接受两个参数：新数据 及 旧数据
2. 对象：可定义三个属性，handler、deep、immediate；handler 为数据变化后的回调函数，后两者为配置项
3. 字符串：设置回调为 methods 中的同名方法
4. 数组：元素为上述三种形式，数据变化时会依次触发

示例

watch选项

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
	newA(val, oldVal) {
		console.log('监听computed的值实现监听多个数据变化', val, oldVal)
	},
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // methods选项中的方法名
    b: 'someMethod',
    // 深度侦听，该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // 调用多个回调
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        immediate: true
      }
    ],
    // 侦听表达式
    'e.f': function (val, oldVal) { /* ... */ }
  },
  computed: {
  	newA() {
  		return this.a + this.b;
  	}
  }
})

$watch实例方法

$watch 返回一个取消观察函数，用来停止触发回调

let unwatch = vm.$watch(
  function () {
    // 表达式 `this.a + this.b` 每次得出一个不同的结果时
    // 处理函数都会被调用。
    // 这就像监听一个未被定义的计算属性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做点什么
  },{ // 三参为配置对象
  	deep: true
  }
)

unwatch(); // 停止监听

监听多个数据变化

1. watch中通过监听 computed 实现
2. vm.$watch 中通过一参传入函数实现