Vue.js中 computed 和 methods 的區別

官方文檔中已經有對其的解釋了，在這裏把個人理解記錄一下。

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