大多數(shù)情況下，我們都可以將Vue組件中定義的屬性數(shù)據(jù)直接渲染到HTML中，但有些情況下，屬性中的數(shù)據(jù)需要處理后再進(jìn)行渲染，Vue給我們提供了計算屬性來實現(xiàn)這種邏輯。

計算屬性是用來聲明式的描述一個值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個計算屬性上時，那么當(dāng)其依賴的任何值發(fā)生變化時，Vue 會使該計算屬性改變并同時更新 DOM。這個功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動并且易于維護(hù)。簡單來說，計算屬性的本質(zhì)就是輔助插值表達(dá)式來進(jìn)行復(fù)雜邏輯運(yùn)算的。

例如：我們想定義一個type屬性，實時的檢測data中的count變量，當(dāng)count大于10的時候顯示‘大了’，小于10顯示‘小了’，并能夠渲染到HTML中。

這時我們就可以用到計算屬性。

在使用時，我們可以像訪問普通屬性一樣訪問他，我們可以定義一個添加按鈕，當(dāng)count的值發(fā)生變化時，計算屬性也會同步進(jìn)行更新。如圖：

這時可能有人覺得，同樣的場景我們也可以使用函數(shù)來實現(xiàn)。那么計算屬性與函數(shù)的最大區(qū)別是什么呢？雖然從結(jié)果來看，計算屬性與函數(shù)的結(jié)果完全一致，但是，計算屬性是基于其所依賴的存儲屬性的值的變化而重新計算的，其結(jié)果會被緩存。只要依賴屬性沒有變化，計算屬性的邏輯代碼就不會重新執(zhí)行。函數(shù)則不同，每次訪問其都會重新執(zhí)行一遍代碼。這也是計算屬性的優(yōu)勢所在。