天天看點

源碼解析——VUE

Vue 源碼解析

vue使用Object.defineProperty+觀察者模式對資料和模闆進行綁定,對于資料來說需要進行更新時,即會觸發對應的getter和setter函數,在setter函數中,即可根據對應收集到的依賴,觸發對應視圖層更新。

對于一次收集和一次更新來說,大緻流程如下:      
源碼解析——VUE
源碼解析——VUE
源碼解析——VUE

當然對于子產品的編譯來說,有運作時編譯、靜态編譯多種形式,同時對于vue來說,vue@2使用了VNode來對子產品内容進行了描述,是以在子產品編譯的流程中,使用VNode能更好的提升編譯和更新的性能。

源碼解析——VUE

對于通用性的了解來說,vue@2和vue@1并沒有太多差別,更多的核心在于VNode部分,也就是把編譯子產品的部分使用了VNode進行描述,編譯為了函數形式,以及增加了patch的過程來保證更新。

節點VNode/patch更新流程:

patch->patchVNode->updataChildren

源碼解析——VUE

繼續閱讀