Vue.js中computed和methods之間的區別是什么

這篇文章主要介紹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中重名屬性覆蓋

以上是Vue.js中computed和methods之間的區別是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！