Vue - watch监听

快速掌握Vue的watch监听属性

• watch可以帮我们监听data数据对象中的属性值发生改变。
• 当监视的数据发生变化，就会执行它的回调函数。
• 注意：要监听的属性，需要在data中定义。

类型： { [key: string]: string | Function | Object | Array }

键是需要监听的表达式，值是对应回调函数 | 方法名 | 包含选项的对象。

Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

data:{
	firstName:'张'，
	lastName:'三丰',
	name:'张-三丰'，
	info:{
		hobby:'篮球'
	}
},
watch:{
	lastName:{
		// immediate默认为false，只有改为true时 初始化时会调用handler
		immediate: true,
		// 当lastName发生变化时，会调用以下handler方法
		handler(newValue, oldValue){
			console.log('lastName被修改了', newValue, oldValue)
		}
	},
	// 简写：
	firstName(val){
		this.name = val = '-' + this.lastname
	},
	// 针对对象等数据类型，如果其内部属性有改动，需要深度监听
	info:{
		handler: function(newValue, oldValue){
			console.log('info', newValue, oldValue)
		},
		// 深度监听 可以监听'hobby'的变化
		deep: true
	}
}

官方示例：

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // 方法名
    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) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1