计算属性与方法

一、计算属性缓存 vs 方法

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

Reversed message: "{{ reversedMessage() }}"

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

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。计算属性与方法其实都是一个函数。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。直接返回之前的缓存，代码效率也会更高。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
    now: function () {
        return Date.now()
    }
}

什么是响应式依赖，一般你定义在组件的data() {}中的数据就是响应式的。有时候你发现你定义的计算属性莫名其妙的就是没调用到，很大可能是因为你没用到响应式数据。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

二、侦听属性

在前端开发中，我想实现某个变量变化时，就调用相应的方法。vue中的监听属性能实现这个需求。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo'
  },  
  watch: {
    // 有两个参数，变化前，变化后的值
    firstName: function (val) {
      console.log('new val', val)
    }
})