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 ：

  

  

運行結果：