本篇文章給大家介紹一下Vue中computed與method的區(qū)別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

1.computed區(qū)別于method的兩個核心

在官方文檔中，強調(diào)了computed區(qū)別于method最重要的兩點

• computed是屬性調(diào)用，而methods是函數(shù)調(diào)用

• computed帶有緩存功能，而methods不是

OK，下面我們看一個具體的例子

<!--HTML部分--> <div id="app">     <h1>{{message}}</h1>     <p class="test1">{{methodTest}}</p>     <p class="test2-1">{{methodTest()}}</p>     <p class="test2-2">{{methodTest()}}</p>     <p class="test2-3">{{methodTest()}}</p>     <p class="test3-1">{{computedTest}}</p>     <p class="test3-2">{{computedTest}}</p> </div> <!--script部分--> let vm = new Vue({     el: '#app',     data: {         message: '我是消息，'     },     methods: {         methodTest() {             return this.message + '現(xiàn)在我用的是methods'         }     },     computed: {         computedTest() {             return this.message + '現(xiàn)在我用的是computed'         }     } })

2. computed的屬性調(diào)用

細心的朋友可能已經(jīng)發(fā)現(xiàn)了，在HTML的插值里

• computed定義的方法我們是以屬性訪問的形式調(diào)用的，{{computedTest}}

• 但是methods定義的方法，我們必須要加上()來調(diào)用，如{{methodTest()}}，否則，視圖會出現(xiàn)test1的情況，見下圖

3. computed的緩存功能

首先，我們要明白緩存究竟有什么用？

相比大家都知道HTTP緩存，其核心作用就是對一些服務端未更新的資源進行復用，避免一些無謂的請求，優(yōu)化了用戶的體驗

對于computed也是一樣的：

在上面的例子中，methods定義的方法是以函數(shù)調(diào)用的形式來訪問的，那么test2-1,test2-2,test2-3是反復地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的返回值，那么毫無疑問，這勢必造成大量的浪費

更恐怖的是，如果你更改了message的值，那么這1000個methodTest方法每一個又會重新計算。。。。

所以，官方文檔才反復強調(diào)對于任何復雜邏輯，你都應當使用計算屬性

computed依賴于data中的數(shù)據(jù)，只有在它的相關依賴數(shù)據(jù)發(fā)生改變時才會重新求值

如上例，在Vue實例化的時候，computed定義computedTest方法會做一次計算，返回一個值，在隨后的代碼編寫中，只要computedTest方法依賴的message數(shù)據(jù)不發(fā)生改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計算的結(jié)果。

這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那么毫無疑問，這相對于methods而言，將大大地節(jié)約內(nèi)存

哪怕你改變了message的值，computedTest也只會計算一次而已

4. computed的其它說明

• computed其實是既可以當做屬性訪問也可以當做方法訪問

• computed的由來有一個重要原因，就是防止文本插值中邏輯過重，導致不易維護