Vue中DOM渲染的過程

vue中dom渲染過程
1、響應式
監聽data屬性的getter setter
2、模板編譯
模板到render函數再到vnode。模板不是html，有指令、插值、js表達式，能夠實現循環、判斷。html是標簽語言，只有js才能實現循環判斷。因此，模板一定要轉化成js，即編譯模板。模板編譯為render函數、執行render函數返回的vnode
3、收集依賴
在模板中使用那個變量就把那個變量觀察起來（watch），這部分主要實現了從vdom轉化為真實DOM、vnode新舊節點的對比操作。

數據更改觸發的渲染過程
1、初次渲染過程
1）解析模板為render函數
2）觸發響應式，監聽data屬性的getter、setter
3）執行render函數，生成vnode、patch（elem.vnode）
2、更新過程
1）修改data，觸發setter
2）重新執行render函數，生成newVnode
3）patch(vnode,newVnode)更新視圖

參考：https://www.jianshu.com/p/9e5b89161add