Vue.js中 computed 和 methods 的區別

OceanZH發表於2019-02-16
Vue.js

官方文件中已經有對其的解釋了，在這裡把我的理解記錄一下。

computed 的使用場景

  • HTML模板中的複雜邏輯表示式，為了防止邏輯過重導致不易維護，都應當把相關邏輯放入計算屬性。

    • 比如這種

          <div id="root">
        <p>Reversed message: "{{ message.split(``).reverse().join(``) }}"</p>
    </div>

在這個地方，模板不再是簡單的宣告式邏輯。這裡是想要顯示變數 message 的翻轉字串，而這種包含複雜邏輯處理的表示式，都應當使用計算屬性。

computed 和 methods 的區別

1. computed是屬性呼叫，而methods是函式呼叫

這意味著在HTML的插值裡

  • computed定義的方法是以屬性訪問的形式來呼叫，如 {{reversedMessageComputed}}
  • methods定義的方法，則要加上 () 來呼叫，如 {{reversedNameMethod()}} ，否則檢視中會渲染出如下內容
  • function () { [native code] }

2. computed帶有快取功能，而methods不是

這裡我引用一下官方文件的說明

計算屬性是基於它們的依賴進行快取的。只在相關依賴發生改變時它們才會重新求值。

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>
// javascript
var vm = new Vue({
    el: `#root`,
        data: {
        name: `Alex`,
        message: `Hello`
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split(``).reverse().join(``)
      }
    },
    computed: {
        // 計算屬性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 例項
        return this.message.split(``).reverse().join(``)
        }
    }
})

上面的例子中，快取意味著只要 message 還沒有發生改變，多次訪問 reversedMessageComputed 計算屬性會立即返回之前的計算結果，而不必再次執行函式。而 reversedNameMethod() 方法，每次呼叫都會重新執行函式。

但同時需要注意，這也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：

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

now 的值將在Vue例項化時生成，並且不再改變。
相比之下，每當觸發重新渲染時，呼叫方法將總會再次執行函式。

computed其他說明

  • computed 和 methods 不可以重名

    • Vue會把 methods 和 data 裡的東西，全部代理到Vue生成的物件中，這會將computed中重名屬性覆蓋

相關文章