Vue的computed模板学习

根据官网文档，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护我们可以知道computed第一个作用是将复杂的逻辑简化到一个于一个函数内部，对外表现成一个有返回值的变量。

<p id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

由此我们可以想到，使用函数也可以达到相同的效果，我们为什么使用computed呢？

原因是computed可以缓存结果，多次访问，如果computed依赖的值没有变化，将会直接输出缓存的值。只有computed依赖的值有变化，才会再次计算。 computed除了geter 也有setter，setter就是在computed相关的值进行赋值的时候会触发的函数。

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}