vue的侦听器(watch)

语法

方式一

data () {
    return {
        someValue: 'hello'  
    }
},
watch: {
    someValue (newValue, oldValue) {
        console.log(newValue)
    }
}

方式二

data () {
    return {
        someValue: 'hello'  
    }
},
watch: {
　　someValue: {
　　　　handler (newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
       // ...
　　}
}

特殊类型

对象(数组)

data () {
　　return {
　　　　person: {
　　　　　　age: 18
　　　　}   
    }
},
watch: {
　　person: {
　　　　handler (newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

对象的具体属性

方式一

data () {
　　return {
　　　　person: {
　　　　　　age: 18
　　　　}   
    }
},
computed: {
　　age () {
　　　　return this.person.age
　　}
},
watch: {
    age (newValue, oldValue) {
        console.log(newValue)
    }
}

方式二

data () {
　　return {
　　　　person: {
　　　　　　age: 18
　　　　}   
    }
},
watch: {
    'person.age' (newValue, oldValue) {
        console.log(newValue)
    }
}

属性

deep

handler (newValue, oldValue) {
　　console.log(newValue)
},
deep: true

默认值是 false，代表是否深度监听
默认情况下 handler 只监听对象引用的变化，只有给对象赋值的时候它才会被监听到，当使用这个属性后，侦听器会遍历对象，为对象的所有属性加上侦听器，所以当对象的任何属性变化都会触发侦听器中的handler。当对象属性多的时候，性能开销会比较大，此时可以监听对象的某个具体属性。

immediate

handler (newValue, oldValue) {
　　console.log(newValue)
},
immediate: true

watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算。使用这个属性后，在初始化绑定的时候，也会去执行侦听器。

官方文档示例

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',
    // 深度 watcher
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 该回调将会在侦听开始之后被立即调用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

语法

方式一

方式二