浅谈对vue中computed的理解

  computed为vue中的一个计算属性,相当于明确演示了一遍getter和setter的运行过程。

上一段官方示例代码:

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
vm.aPlus   // -> 2

这一步中,因为我们并没有对a进行任何操作,所以它执行了aPlus中的get,返回值为2。结果存入缓存。

vm.aPlus = 3

而这一步通过computed属性将a的值修改为了2。结果存入缓存。

 

posted @ 2017-08-03 15:16  咕噜的鱼  阅读(459)  评论(0)    收藏  举报