Vue 2.0学习笔记之Vue中的computed属性

<div id="app">
<div v-for="subject in results">
<input v-model="subject.marks">
<span>Marks for {{ subject.name }}: {{ subject.marks }}</span>
</div>
<div>
Total marks are: {{ totalMarks }}
</div>
</div>

效果如下：

计算属性 vs 方法

我们可以使用Vue中的 method 计算出学科的总分，最终得到的总数结果是相同的。

在上例的基础上，我们把 computed 区块中的 totalMarks 函数整体移到 methods 中。同时在模板中将 {{ totalMarks }} 替换成 {{ totalMarks() }} 。 你最终看到的结果是一样的，如下所示：

let app = new Vue({
 el: '#app',
 data () {
  return {
   results: [
    {
     name: '英语',
     marks: 70
    },
    {
     name: '数学',
     marks: 80
    },
    {
     name: '历史',
     marks: 90
    }
   ]  }
 },
 methods: {
  totalMarks: function () {
   let total = 0
   let me = this
   for (let i = 0; i < me.results.length; i++) {
    total += parseInt(me.results[i].marks)
   }
   return total
  }
 }
})

虽然这两种方式输出的结果是相同的，但是性能将遭受毁灭性的打击。使用这种方法， totalMarks() 方法在每次页面渲染时都被执行一次（例如，使用每一个 change ）。

如果我们有一个计算属性，那么Vue会记住计算的属性所依赖的值（在我们这个示例中，那就是 results ）。通过这样做，Vue只有在依赖变化时才可以计算值。否则，将返回以前缓存的值。这也意味着 只要 results 还没有发生改变，多次访问 totalMarks 计算属性会立即返回之前的计算结果，而不必再次执行函数。

上面两个示例也说明，在Vue中 计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

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

相比之下，每当触发重新渲染时，方法的调用方式将总是再次执行函数。因此，函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter ！如果你不希望有缓存，请用方法来替代。