Vue 計算屬性

2021-10-07 06:15:40 字數 2012 閱讀 5602

如果表示式變數是 「靜態(程式中不改變)」,那麼計算屬性的優勢並不明顯。

模板內的表示式非常便利,但是設計它們的初衷是用於簡單運算的。如果在模板中放入太多的邏輯會讓模板過重且難以維護(每次載入都會計算後編譯結果)。

"example"

>

}div

>

在這個地方,模板不再是簡單的宣告式邏輯,這裡是想要顯示變數message的翻轉字串。

當你想要在模板中多包含此處的翻轉字串時,就會更加難以處理。所以,對於任何複雜邏輯,你都應當使用計算屬性。

來看乙個例子,來看看計算屬性怎麼用。

>

>

>

未反**}h3

>

>

已反**}h1

>

div>

body

>

let vm =

newvue(,

// 計算屬性

依照上面的例子,我們宣告了乙個計算屬性flag,提供的函式將用作propertyvm.flaggetter函式,我們在控制台證明一下:

當你改變vm.message時,它會跟著變化:

也就是說,vm.flag的值始終取決於vm.message的值。

你可以像繫結普通 property 一樣在模板中繫結計算屬性。vue 知道 vm.flag 依賴於 vm.message,因此當 vm.message 發生改變時,所有依賴 vm.flag 的繫結也會更新。

vue:我們已經以宣告的方式建立了這種依賴關係:計算屬性的 getter 函式是沒有*** (side effect) 的,這使它更易於測試和理解。

你可能已經注意到我們可以通過在表示式中呼叫方法來達到同樣的效果,我們改造一下前面的例子:

>

>

>

未反**}h3

>

>

已反**}h1

>

div>

body

>

let vm =

newvue(,

methods:}}

)

我們可以將同一函式定義為乙個方法而不是乙個計算屬性,兩種方式的最終結果看似是完全相同的。

然而,不同的是計算屬性是基於它們的響應式依賴進行快取的。只在相關響應式依賴發生改變時它們才會重新求值。

我們為什麼需要快取?假設我們有乙個效能開銷比較大的計算屬性 a,它需要遍歷乙個巨大的陣列並做大量的計算。然後我們可能有其他的計算屬性依賴於 a。如果沒有快取,我們將不可避免的多次執行 a 的 getter!如果你不希望有快取,請用方法來替代。

簡單來說,如果資料不發生改變,計算屬性是不會重新計算的,當資料未改變時,將直接拿快取而無需再次重新計算。而呼叫函式的方式則每次無論資料是否發生改變,都會重新計算。

偵聽屬性watch也同樣可以達到效果,但更建議使用計算屬性,因為更簡潔更強。

vue 計算屬性

在這裡我覺得講 computed 和methods放在一起討論 更 便於 理解。computed var vm new vue computed methods methods methods和computed從顯示效果是一樣的,但是主要的區別是 1.computer 是存在快取的,在data沒有改...

Vue 計算屬性

計算屬性在處理一些複雜邏輯時是很有用的。模板是為了描述檢視的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 vue.js 將繫結表示式限制為乙個表示式。如果需要多於乙個表示式的邏輯,應當使用計算屬性 computed。例項1 反轉字串 例項1中模板複雜,不好理解,現在我們採用計算屬...

Vue計算屬性

計算屬性 在模板中繫結表示式是非常便利的,但是它們實際上只用於簡單的操作。如果需要多於乙個表示式的邏輯,應當使用計算屬性。1.基礎例子 a b js var vm new vue computed 結果 a 1,b 2 這裡我們宣告了乙個計算屬性b。我們提供的函式將用作屬性vm.b的getter。c...