Vue.js中computed和methods之間有什麼區別？ （附範例）

本篇文章帶給大家的內容是關於Vue.js中computed和methods之間有什麼差別？ （附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

computed 的使用場景

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

例如這種

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

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

computed 和methods 的區別

1. computed是屬性調用，而methods是函數調用

這意味著在HTML的插值裡

computed定義的方法是以屬性存取的形式來調用，如{{reversedMessageComputed}}

methods定義的方法，則要加上() 來調用，如{{reversedNameMethod() }} ，否則視圖中會渲染出如下內容

function () { [native code] }

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

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

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

e84a645d77f16f01a552f36f010f7960
f5b3ebc4cb932b9ccb69ea74d4ca8dd7
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedNameMethod() }}"94b3e26ee717c64999d7867364b1b4a3
    e388a4556c0f65e1904146cc1a846beeReversed message: "{{ reversedMessageComputed }}"94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

// 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中重名屬性覆蓋

以上是Vue.js中computed和methods之間有什麼區別？ （附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！