Vue是一個非常流行的JavaScript框架，它允許我們構建靈活且可維護的單頁應用程序。Vue提供了許多方便易用的功能，其中包括計算屬性(computed)。計算屬性允許我們將計算邏輯放在Vue實例中，以便在組件模板中使用。這不僅可以使我們的組件更易于維護，還可以提高代碼的可讀性和可重用性。

計算屬性是Vue組件中的一個函數屬性，它的作用是根據數據的變化計算并返回一個新的值。計算屬性的優點在于，它們只有在其中的依賴項發生變化時才會重新計算，而不是每次數據變化時都重新計算。這樣可以提高組件的性能和響應速度。

computed: {
totalPrice() {
return this.items.reduce((total, item) =>total + item.price, 0);
}
}

上面的示例中，我們定義了一個名為totalPrice的計算屬性，它會計算items數組中所有商品的總價。我們只需要在模板中調用totalPrice即可得到結果，而無需手動計算。

此外，計算屬性還支持setter函數。當我們需要在組件中修改計算屬性的值時，可以使用setter函數。

computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(value) {
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}

上面的示例中，我們定義了一個名為fullName的計算屬性，它會根據firstName和lastName計算出完整的姓名。在模板中讀取fullName時，會調用getter函數；而在修改fullName時，會調用setter函數，從而更新firstName和lastName。

無論是getter函數還是setter函數，都應該是純函數，即不應該修改其它數據或產生副作用。這可以確保計算屬性的可重用性和可靠性。