模板內(nèi)的表達式常用于簡單的運算，當過長或邏輯復(fù)雜時，難以維護，計算屬性就是解決該問題的

什么是計算屬性

表達式如果過長，或邏輯更為復(fù)雜，就會變得臃腫甚至難以維護，比如：

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

該表達式包含 3 個操作，并不是很清晰，可以用計算屬性進行改寫：

<div id="app">{{ reverseText }} </div> <script>var app = new Vue({el: '#app',data: {text: '123,456'},computed: {reverseText: function () {//這里的 this 是當前的 Vue 實例return this.text.split(',').reverse().join(',');}}}) </script>

所有的計算屬性都以函數(shù)的形式寫在 Vue 實例內(nèi)的 computed 選項內(nèi)，最終返回計算結(jié)果。

計算屬性的用法

除了上例簡單的用法，計算屬性還可以依賴多個 Vue 實例的數(shù)據(jù)。只要其中任一數(shù)據(jù)變化，計算屬性就會重新執(zhí)行，視圖也會更新。例如，下面的實例是在展示購物車內(nèi)兩個包裹的總價。

<div id="app">{{ prices }} </div> <script>var app = new Vue({el: '#app',data: {package1: [{name: 'iphone xs max',price: 9999,count: 2},{name: 'ipad pro',price: 6666,count: 2}],package2: [{name: 'apple',price: 20,count: 20},{name: 'orange',price: 18,count: 20}]},computed: {prices: function () {var prices = 0;for(var i = 0; i < this.package1.length; i++) {prices += this.package1[i].price * this.package1[i].count;}for(var i = 0; i < this.package2.length; i++) {prices += this.package2[i].price * this.package2[i].count;}return prices;}}}) </script>

當 package1 和 package2 中的商品有任何變化時，比如購買數(shù)量變化或增刪商品時，計算屬性 prices 就會自動更新，視圖中的 prices 也會自動變化。

geter 和 setter

每一個計算屬性都包含一個 getter 和一個 setter，上面的兩個例子都是計算屬性的默認用法，只是利用了 getter 來讀取，在你需要時，也可以提供一個 setter 函數(shù)，當手動修改計算屬性的值時就會觸發(fā) setter 函數(shù)，執(zhí)行一些自定義操作，例如：

<div id="app">{{ fullName }} </div> <script>var app = new Vue({el: '#app',data: {firstName: 'Jack',lastName: 'Green'},computed: {fullName: {// getter, 用于讀取get: function () {return this.firstName + ' ' + this.lastName;},// setter，寫入時被觸發(fā)set: function (newValue) {var names = newValue.split(' ');this.firstName = names[0];this.lastName = names[names.length - 1];}}}}) </script>

當在瀏覽器的控制臺執(zhí)行 app.fullName = 'John Doe'; 時，setter 就會被調(diào)用，數(shù)據(jù) firstName 和 lastName 都會相對更新，視圖也會更新。

絕大多數(shù)情況下，我們只會用默認的 getter 方法來讀取一個計算屬性，在業(yè)務(wù)中很少用到 setter，因此在聲明一個計算屬性時，直接使用默認的方法即可，不必將 getter 和 setter 都聲明。

計算屬性除了上述簡單的文本插值外，還經(jīng)常用于動態(tài)地設(shè)置元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style。當使用組件時，計算屬性也常用于動態(tài)傳遞 props。

計算屬性還有兩個很實用的小技巧：一個計算屬性可以依賴其他的計算屬性；二是計算屬性不僅可以依賴當前 Vue 實例的數(shù)據(jù)，還可以依賴其他實例的數(shù)據(jù)。

計算屬性緩存

在上一篇介紹指令和時間時，你可能發(fā)現(xiàn)調(diào)用 methods 里的方法也可以與計算屬性起到同樣的作用，比如本章第一個示例可以用 methods 改寫為：

<div id="app">{{ reverseText() }} </div> <script>var app = new Vue({<!-- 注意：這里的 reverseText 是方法，所以要帶() -->el: '#app',data: {text: '123,456'},methods: {reverseText: function () {//這里的 this 是當前的 Vue 實例return this.text.split(',').reverse().join(',');}}}) </script>

沒有使用計算屬性，在 methods 里定義了一個方法實現(xiàn)了相同的效果，甚至該方法還可以接受參數(shù)，使用起來更靈活。那為什么還需要計算屬性呢？原因就是計算屬性是基于它的依賴緩存的，一個計算屬性所依賴的的數(shù)據(jù)發(fā)生變化時，它才會重新取值，所以 text 只要不改變，計算屬性也就不更新，例如：

computed: {now: function() {return Date.now();} }

這里的 Dtae.now() 不是響應(yīng)式依賴，所以計算屬性 now 不會更新。但是 methods 則不同，只要重新渲染，它就會被調(diào)用，因此函數(shù)也會被執(zhí)行。

使用計算屬性還是 methods 取決于你是否需要緩存，當遍歷大數(shù)組和大量計算時，應(yīng)當使用計算屬性，除非你不希望得到緩存。

轉(zhuǎn)載于:https://www.cnblogs.com/kindleheart/p/9983637.html

總結(jié)

以上是生活随笔為你收集整理的Vue(二) 计算属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。