dep.notify
我們的data物件已經通過Object.defineProperty實現了setter, 那麼當我們的message改變的時候,程式碼會立刻執行到這裡
那麼就會到Dep例項的notify方法,然後在這個方法中會迴圈一個subs的陣列,這個陣列是例項的一個屬性,陣列裡存的是我們的Watcher,所謂Watcher就是data 物件的屬性在被訪問的時候,會給每一個屬性維護一個Watcher例項。 從陣列中遍歷然後執行單個Watcher的update方法。然後在update方法中執行queueWatcher。這個函式中會維護一個非同步更新佇列。然後去執行nextTick(flushSchedulerQueue)方法, flushSchedulerQueue方法中又會去執行Watcher的run方法。 然後在run方法中執行watcher的get方法。這個get方法很重要。 裡面記錄了一個非常重要的引數getter, 這個引數實際上就是vm.update(vm.render()), 然後執行getter。update
在執行getter的過程,也就是vue的 render、 update的過程,也是生成vnode,轉化為真實DOM的過程。update執行完了以後,我們的DOM也就更新了。
最後
這個過程是自己在通過瀏覽器打斷點的方式一步一步的除錯出來的,雖然之前也看過網上很多關於vue的原始碼解析,但大多都是隔靴搔癢,並沒有對自己形成一個深刻的理解。所以,我想通過這種方式來加深自己對vue的一種理解。各位路過的大神們請多多指點!