vue實現流程有以下4個步驟
- 解析模板(本質是字符串)成render函數
- 響應式開始監聽
- 首次顯然,顯示頁面,綁定依賴
- data屬性變化,觸發rerender
1. 解析模板成render函數
模板如下:
解析成render函數(源碼中使用code.render)
格式化後如下:
this
爲vue
實例,_c
爲實例的函數,對應createElement
,返回VNode
收縮後如下:
模板中的所有信息被
render
函數包含,模板中用到的data
中的屬性,都變成了JS
變量,模板中的v-model v-for v-on
都變成了JS
邏輯,render
函數返回VNode
.
2. 響應式開始監聽
使用Object.defineProperty
將data的屬性代理到vm上。
3.首次渲染,顯示頁面,綁定依賴
1.初次渲染,執行
updateComponent
,執行vm._render()
,執行render
函數,會訪問到vm.list vm.title
,會被響應式的get方法監聽到。
2. 執行updateComponent
,執行vdom
的patch
方法,將VNode
渲染成DOM
,初次渲染完成。
監聽
get
的原因,是爲了避免不必要的重複渲染,data中只有觸發get的纔會被使用到。
4. data屬性變化,觸發rerender
修改屬性,被響應式的
set
監聽到,set
中執行updateComponent
,重新執行vm._render
,生成VNode
和prevVNode
,通過patch
進行對比,渲染到html
中