溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板里把數據綁定到一個計算屬性上時，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的計算屬性的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
