【Vue.js學習筆記】computed vs. methods

computed 計算屬性

在模板中放太多邏輯運算會讓模板難以維護,因此可以使用計算屬性。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

基礎例子

<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('')
    }
  }
})

結果:

Original message: “Hello”
Computed reversed message: “olleH”

上述程式碼,當message的值改變,reversedMessage()就會重新執行一次。

看到這裡你可能會有疑問,那我用 methods 不行嗎?

也可以,你可以使用 methods 達到同樣的效果。

methods 方法

將 computed 改為methods 也可以達到同樣的效果:

<p>Reversed message: "{{ reversedMessage() }}"</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
  }
})

但是methods與computed差別在於:

  computed是基於響應式依賴進行緩存,只有當值改變時才會再次計算。所以當message值沒有改變,多次使用 reversedMessage 計算屬性返回的結果還是相同。

  methods則是只要綁定的物件重新渲染,它就會再次計算。即使function內相依的值沒有改變也一樣。

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

舉例

<div id="app">
        <button @click="counterComputed++">computed button</button>
        <p>{{ counterComputed }}</p> <br/>
        <button @click="counterMethod++">method button</button>
        <p>{{ counterMethod }}</p> <br/> {{ printTextMethod() }} {{ printTextComputed }}
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: function() {
                return {
                    counterComputed: 0,
                    counterMethod: 0
                };
            },
            computed: {
                printTextComputed: function() {
                    console.log('Counter printed from computed:',
                        this.counterComputed);
                }
            },
            methods: {
                printTextMethod: function() {
                    console.log('counter printed from method: ', this.counterMethod);
                }
            },
        });
    </script>

結果

當單擊computed button時,函數printTextComputed()和printTextMethod()都在運行;但是當單擊methods button時,僅函數printTextMethod()將在運行。

因為 methods 不知道函數中使用的值是否更改,因此需要每次運行以進行檢查。
computed 知道函數中使用的值是否已更改,因此它們不必每次都運行一次即可檢查!

總結

methods

觸發:函式執行時觸發,比如按鈕觸發方法。

computed

觸發:當值產生變化時,頁面中內{{message}}插值處也會發生變化,即觸發該函式。


參考vue.js官方文檔

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論