用vue開發(fā)也有段時間了痘系，簡直是愛死了vue這個輕量級的前端框架，代碼模塊化和數(shù)據(jù)雙向綁定讓我們很輕易能夠編寫出高效率的代碼诡挂。隨著代碼越寫越多碎浇，我們不僅要知其然，更重要的還要知其所以然璃俗。這里簡單的梳理下自己對于vue內(nèi)部運行機制的理解奴璃。參考了掘金小冊《剖析 Vue.js 內(nèi)部運行機制》(https://juejin.im/book/5a36661851882538e2259c0f)
引入vue.js，new Vue()干了什么呢？
初始化
調(diào)用Vue原型上的_init()進行初始化，會初始化vue的生命周期,props,data,methods,computed,watch饱岸，最重要的是利用Object.definedPropty()對data對象里面的屬性設(shè)置setter和getter函數(shù)调俘，也就是來實現(xiàn)響應(yīng)式和依賴收集掛載組件
調(diào)用$mount掛載組件編譯
編譯三部曲，parse（解析）治拿、optimize（標(biāo)記靜態(tài)節(jié)點做優(yōu)化）、generate（轉(zhuǎn)成字符串）
3.1 parse：利用正則將模板轉(zhuǎn)換成抽象語法樹（AST）；
3.2 optimize： 標(biāo)記靜態(tài)節(jié)點攒盈，以后update的時候，diff算法可以跳過靜態(tài)節(jié)點
3.3 generate：將抽象語法樹（AST）轉(zhuǎn)成字符串哎榴，供render去渲染DOM
經(jīng)過以上步驟型豁，就可以得到render funciton
響應(yīng)式
響應(yīng)式是vue中我認(rèn)為最核心的部分，利用Object.definedPropty設(shè)置data所返回的對象后尚蝌，在進行render function被渲染的時候迎变，會對data對象進行數(shù)據(jù)讀取，會觸發(fā)getter函數(shù)飘言，從而把data里面的屬性進行依賴收集衣形，依賴收集的目的是將這些屬性放到觀察者（Watcher）的觀察隊列中，一旦我們對data里面的屬性進行修改時姿鸿，就會觸發(fā)setter函數(shù)谆吴，setter告訴觀察者數(shù)據(jù)變化倒源，需要重新渲染視圖，觀察者調(diào)用update來更新視圖虛擬DOM
render funtion 會被轉(zhuǎn)換成虛擬DOM纪铺，虛擬DOM實際上就是一個js對象相速，從頂層DOM層層描述DOM，有tag, children, isStatic, isComment等等許多屬性來做DOM描述更新視圖
當(dāng)數(shù)據(jù)發(fā)生變化時候鲜锚，會經(jīng)歷setter=>Watcher=>update這些步驟突诬，那么最終是怎么更新視圖的呢？
在update的時候芜繁，會執(zhí)行patch旺隙，將新舊VNode傳進去，通過diff算法算出差異骏令，局部更新視圖蔬捷，做到最優(yōu)化。
最后上一張完整結(jié)構(gòu)圖
