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)更新檢視
參考：
vue渲染頁面的流程 vue原始碼實現的整體流程解析
一 前言 最近一直在使用vue做專案，閒暇之餘查閱了一些關於vue實現原理的資料，一方面對所了解到的知識做個總結，另外一方面希望能對看到此文章的同學有所幫助。本文如有不足之處，還請過往的大佬批評指正。二 vue實現原理概述 vue作為乙個前端漸進式的mvvm開發庫，將廣大的前端勞苦大眾從dom操作中...
vue 渲染流程
1 dom 節點樹 高效的更新所有這些節點會是比較困難的，因為原生的dom節點屬性很多，渲染效能差。2 虛擬 dom 虛擬 dom 是我們對由 vue 元件樹建立起來的整個 vnode 樹的稱呼。vue 的模板實際是編譯成了render 函式。3 渲染流程 說明 1 模板template主要通過cr...
二 Vue 頁面渲染過程
上篇博文我們依葫蘆畫瓢已經將hello world 展現在介面上啦，但是是不是感覺新虛虛的，總覺得這麼多檔案，專案怎麼就啟動起來了呢？怎麼訪問到8080 埠就能進入到我們的首頁呢。整個的流程是怎麼樣的呢？我也是剛剛接觸，所以就會有這樣的困惑，所以這篇就簡單的理解一下專案頁面渲染的過程。我們上篇文章說...