前言

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

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

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

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就會產生代碼的冗余，比如在直播中狀態的變化就可以用來計算是否展示視頻之類的上層屬性

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

總結

以上就是關于Vue.js的計算屬性的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。