相信小伙伴們平時(shí)開發(fā)應(yīng)該都會用到watch 和 computed榄笙， 具體是什么區(qū)別?
官方解釋：計(jì)算屬性
- 模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的嫩挤。在模板中放入太多的邏輯會讓模板過重且難以維護(hù)夸政。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在這個(gè)地方，模板不再是簡單的聲明式邏輯赃绊。你必須看一段時(shí)間才能意識到既峡。
這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多包含此處的翻轉(zhuǎn)字符串時(shí)碧查，就會更加難以處理运敢。
所以，對于任何復(fù)雜邏輯忠售，你都應(yīng)當(dāng)使用計(jì)算屬性传惠。
計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的
- 這句話中我們可以看到，計(jì)算屬性是支持緩存的稻扬，如果你依賴的那個(gè)值沒有變化的時(shí)候卦方，會讀取上一次緩存的計(jì)算結(jié)果。
計(jì)算屬性和偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動：偵聽屬性泰佳。
當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時(shí)盼砍，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。
然而逝她，通常更好的做法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)浇坐。
偵聽屬性： watch
雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器黔宛。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法近刘，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的跌宛。
總結(jié)
- 監(jiān)聽屬性watch
- 不支持緩存酗宋，數(shù)據(jù)變，會直接觸發(fā)相應(yīng)的操作疆拘；
- watch支持異步蜕猫；
- 監(jiān)聽數(shù)據(jù)必須在實(shí)例中存在的。
- 計(jì)算屬性computed
- 支持緩存哎迄，只有依賴數(shù)據(jù)發(fā)生改變回右，才會重新進(jìn)行計(jì)算
- 不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效漱挚，無法監(jiān)聽數(shù)據(jù)的變化
- 當(dāng)讀取computed屬性值時(shí)會默認(rèn)走緩存（依賴數(shù)據(jù)不變化不會重新計(jì)算）翔烁，計(jì)算屬性是基于他們的相應(yīng)依賴進(jìn)行緩存的
當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或者開銷較大的操作時(shí)，watch是最有用的旨涝。這是和computed最大的區(qū)別蹬屹。
