計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：偵聽屬性。當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回撥。細想一下這個例子：

<div id="demo">{{ fullName }}</div>
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 } } })