什么是computed屬性

computed 屬性用于聲明計算屬性，這些屬性的值是基于其他響應式屬性計算而來的，當依賴的響應式屬性發(fā)生變化時，計算屬性會自動重新計算。

與Vue.js 2相比，Vue.js 3的 computed 屬性語法稍有變化，不再使用對象字面量，而是使用類似函數(shù)的形式來聲明計算屬性。此外，Vue.js 3還引入了一個新的 ref 函數(shù)，用于創(chuàng)建響應式引用，可以在 setup 函數(shù)中使用。

下面是一個簡單的Vue.js 3中的 computed 的例子：

<template><div><p>{{ message }}</p><p>{{ reversedMessage }}</p></div>
</template><script setup>
// 使用 <script setup> 語法糖// 定義響應式數(shù)據(jù)
const message = ref('Hello, Vue.js 3!');// 使用 computed
const reversedMessage = computed(() => {// 計算屬性的值是基于響應式數(shù)據(jù) message 計算的return message.value.split('').reverse().join('');
});
</script>

在上面的例子中，reversedMessage 是一個計算屬性，它依賴于 message 反序輸出message的內容

計算屬性的作用

computed 屬性的存在主要是為了解決一些常見的需求，使得數(shù)據(jù)的計算和派生更加方便、高效，并確保數(shù)據(jù)的響應性。

以下是一些使用計算屬性的主要原因：

1. 依賴追蹤： 計算屬性允許你聲明式地描述數(shù)據(jù)的依賴關系。當依賴的數(shù)據(jù)發(fā)生變化時，計算屬性會自動重新計算，而無需手動編寫更新邏輯。這有助于避免手動追蹤依賴關系，提高代碼的可維護性。

2. 緩存： 計算屬性會緩存其結果，只有在依賴發(fā)生變化時才重新計算。這意味著如果多次訪問同一個計算屬性，只有在它的依賴發(fā)生變化時才會重新計算，從而提高性能。

3. 簡化模板邏輯： 在模板中，你可以直接使用計算屬性，而不必在模板中編寫復雜的邏輯或計算。這使得模板更加清晰和易讀。

4. 組合邏輯： 計算屬性允許你將一些復雜的邏輯組合成一個屬性，使代碼更加模塊化和可復用。

下面是一個簡單的例子，展示了計算屬性的用途：

<script setup>
import { ref } from 'vue'
const radius = ref(5)
const area = computed(() => {return Math.PI * radius.value * radius.value
})const circumference = computed(() => {return 2 * Math.PI * radius.value;
})
</script>

在上面的例子中，area 和 circumference 都是計算屬性，它們依賴于 radius。當 radius 發(fā)生變化時，這兩個計算屬性會自動更新，而無需手動干預。這樣可以使代碼更加清晰和易于維護。

computed VS methods

計算屬性 (computed 屬性) 和普通的函數(shù)在Vue.js中的使用有一些區(qū)別和優(yōu)勢。
計算屬性更適合用于模板中的聲明式邏輯，特別是涉及到響應式數(shù)據(jù)的復雜計算。普通函數(shù)更適合那些不依賴響應式數(shù)據(jù)的邏輯或者不需要自動依賴追蹤的場景。

區(qū)別：

1. 自動依賴追蹤：

   • 計算屬性： Vue.js 會自動追蹤計算屬性的依賴關系。只要計算屬性中用到的響應式數(shù)據(jù)發(fā)生變化，計算屬性就會重新計算。
   • 普通函數(shù)： 普通函數(shù)沒有自動的依賴追蹤。你需要手動管理函數(shù)中使用的依賴關系，可能需要使用watch來監(jiān)聽變化，或者在模板中使用函數(shù)時手動觸發(fā)更新。

2. 緩存機制：

   • 計算屬性： 具有緩存機制，只有當依賴變化時才會重新計算。多次訪問相同計算屬性時，只會計算一次。
   • 普通函數(shù)： 沒有內置的緩存機制，每次調用函數(shù)都會重新執(zhí)行。

優(yōu)勢：

1. 簡化模板邏輯：

   • 計算屬性： 用于在模板中聲明式地處理復雜的邏輯，使模板更加清晰和簡潔。
   • 普通函數(shù)： 在模板中使用普通函數(shù)可能導致模板變得復雜，尤其是當邏輯比較復雜時。

2. 性能優(yōu)化：

   • 計算屬性： 具有緩存機制，可以避免不必要的重復計算，提高性能。
   • 普通函數(shù)： 沒有緩存機制，每次調用都會重新執(zhí)行，可能導致性能下降。

3. 代碼組織：

   • 計算屬性： 用于將相關邏輯組織成屬性，使代碼更加模塊化和可維護。
   • 普通函數(shù)： 在組件中直接定義函數(shù)，可能導致代碼分散，難以維護。

可寫setter

在Vue.js中，計算屬性默認是只讀的，也就是說你不能直接在模板中通過v-model或者類似的方式修改計算屬性的值。計算屬性是依賴于其他響應式數(shù)據(jù)的，它的值是由這些響應式數(shù)據(jù)計算而來的。

如果你需要在Vue實例中有一個既能夠計算值，又能夠被修改的屬性，你可以使用 computed 的 get 和 set 方法。這樣你就可以通過 v-model 或者手動賦值的方式修改這個屬性的值。

以下是一個例子：

<template><div><p>Radius: {{ radius }}</p><p>Area: {{ area }}</p><input v-model="radius" type="number" placeholder="Enter radius" /></div>
</template><script setup>
import { ref, computed } from 'vue';const radius = ref(5);const area = computed({get: () => Math.PI * radius.value * radius.value,set: (newValue) => {// 當修改 area 時，更新 radiusradius.value = Math.sqrt(newValue / Math.PI);}
});
</script>

在上面的例子中，area 是一個計算屬性，通過 get 方法計算值，通過 set 方法監(jiān)聽對 area 的修改，然后反向計算出對應的 radius。這樣你就可以在模板中使用 v-model="area" 來修改 area 的值。

使用getter注意事項

計算屬性的 getter 主要用于計算和返回一個派生值，應當保持簡單、同步，不應該執(zhí)行復雜的邏輯或副作用。如果有復雜邏輯或異步操作，應當考慮使用其他適當?shù)姆绞健?br /> 當使用計算屬性的 getter 時，有一些需要注意的事項：

1. 只返回值： 計算屬性的 getter 應當只返回一個值，而不是執(zhí)行一些可能產(chǎn)生副作用的操作。計算屬性的目的是計算一個值，而不是用于執(zhí)行命令式的操作。如果你需要執(zhí)行一些副作用，應該考慮使用生命周期鉤子函數(shù)或 watch。

2. 不要使用箭頭函數(shù)： 在 getter 中，盡量不要使用箭頭函數(shù)。因為箭頭函數(shù)沒有自己的 this 上下文，而在計算屬性中，this 指向的是當前 Vue 實例，而非調用它的對象。使用普通函數(shù)確保正確的 this 上下文。當然在vue3 setup語法糖內是可以使用的箭頭函數(shù)的。

3. 避免異步操作： 計算屬性的 getter 應當是同步的，不要在 getter 中執(zhí)行異步操作。如果需要異步操作，可以考慮使用 watch 或者其他適當?shù)纳芷阢^子。

4. 避免修改計算屬性依賴的響應式數(shù)據(jù)： 計算屬性依賴于響應式數(shù)據(jù)，但在 getter 中應當避免修改這些響應式數(shù)據(jù)，因為這樣會導致無限循環(huán)更新。

   computed: {myComputedProperty: function() {// 避免在 getter 中修改依賴的響應式數(shù)據(jù)// 這樣會導致無限循環(huán)更新this.someValue = this.someValue + 1;return this.someValue;}
   }
   

小結

• 計算屬性值會基于其響應式依賴被緩存。一個計算屬性僅會在其響應式依賴更新時才重新計算。
• 可以使用setter修改計算屬性的值
• 不要在 getter 中做異步請求或者更改 DOM