Vue资料-Vue.js的计算属性（computed properties）

1、原由？

 

        虽然在模板中绑定表达式是很是便利的，可是它们实际上只用于简单的操做。在模板中放入太多的逻辑会让模板太重且难以维护。好比：

  

  <div id="example">

     {{ message.split('').reverse().join('') }}

  </div>

 

        这样，模板再也不简单和清晰。在实现反向显示 message 以前，你应该经过一个函数确认它。因此，Vue.js提供了计算属性来让咱们去处理实例中的复杂逻辑。

 

       计算属性 (computed properties) 就是不存在于原始数据中，而是在运行时实时计算出来的属性。

 

案例以下：

 

 

       在上面的案例中，计算属性fullname 和 reverse 的值始终取决于firstname 和 lastname。计算属性默认只有 getter ，固然在须要时咱们也能够提供一个 setter 。计算属性被设计出来的目的在于：getter 是干净无反作用的。

 

2、计算属性 和 Methods的区别？

 

       当页面从新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，适合较大量的计算和改变频率较低的属性；而method，就是当页面从新渲染的时候（页面元素的data变化，页面就会从新渲染），都会从新调用method。

  

        若是不但愿有缓存，咱们能够用method取代computed。

 

疑惑：为何须要缓存？

  

假设咱们有一个重要的计算属性 A ，这个计算属性须要一个巨大的数组遍历和作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存，咱们将不可避免的屡次执行 A 的 getter ！

  

3、计算属性的setter方法

 

计算属性默认只有 getter ，不过在须要时你也能够提供一个 setter ：

  

  

运行结果：