接下來的幾天會分別介紹四個屬性，並互相比較倆倆之間差異和使用時機。

• computed
• methods
• filters
• watch

Computed

如果在模版內加入太多的邏輯運算，不但顯得雜亂也難以維護。

例如：在顯示預設的字串「Hello Vue!」之下，再顯示反轉後的字串。

模版範例

附上 fiddle (https://jsfiddle.net/hunterliu/4jbwwur7/1/)

<div id="app">
  <p>原始訊息：{{ message }}</p>
  <p>反轉訊息：{{ message.split('').reverse().join('') }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

Computed 基礎範例

若改用 computed 則較容易閱讀，也把運算邏輯從 HTML 拆出來了。

附上 fiddle (https://jsfiddle.net/hunterliu/y7ztd5dg/)

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

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

比較 Computed 和 Methods

若使用 method 改寫上例，也能得到相同的效果。

附上 fiddle (https://jsfiddle.net/hunterliu/xoywrh40/)

<div id="example">
  <p>Reversed message: "{{ reverseMessage() }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

差異：

當定義 computed 之後，其相依的 data 或是 component 中的 props(之後會提到) 改變，computed 也會隨之更新；methods 則是不管資料是否相依都會計算。

下例的 computed 中沒有相依的 data，因此在 message 被修改時，now 沒有被更新，但 methods 會重新計算更新 getNow 的值。

附上 fiddle (https://jsfiddle.net/hunterliu/hw23hrn2/2/)

<div id="app">
  <p>message：{{ message }}</p>
  <p>now (computed)：{{ now }}</p>
  <p>getNow (method)：{{ getNow() }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    now: function() {
      return Date.now();
    }
  },
  methods: {
    getNow: function() {
      return Date.now();
    }
  }
});

vm.$data.message = 'message changed';

參考資料

• Computed Properties and Watchers
• Summer: Vue.js 計算屬性 Computed
• Ralph: Vue.js 計算屬性 Computed