當資料改變時,VUE是如何實現DOM更新的?

tangchaoren發表於2018-12-07

當資料改變時,VUE是如何實現DOM更新的?
這是我自己寫的一個demo,message是響應式的,當其改變的時候就會觸發DOM更新,我通過一個點選事件來模擬資料改變,然後探究一下,我們的DOM是如何更新的?

dep.notify

我們的data物件已經通過Object.defineProperty實現了setter, 那麼當我們的message改變的時候,程式碼會立刻執行到這裡

當資料改變時,VUE是如何實現DOM更新的?
那麼就會到Dep例項的notify方法,然後在這個方法中會迴圈一個subs的陣列,這個陣列是例項的一個屬性,陣列裡存的是我們的Watcher,所謂Watcher就是data 物件的屬性在被訪問的時候,會給每一個屬性維護一個Watcher例項。 從陣列中遍歷然後執行單個Watcher的update方法。然後在update方法中執行queueWatcher。這個函式中會維護一個非同步更新佇列。然後去執行nextTick(flushSchedulerQueue)方法,
當資料改變時,VUE是如何實現DOM更新的?
flushSchedulerQueue方法中又會去執行Watcher的run方法。

當資料改變時,VUE是如何實現DOM更新的?
然後在run方法中執行watcher的get方法。這個get方法很重要。

當資料改變時,VUE是如何實現DOM更新的?
裡面記錄了一個非常重要的引數getter, 這個引數實際上就是vm.update(vm.render()), 然後執行getter。

update

在執行getter的過程,也就是vue的 render、 update的過程,也是生成vnode,轉化為真實DOM的過程。update執行完了以後,我們的DOM也就更新了。

最後

這個過程是自己在通過瀏覽器打斷點的方式一步一步的除錯出來的,雖然之前也看過網上很多關於vue的原始碼解析,但大多都是隔靴搔癢,並沒有對自己形成一個深刻的理解。所以,我想通過這種方式來加深自己對vue的一種理解。各位路過的大神們請多多指點!

相關文章