vue工作原理分析


 

 

初始化

在 new Vue() 時會調⽤用_init()進⾏行行初始化,會初始化各種實例例⽅方法、全局⽅方法、執⾏行行⼀一些⽣生命周期、

初始化props、 data等狀態。其中最重要的是data的「響應化」處理理。

初始化之后調⽤用 $mount 掛載組件,主要執⾏行行編譯和⾸首次更更新

編譯

編譯模塊分為三個階段

1. parse:使⽤用正則解析template中的vue的指令(v-xxx) 變量量等等 形成抽象語法樹AST

2. optimize:標記⼀一些靜態節點,⽤用作后⾯面的性能優化,在diff的時候直接略略過

3. generate:把第⼀一部⽣生成的AST 轉化為渲染函數 render function

虛擬dom

Virtual DOM 是react⾸首創, Vue2開始⽀支持,就是⽤用 JavaScript 對象來描述dom結構,數據修改的時

候,我們先修改虛擬dom中的數據,然后數組做diff,最后再匯總所有的diff,⼒力力求做最少的dom操作,

畢竟js⾥里里對⽐比很快,⽽而真實的dom操作太慢

 

 

Vue的工作原理思路分析:

1、 首先使用Object. defineProperty()的原理來實現劫持監聽所有屬性

2、 每次在頁面中使用一個屬性就會產生一個watcher

3、 而watcher是通過dep來管理的,相同的屬性的實例在一個dep中統一管理

4、 當其中一個屬性變化的時候會通知dep變化,再通知dep中管理的對應的watcher進行變化


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM