}模板內的表示式常用於簡單的運算，當運算過長或邏輯複雜時，會難以維護。
<div>
}div
>
這個表示式包含3個操作，在遇到複雜邏輯時應該使用計算屬性。上面的例子可以用計算屬性進行改寫：
<div
id >
}div
>
vue(,
computed:}})
所有的計算屬性都以函式的形式寫在vue例項內的computed選項內，最終返回計算後的結果。
用法
在乙個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回乙個結果就可以。
計算屬性可以依賴多個vue例項的資料，只要其中任一資料變化，計算屬性就會重新執行，檢視也會更新。
<div
id >
總價：}
div>
vue(,
],package2:[,]
},computed:
for(var i = 0; i < this.package2.length; i++)
return
prices;}}
})當package1或package2中的商品有任何變化，比如購買數量變化或增刪商品時，計算屬性prices就會自動更新，檢視中的總價也會自動變化。
計算屬性的get、set
每個計算屬性都包含乙個getter和乙個setter，上面的例項都是計算屬性的預設用法，只利用了getter來讀取。在需要的時候，可以提供乙個setter函式，當手動修改計算屬性的值就像修改乙個普通資料那樣，會觸發setter函式，執行一些自定義操作。
<div
id >
姓名：}
div>
vue(,
computed:,
//setter,寫入時觸發
set: function
(newvalue)}}
})絕大多數情況下，我們只會用預設的getter方法來讀取乙個計算屬性，在業務中很少用到setter，所以宣告乙個計算屬性時，可以直接使用預設的寫法，不必將getter和setter都宣告。
計算屬性有兩個很實用的小技巧：
♦ 計算屬性可以依賴其他計算屬性
♦ 計算屬性可以依賴其他vue例項
<div
id>
div>
<
div
id>
}div
>
vue(
});vue(}})
快取
剛學計算屬性的時候，我有這樣乙個疑問，methods裡的方法可以與計算屬性起到同樣的作用。
<div
id >
}div
>
vue(,
methods:}})
沒有使用計算屬性，在methods裡定義了乙個方法實現了相同的效果，甚至該方法還可以接受引數，使用起來更靈活。既然使用methods就可以實現，為什麼還需要計算屬性。原因就是計算屬性是基於它的依賴快取的。乙個計算屬性所依賴的資料發生變更時，它才會重新取值，所以text只要不改變，計算屬性也就不更新。
computed:}
這裡的date.now()不是響應式依賴，所以計算屬性now不會更新。但是methods則不同，只要重新渲染，它就會被呼叫，因此函式也會被執行。
使用計算屬性還是methods取決於是否需要快取，當遍歷大陣列和做大量計算時，應當使用計算屬性，除非不想得到快取。
vue2 0學習記錄
1 在main.js可註冊全域性元件，vue.components 元件名稱 元件名 import 元件名 from components 元件檔案 3 元件的標籤名不可與系統的html標籤重複 4 父元件向子元件傳值 父元件有乙個陣列 users 在父元件模板中的子元件標籤中接收 users us...
Vue2 0學習之路
一 基礎 1.vue2.0學習記錄 hello world 2.vue2.0學習記錄 todo list初步 3.vue2.0學習記錄 mvvm模式 4.vue2.0學習記錄 全域性元件 5.vue2.0學習記錄 區域性元件 6.vue2.0學習記錄 父子元件傳值 7.vue2.0學習記錄 生命週期...
VUE2 0學習總結
摘要 年後公司專案開始上vue2.0，自己對學習進行了總結，希望對大家有幫助！vue2.0學習 vue融合了react和angular的優點，並且解決了react和angualr的痛點 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模...