Vue学习之computed

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

<div id="example">  <p>Original message: "{{ message }}"</p>  <p>Computed reversed message: "{{ reversedMessage }}"</p></div>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]    }  }}

这篇文章关于 computed和watch写的很不错，敲了下例子，感触还是比较深刻。
https://juejin.im/post/58d8806bac502e0058d778a1