2018-12-6 Vue里的计算属性和侦听器

1.其实几个月前就接触过mobx了，但是到现在还没分清楚@action和@computed的区别，和分别适用的范围。同理，vue的computed()我也不知道和直接定义有什么区别。
赶紧来看一波官方文档
Vue里的计算属性和侦听器

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

• 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
• 然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。
• 这就意味着只要 message还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
• 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

2.我发现项目里用的vue-class-component的写法似乎不能使用vue实例的data,watch,methods等属性，参考项目中其他页面的写法，考虑使用vue命令式的API进行调用
vm.$watch( expOrFn, callback, [options] )