開始用vue會把所有的模版上的數(shù)據(jù)都放到data屬性里，或者有的時候data屬性里變量多了之后覺得有些只是用一次的變量就直接寫到模版里了，后來看到同組的同事在用computed屬性，就又去查了一下api，發(fā)現(xiàn)這種情況其實最好用的就是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)的變化就可以用來計算是否展示視頻之類的上層屬性

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

轉(zhuǎn)載于:https://www.cnblogs.com/sparkmorry/p/5853387.html

總結(jié)

以上是生活随笔為你收集整理的Vue.js的计算属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。