computed watch 區(qū)別
computed
computed 是計算屬性，它會根據(jù)你所依賴的數(shù)據(jù)動態(tài)顯示新的計算結(jié)果
在vue實例初始化已近開始計算
計算屬性將被加入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例
通過計算出來的屬性不需要調(diào)用直接可以在 DOM 里使用
如果不使用計算屬性，那么代碼函數(shù)在dom里
會對頁面的可維護性造成很大的影響
而且計算屬性如果依賴不變的話颤枪，它就會變成緩存陌僵，computed 的值就不會重新計算
所以沟涨，如果數(shù)據(jù)要通過復雜邏輯來得出結(jié)果葵萎，那么就推薦使用計算屬性
watch
一個對象胶征，鍵是 data 對應的數(shù)據(jù)塞椎，值是對應的回調(diào)函數(shù)。值也可以是方法名睛低，或者包含選項的對象案狠，當 data 的數(shù)據(jù)發(fā)生變化時，就會發(fā)生一個回調(diào)钱雷，他有兩個參數(shù)骂铁，一個 val （修改后的 data 數(shù)據(jù)），一個 oldVal（原來的 data 數(shù)據(jù)）
Vue 實例將會在實例化時調(diào)用$watch()罩抗，遍歷 watch 對象的每一個屬性
注意：不應該使用箭頭函數(shù)來定義 watcher 函數(shù)拉庵，因為箭頭函數(shù)沒有 this，它的 this 會繼承它的父級函數(shù)套蒂，但是它的父級函數(shù)是 window钞支，導致箭頭函數(shù)的 this 指向 window，而不是 Vue 實例
優(yōu)化 局部變量
computed: {
res({ start, end, arr}) {
let result = start
for (let i = 0; i < 1000; i++) {
result += 2
...
}
return res
},
},
而優(yōu)化后的組件會在計算前先用局部變量 start, end, arr操刀，緩存起來烁挟，后面直接訪問。
優(yōu)化前后的組件的計算屬性 result 的實現(xiàn)差異骨坑，優(yōu)化前的組件多次在計算過程中訪問this.{ start, end, arr}
為什么 局部變量好一點撼嗓，原因是你每次訪問 this.base 的時候，由于 this.{ start, end, arr}是一個響應式對象欢唾，所以會觸發(fā)它的 getter且警，進而會執(zhí)行依賴收集相關邏輯代碼。類似的邏輯執(zhí)行多了匈辱，像示例這樣振湾，幾百次循環(huán)更新幾百個組件，每個組件觸發(fā) computed 重新計算亡脸，然后又多次執(zhí)行依賴收集相關邏輯押搪，性能自然就下降了。
是一個非常實用的性能優(yōu)化技巧浅碾。因為很多人在開發(fā) Vue.js 項目的時候大州，每當取變量的時候就習慣性直接寫 this.xxx 了.在訪問次數(shù)不多的時候，性能問題并沒有凸顯垂谢，但是一旦訪問次數(shù)變多厦画，比如在一個大循環(huán)中多次訪問，類似示例這種場景，就會產(chǎn)生性能問題了根暑。
