[toc] 1.這兩個內部都是基于watcher的 2.區別在于computed數據可以用于頁面渲染，watch不行 3.computed只有在取值時才會執行對應的回調，watch會默認執行一次，為了拿到老的值 4.computed用了一個dirty屬性，實現了緩存機制，多次取值，如果依賴的值不發生變化，不會更改dirty的結果，拿到的就是老的值 ### computed-watcher watch在computed使用的時候會添加一個計算watchr 在渲染過程中會添加渲染watchr 在用戶寫的監聽的過程中會寫一個用戶watchr 1. 在initState過程中，會判斷options中是否傳入了computed和watch 2.如果有computed屬性，就會觸發initComputed方法，生成一個computed watch，這個watch傳入了一個lazy屬性用于判斷類型，并賦值到dirty屬性為true 3.initComputed中還會觸發createComputedGetter方法 ```js function createComputedGetter (key) { return function computedGetter () { // 計算 watcher var watcher = this._computedWatchers && this._computedWatchers[key]; if (watcher) { if (watcher.dirty) { // 如果dirty屬性為true的時候， watcher.evaluate(); } if (Dep.target) { watcher.depend(); } return watcher.value // 如果dirty為false，就會直接獲取watcher.value } } } ``` 4.獲取computed值得時候，會看dirty屬性是否為true，如果為true，就會觸發watcher的get方法，獲取對應的返回值，并且將dirty改為false， 5.后續如果watcher沒有觸發update，那么dirty就不會改為true，如果為false，直接返回watcher.value，不會觸發get方法當這樣就實現了數據緩存 ``` Watcher.prototype.evaluate = function evaluate () { this.value = this.get(); this.dirty = false; }; ``` + immediate: watch設置了這個屬性后，會將實例化得到的值傳入回調，并且立即執行一次回調函數 + deep：深度監聽，會遞歸監聽watch的對象