當數據改變時，VUE是如何實現DOM更新的？

這是我本身寫的一個demo，message是響應式的，當其改變的時候就會觸發DOM更新，我經過一個點擊事件來模擬數據改變，而後探究一下，咱們的DOM是如何更新的？

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的一種理解。各位路過的大神們請多多指點！