在Vue中，data是十分常見(jiàn)的一個(gè)屬性。data可以用來(lái)存儲(chǔ)組件內(nèi)的數(shù)據(jù)，這些數(shù)據(jù)可以是響應(yīng)式的，在數(shù)據(jù)變化時(shí)可以自動(dòng)更新視圖。

除了存儲(chǔ)數(shù)據(jù)外，在Vue中，我們還可以將函數(shù)作為data的值存儲(chǔ)，這些函數(shù)被稱(chēng)為計(jì)算屬性（Computed）。計(jì)算屬性可以根據(jù)已有的data計(jì)算出新的值，這些計(jì)算出來(lái)的值也是響應(yīng)式的。

讓我們來(lái)看一個(gè)簡(jiǎn)單的例子。我們需要在組件中展示一個(gè)計(jì)數(shù)器，當(dāng)我們每次點(diǎn)擊按鈕時(shí)，計(jì)數(shù)器就會(huì)加一。我們可以通過(guò)data來(lái)實(shí)現(xiàn)：

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

但是，如果我們需要在計(jì)數(shù)器上套一個(gè)單位，比如“次”，“個(gè)”等等，我們每次更新count時(shí)都需要手動(dòng)加上計(jì)數(shù)器的單位。這顯然會(huì)導(dǎo)致很多重復(fù)的代碼。

這時(shí)候計(jì)算屬性就會(huì)很有用，我們可以在data中存儲(chǔ)單位，然后在計(jì)算屬性中將計(jì)數(shù)器和單位拼接起來(lái)：

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

這樣，在模板中可以直接使用計(jì)算屬性counterWithUnit來(lái)展示計(jì)數(shù)器：

{{ counterWithUnit }}
+1

這樣，每次我們點(diǎn)擊按鈕時(shí)，計(jì)數(shù)器就會(huì)加一，并且計(jì)數(shù)器的值和單位組成的字符串也會(huì)自動(dòng)更新。

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

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，并且當(dāng)我們手動(dòng)將這個(gè)計(jì)算屬性設(shè)置為新的值時(shí)，計(jì)數(shù)器的值也會(huì)自動(dòng)重置為0。

計(jì)算屬性是Vue中十分重要的一個(gè)特性，它可以在很多場(chǎng)景下優(yōu)化我們的代碼，并且讓我們的組件更加靈活和易維護(hù)。不過(guò)需要注意的是，計(jì)算屬性不應(yīng)該進(jìn)行異步操作，否則會(huì)導(dǎo)致一些奇怪的行為。