Vue中的 watch 监听使用与计算属性 computed使用小记

观察 Vue 实例变化的一个表达式或计算属性函数

    // a 单个属性的监听
    // 'obj.a'字符串形式监听对象单个属性
    // obj 对象监听，给对象的所有属性都加上监听器，性能开销会非常大
    watch: {
     'obj.a': {
      handler(newName, oldName) {
       console.log('新值--', newName, '旧值--', oldName)
      },
      immediate: true, // 该回调将会在侦听开始之后被立即调用一次
      deep: true // 深度 watcher,为了发现对象内部值的变化,注意监听数组的变动不需要这么做。
     }
    }

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。 

 data() {
    return {
        a:1
    }
}

// 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
computed: {
 // 仅读取
 v1: function() {
  return this.a * 2
 },
 // 读取和设置
 v2: {
  get: function() {
   return this.a + 1
  },
  set: function(v) {
   this.a = v - 1
  }
 }
}

this.v2 // => 2
this.v2 = 3
this.a // => 2
this.v1 // => 4