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

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

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

這時(shí)我們就可以用到計(jì)算屬性。

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

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