Vue.js學習之計算屬性

前言

計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板裡把資料綁定到一個計算屬性上時，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的計算屬性的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

更多Vue.js學習之計算屬性相關文章請關注PHP中文網！