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}}
- 但是methods定義的方法,我們必須要加上
()
來調用,如{{methodTest()}}
,否則,視圖會出現test1
的情況,見下圖
3. computed的緩存功能
首先,我們要明白緩存究竟有什麼用?
相比大家都知道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的其它說明
- computed其實是既可以當做屬性訪問也可以當做方法訪問
- computed的由來有一個重要原因,就是防止文本插值中邏輯過重,導致不易維護