在Vue中，data是十分常見的一個屬性。data可以用來存儲組件內的數據，這些數據可以是響應式的，在數據變化時可以自動更新視圖。

除了存儲數據外，在Vue中，我們還可以將函數作為data的值存儲，這些函數被稱為計算屬性（Computed）。計算屬性可以根據已有的data計算出新的值，這些計算出來的值也是響應式的。

讓我們來看一個簡單的例子。我們需要在組件中展示一個計數器，當我們每次點擊按鈕時，計數器就會加一。我們可以通過data來實現：

data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}

但是，如果我們需要在計數器上套一個單位，比如“次”，“個”等等，我們每次更新count時都需要手動加上計數器的單位。這顯然會導致很多重復的代碼。

這時候計算屬性就會很有用，我們可以在data中存儲單位，然后在計算屬性中將計數器和單位拼接起來：

data() {
return {
count: 0,
unit: '次'
}
},
computed: {
counterWithUnit() {
return this.count + this.unit
}
},
methods: {
increment() {
this.count++
}
}

這樣，在模板中可以直接使用計算屬性counterWithUnit來展示計數器：

{{ counterWithUnit }}
+1

這樣，每次我們點擊按鈕時，計數器就會加一，并且計數器的值和單位組成的字符串也會自動更新。

我們還可以給計算屬性設置getter和setter。比如，我們可以針對上面的例子，通過setCount方法自動將計數器設置為0，這樣就不需要手動將計數器重置了：

data() {
return {
count: 0,
unit: '次'
}
},
computed: {
counterWithUnit: {
get() {
return this.count + this.unit
},
set(value) {
this.setCount(0)
}
}
},
methods: {
increment() {
this.count++
},
setCount(value) {
this.count = value
}
}

這樣，在模板中我們可以直接使用counterWithUnit，并且當我們手動將這個計算屬性設置為新的值時，計數器的值也會自動重置為0。

計算屬性是Vue中十分重要的一個特性，它可以在很多場景下優化我們的代碼，并且讓我們的組件更加靈活和易維護。不過需要注意的是，計算屬性不應該進行異步操作，否則會導致一些奇怪的行為。