本篇文章跟大家介紹Vue中computed與method的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
1.computed區別於method的兩個核心
在官方文件中，強調了computed區別於method最重要的兩點
computed是屬性調用，而methods是函數調用
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 + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})2. computed的屬性呼叫
細心的朋友可能已經發現了，在HTML的插值裡
computed定義的方法我們是以屬性存取的形式呼叫的，{{computedTest}}
首先，我們要明白快取究竟有什麼用？
相比大家都知道HTTP緩存，其核心作用就是對一些服務端未更新的資源進行復用，避免一些無謂的請求，優化了用戶的體驗
對於computed也是一樣的：
在上面的例子中，methods定義的方法是以函數呼叫的形式來存取的，那麼test2-1,test2-2,test2-3是反覆地將methodTest方法運行了三遍，如果我們碰到一個場景，需要1000個methodTest的回傳值，那麼毫無疑問，這勢必造成大量的浪費
更恐怖的是，如果你更改了message的值，那麼這1000個methodTest方法每一個又會重新計算。 。 。 。
所以，官方文件才反覆強調對於任何複雜邏輯，你都應當使用計算屬性
computed依賴data中的數據，只有在它的相關依賴數據發生改變時才會重新求值如上例，在Vue實例化的時候，computed定義computedTest方法會做一次計算，傳回一個值，在隨後的程式碼編寫中，只要computedTest方法依賴的message資料不會改變，computedTest方法是不會重新計算的，也就是說test3-1,test3-2是直接拿到了回傳值，而非是computedTest方法重新計算的結果。
這樣的好處也是顯而易見的，同樣的，如果我們碰到一個場景，需要1000個computedTest的返回值，那麼毫無疑問，這相對於methods而言，將大大節約內存
就算你改變了message的值，computedTest也只會計算一次而已
4. computed的其它說明
程式設計入門2020年前端vue面試題大匯總（附答案）vue教程推薦：2020最新的5個vue.js影片教學精選更多程式相關知識，請造訪：
以上是Vue中computed和method之間有什麼不同點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
