計算屬性——介紹

模板內的表達式非常便利，但是設計他們的初衷是用於簡單計算的。在模板中放入太多的邏輯會讓模板太過沈重切難以維護。如下：

1 <div id="example">
2   {{ message.split(‘‘).reverse().join(‘‘) }}
3 </div>

上面的例子中，模板不是簡單的聲明式邏輯。必須要看一段時間才看意識到，這裏面是想要顯示message的反轉字符串。想要在模板中多次引用此處的反轉字符串時，就會更加難以處理。

所以對於復雜的邏輯要使用計算屬性。

計算屬性——基礎例子

這裏我們聲明了一個計算屬性reversedMessage

html

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

js

var vm = new Vue({
  el: ‘#example‘,
  data: {
    message: ‘Hello‘
  },
  computed: {
    
 
// 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }
})

結果：

打開瀏覽器的控制臺，自行修改例子的vm。vm.reversedMessage的值取決於vm.message的值

js

var vm = new Vue({
  el: ‘#example‘,
  data: {
    message: ‘Hello‘
  },
  computed: {
    
 
// 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }
});
console.log(vm.reversedMessage) // => ‘olleH‘
vm.message = ‘Goodbye‘
console.log(vm.reversedMessage) // => ‘eybdooG‘

我們可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue知道vm.revsersedMessage依賴於vm.message，因此當vm.message發生變化時，所有依賴vm.reversedMessage的綁定也會更新。而且最奇妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的getter函數是沒有副作用的，這使它更易於測試和理解。

計算屬性——計算屬性VS緩存方法

你可能已經註意到我們可以通過在表達式中調用方法來達到同樣的效果：

html

<p>Reversed message: "{{ reversedMessage() }}"</p>

js

// 在組件中
methods: {
  reversedMessage: function () {
    return this.message.split(‘‘).reverse().join(‘‘)
  }
}

我們可以將同一個函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基於他們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要message還沒有發生改變，多次訪問reversedMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。

這也意味著下面的計算屬性將不再更新，因為Data.now()不是響應式依賴：

computed: {
  now: function () {
    return Date.now()
  }
}

相比之下，每當觸發重新渲染時，調用方法總會重新再次執行函數。

我們為什麽要使用緩存？假設我們有一個性能開銷比較大的計算屬性A，它需要遍歷一個巨大的數組並作大量的計算。然後我們可能有其他的計算屬性依賴於A。如果沒有緩存，我們將不可避免的多次執行A的getter！如果你不希望有緩存，請用方法來替代。

計算屬性——計算屬性VS偵聽屬性

Vue提供了一種更通用的方式來觀察和響應Vue實例上的數據變動：偵聽屬性。

當你有一些數據要隨著其他數據變動而變動時，你很容易濫用watch——特別是如果你之前使用過angularJS。

然而，通常更好的做法是使用計算屬性而不是命令式的watch回調。細想一下下面的例子：

html

<div id="demo">{{ fullName }}</div>

js

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

上面的代碼是命令式且重復的。將它與計算屬性的版本進行比較：

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

好多了，不是嗎？？？？？？，沒看出來好在哪兒，臥槽

計算屬性——計算屬性的setter

計算屬性默認只有getter，不過在需要時你也可以提供一個setter：

js

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ‘ ‘ + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(‘ ‘)
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

現在再運行vm.fullName = ‘John Doe‘時，setter會被調用，vm.firstName和vm.lastName也會相應的地被更新。

偵聽器

無~~~~~~~~~

vue基礎——計算屬性和偵聽器