Vue中computed與method的區(qū)別官方文檔
對于官方文檔理解的還不是特別透徹枢纠，所以參考了 《淺析Vue中computed與method的區(qū)別》
進(jìn)行理解：
1.computed區(qū)別于method的兩個核心
在官方文檔中，強(qiáng)調(diào)了computed區(qū)別于method最重要的兩點(diǎn)
1.computed是屬性調(diào)用黎棠，而methods是函數(shù)調(diào)用
2.computed帶有緩存功能晋渺，而methods不是
舉個例子
<!--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)用
我可以可以發(fā)現(xiàn)葫掉，在HTML的插值里
1.computed定義的方法我們是以屬性訪問的形式調(diào)用的，{{computedTest}}
2.但是methods定義的方法跟狱，我們必須要加上()來調(diào)用俭厚，如{{methodTest()}}，否則驶臊，會出現(xiàn)以下的情況
function(){[nactive code]}
3. computed的緩存功能
首先挪挤，我們要明白緩存究竟有什么用叼丑？
相比大家都知道HTTP緩存，其核心作用就是對一些服務(wù)端未更新的資源進(jìn)行復(fù)用扛门，避免一些無謂的請求鸠信，優(yōu)化了用戶的體驗(yàn)對于computed也是一樣的：
在上面的例子中，methods定義的方法是以函數(shù)調(diào)用的形式來訪問的论寨，那么test2-1,test2-2,test2-3是反復(fù)地將methodTest方法運(yùn)行了三遍星立，如果我們碰到一個場景，需要1000個methodTest的返回值葬凳，那么毫無疑問绰垂，這勢必造成大量的浪費(fèi)
更恐怖的是，如果你更改了message的值火焰，那么這1000個methodTest方法每一個又會重新計算劲装。。昌简。占业。
所以，官方文檔才反復(fù)強(qiáng)調(diào)對于任何復(fù)雜邏輯纯赎，你都應(yīng)當(dāng)使用計算屬性
computed依賴于data中的數(shù)據(jù)谦疾，只有在它的相關(guān)依賴數(shù)據(jù)發(fā)生改變時才會重新求值
如上例，在Vue實(shí)例化的時候址否，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其實(shí)是既可以當(dāng)做屬性訪問也可以當(dāng)做方法訪問
- computed的由來有一個重要原因必指，就是防止文本插值中邏輯過重囊咏，導(dǎo)致不易維護(hù)
