Vue.js中computed和watch的区别

计算属性computed

computed的概念

Vue的计算属性computed用于返回一个计算值，如果用于计算这个计算值的data的属性（即依赖的响应式 property ）发生变化，计算值也会相应的发生变化。

 

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

computed的缓冲特性

computed有时可以被methods代替，可以简单的理解为不需要写()的method方法。

但区别于methods每次调用都会执行计算，computed的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。

监听选项watch

watch的概念

Vue的选项watch用于监听某个变量的变化，如果变量变化则异步地执行watch中对应的函数。

 

var vm = new Vue({
    data:{
        a : 1
    },
    
    watch:{
        //监听变量a的变化，如果变化就执行function
        a:function(newValue,oldValue){
            console.log('new: %s, old: %s', val, oldVal)
        }
    }
})

vm.a  = 2 //输出：new: 2, old: 1

watch的两个重要选项

• 选项：deep：
  为了发现对象内部值的变化，可以在选项参数中指定 deep: true。(也就是说一般情况下，如果你监听某个对象obj,如果对象的属性发生变化obj.a = 2，watch是不会发现的)

  vm.$watch('someObject', callback, {
  deep: true
  })
  vm.someObject.nestedValue = 123
  // callback is fired
  

• 选项：immediate
  在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调：

    vm.$watch('a', callback, {
    immediate: true
    })
    // 立即以 `a` 的当前值触发回调