iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
2

https://ithelp.ithome.com.tw/upload/images/20171216/20107107zwk2i3ciYr.png

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

  • 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';

參考資料


上一篇
用範例理解 Vue.js #5:Template Syntax
下一篇
用範例理解 Vue.js #7:Filters vs Computed
系列文
用範例理解 Vue.js30

尚未有邦友留言

立即登入留言