前端每日一題（10.24題目+10.23答案）

說一下 watch 與 computed 的區(qū)別是什么？以及他們的使用場景分別是什么？

區(qū)別：

1. 都是觀察數(shù)據(jù)變化的（相同）
2. 計算屬性將會混入到 vue 的實例中，所以需要監(jiān)聽自定義變量；watch 監(jiān)聽 data 、props 里面數(shù)據(jù)的變化；
3. computed 有緩存，它依賴的值變了才會重新計算，watch 沒有；
4. watch 支持異步，computed 不支持；
5. watch 是一對多（監(jiān)聽某一個值變化，執(zhí)行對應操作）；computed 是多對一（監(jiān)聽屬性依賴于其他屬性）
6. watch 監(jiān)聽函數(shù)接收兩個參數(shù)，第一個是最新值，第二個是輸入之前的值；
7. computed 屬性是函數(shù)時，都有 get 和 set 方法，默認走 get 方法，get 必須有返回值（return）

watch 的 參數(shù)：

• deep：深度監(jiān)聽
• immediate ：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行

computed 緩存原理：

conputed本質(zhì)是一個惰性的觀察者；當計算數(shù)據(jù)存在于 data 或者 props里時會被警告；

vue 初次運行會對 computed 屬性做初始化處理（initComputed），初始化的時候會對每一個 computed 屬性用 watcher 包裝起來 ，這里面會生成一個 dirty 屬性值為 true；然后執(zhí)行 defineComputed 函數(shù)來計算，計算之后會將 dirty 值變?yōu)?false，這里會根據(jù) dirty 值來判斷是否需要重新計算；如果屬性依賴的數(shù)據(jù)發(fā)生變化，computed 的 watcher 會把 dirty 變?yōu)?true，這樣就會重新計算 computed 屬性的值。