搞懂vue的計算屬性

計算屬性的關鍵詞: computed。

computed也是進行數據的存儲

那它和data普通屬性有什麼區別？

計算屬性是以函數的方式進行返回 更靈活，數據能夠包含邏輯處理操做，能夠對計算屬性中的數據進行監視。

舉個栗子

反轉字符串

<h2>{{msg.split(' ').reverse().join(' ')}}</h2>
直接在模板內這樣寫很不方便閱讀

計算屬性

data:{    
         //普通的屬性
        msg:'我 是 灰太狼',
        num1:5
     }，
computed:{
           resemsg:function(){
             //能夠包含邏輯處理操做，同時reverseMsg依賴於msg
　　　　　　return this.msg.split(' ').reverse().join(' ');
             }
     }

<h2>{{resemsg}}</h2>
方便閱讀 　　
同時對data數據進行監視，msg值更改 計算屬性的值也更改

好的 接下來計算屬性VS方法

那你就會說了，能夠使用 methods 來替代 computed，效果上兩個都是同樣的。

可是區別在於，用computed也就是計算屬性是基於它的依賴進行更新的，只有在相關依賴發生改變時才能更新變化。計算屬性是緩存的，只要相關依賴沒有改變，屢次訪問計算屬性獲得的值是以前緩存的計算結果，不會屢次執行

而使用 methods ，在從新渲染的時候，函數總會從新調用執行。（使用 computed 性能會更好，可是若是你不但願緩存，你能夠使用 methods 屬性）

待補充