你知道，什麼時候用Vue計算屬性嗎？

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

本文分享自華為雲社群《深入了解計算屬性，知道什麼時候該用Vue計算屬性嗎？》，作者： 前端老實人 。

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

碰到這樣的情況，我們必須看一段時間才能意識到，這裡是想要顯示變量message的翻轉字元串，而且，一旦我們想要在模闆中多次使用翻轉字元串時，會更加麻煩。 是以，當我們處理複雜邏輯時，都應該使用計算屬性。

計算屬性是Vue配置對象中的屬性，使用方式如下：

例如，我們想要擷取到一串字元串的翻轉字元串，我們可以利用計算屬性來做：

我們可以看到，reversedMsg的值取決于msg的值，是以，當我們更改msg的值是，reversedMsg的值也會随之更改。

其實，我們上述的功能，利用方法也可以實作，如：

雖然在表達式中調用方法也可以實作同樣的效果，但是使用計算屬性和使用方法有着本質的差別。 當使用方法時，每一次頁面重新渲染，對應的方法都會重新執行一次，如：

在上面的例子中我們可以看到，一旦更改name的值，頁面會重新渲染，此刻控制台中列印出方法執行啦這串字元串，代表着reversedMsg這個函數執行了，但是我們并不需要該方法執行，因為改動的資料和這個函數沒有任何關系，如果這個函數内的邏輯很複雜，那麼對于性能來講，也是一種消耗。

但是利用計算屬性做，就不會有這樣的現象出現，如：

此時可以看到，當給資料name重新指派時，計算屬性并沒有執行。 是以，計算屬性和方法的最本質的差別，是：計算屬性是基于響應式依賴進行緩存的，計算屬性的值一直存于緩存中，隻要它依賴的data資料不改變，每次通路計算屬性，都會立刻傳回緩存的結果，而不是再次執行函數。而方法則是每次觸發重新渲染，調用方法将總會再次執行函數。

那麼，為什麼需要緩存呢？

假如說，我們有一個計算屬性A，它需要周遊一個巨大的數組并且做巨大的計算。然後我們需要使用到這個計算屬性A，如果沒有緩存，我們就會再次執行A的函數，這樣性能開銷就變得很大了。

計算屬性除了寫成一個函數之外，還可以寫成一個對象，對象内有兩個屬性，getter&setter，這兩個屬性皆為函數，寫法如下：

在前面，我們直接将計算屬性寫成了一個函數，這個函數即為getter函數。也就是說，計算屬性預設隻有getter。 getter的this，被自動綁定為Vue執行個體。

何時執行？

當我們去擷取某一個計算屬性時，就會執行get函數。

可選，set函數在給計算屬性重新指派時會執行。 參數：為被重新設定的值。 setter的this，被自動綁定為Vue執行個體。

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

點選關注，第一時間了解華為雲新鮮技術~