計算屬性

為什麼需要計算屬性

把複雜的計算邏輯用簡潔的模板內容體現出來。

計算屬性的用法

computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }

弄好了直接在頁面中引用計算屬性的方法名

<div>{{reverseString}}</div>

對比原方法

<div>{{msg.split('').reverse().join('')}}</div>

最後得到的結果是一樣的

計算屬性與方法的區別

• 計算屬性是基於他們的依賴進行快取的 --- 可以節省效能
• 方法不存在快取

快取 在計算屬性中新增一個日誌 我們將該計算屬性執行兩遍

methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      }

檢視控制檯發現只有一次列印結果。說明，當第一次執行時，我們快取了她的結果，第二次執行時就可以直接呼叫，這樣可以提高效能。

而方法不存在快取，呼叫多少遍方法就會執行多少遍。