Vue學習深入剖析計算屬性

有些時候，我們在模板中放入了過多的邏輯，從而導致模板過重，且難以維護。例如：

碰到這樣的情況，我們必須看一段時間才能意識到，這裡是想要顯示變數message的翻轉字串，而且，一旦我們想要在模板中多次使用翻轉字串時，會更加麻煩。

所以，當我們處理複雜邏輯時，都應該使用計算屬性。

計算屬性是vue配置物件中的屬性，使用方式如下：

我們可以看到，returnmsg的值取決於msg的值，所以，當我們更改msg的值是，reversedmsg的值也會隨之更改。

雖然在表示式中呼叫方法也可以實現同樣的效果，但是使用計算屬性

和使用方法有著本質的區別。

當使用方法時，每一次頁面重新渲染，對應的方法都會重新執行一次，如：

原始字串:

"}"<

/p>

翻轉字串:

"}"<

/p>

原始字串:

"}"<

/p>

翻轉字串:

在上面的例子中我們可以看到，一旦更改name的值，頁面會重新渲染，此刻控制台中列印出'methods方法執行了！'這串字串，代表著returnmsg這個函式執行了，但是我們並不需要該方法執行，因為改動的資料和這個函式沒有任何關係，如果這個函式內的邏輯很複雜，那麼對於效能來講，也是一種消耗。

也可以看到，當給資料msg重新賦值時，計算屬性並沒有執行。

所以，計算屬性和方法的最本質的區別，是：計算屬性是基於響應式依賴進行快取的，計算屬性的值一直存於快取中，只要它依賴的data資料不改變，每次訪問計算屬性，都會立刻返回快取的結果，而不是再次執行函式。而方法則是每次觸發重新渲染，呼叫方法將總會再次執行函式。

那麼，為什麼需要快取呢？假如說，我們有乙個計算屬性a，它需要遍歷乙個巨大的陣列並且做巨大的計算。然後我們需要使用到這個計算屬性a，如果沒有快取，我們就會再次執行a的函式，這樣效能開銷就變得很大了。

計算屬性除了寫成乙個函式之外，還可以寫成乙個物件，物件內有兩個屬性，getter&setter，這兩個屬性皆為函式，寫法如下：

const vm =

newvue(,

setter()

}}})

在前面，我們直接將計算屬性寫成了乙個函式，這個函式即為getter函式。也就是說，計算屬性預設只有getter。

getter的this，被自動繫結為vue例項。

可選，set函式在給計算屬性重新賦值時會執行。

引數：為被重新設定的值。

setter的this，被自動繫結為vue例項。

要注意，即使給計算屬性賦了值，計算屬性也不會改變，在重複一遍，只有當依賴的響應式屬性變化了，計算屬性才會重新計算。

Vue學習 深入剖析計算屬性