vue的整個實現流程

vue實現流程有以下4個步驟

  • 解析模板(本質是字符串)成render函數
  • 響應式開始監聽
  • 首次顯然,顯示頁面,綁定依賴
  • data屬性變化,觸發rerender

1. 解析模板成render函數

模板如下:

在這裏插入圖片描述
解析成render函數(源碼中使用code.render)

格式化後如下:thisvue實例,_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,執行vdompatch方法,將VNode渲染成DOM,初次渲染完成。

監聽get的原因,是爲了避免不必要的重複渲染,data中只有觸發get的纔會被使用到。

4. data屬性變化,觸發rerender

修改屬性,被響應式的set監聽到,set中執行updateComponent,重新執行vm._render,生成VNodeprevVNode,通過patch進行對比,渲染到html

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章