浅谈对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

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

vm.aPlus // -> 2

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

vm.aPlus = 3

vm.aPlus = 3

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

　　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。结果存入缓存。