前言

計(jì)算屬性是用來聲明式的描述一個值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個計(jì)算屬性上時，Vue 會在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時更新 DOM。這個功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動并且易于維護(hù)。

開始用vue會把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時候data屬性里變量多了之后覺得有些只是用一次的變量就直接寫到模版里了，后來看到同組的同事在用computed屬性，就又去查了一下api，發(fā)現(xiàn)這種情況其實(shí)最好用的就是computed。

1. computed可以保持模版的清晰，在template里盡量只進(jìn)行展示和綁定，而不要加入邏輯操作。

2. 用computed的還有一個好處就是會跟隨其他data屬性的變化自動變化

比如官方文檔的一個例子：

var vm = new Vue({ ? el: '#demo', ? data: { ? firstName: 'Foo', ? lastName: 'Bar', ? fullName: 'Foo Bar' ? } ?}) ?vm.$watch('firstName', function (val) { ? this.fullName = val + ' ' + this.lastName ?}) ?vm.$watch('lastName', function (val) { ? this.fullName = this.firstName + ' ' + val ?})

如果用watch就會產(chǎn)生代碼的冗余，比如在直播中狀態(tài)的變化就可以用來計(jì)算是否展示視頻之類的上層屬性

var vm = new Vue({ ? el: '#demo', ? data: { ? firstName: 'Foo', ? lastName: 'Bar' ? }, ? computed: { ? fullName: function () { ? ?return this.firstName + ' ' + this.lastName ? } ? } ?})