vue 的完整實(shí)現(xiàn)流程
- 第一步：webpack打包的時(shí)候，解析Vue模板字符串成 render 函數(shù)(這個(gè)render 函數(shù)執(zhí)行后返回vnode)
-
第二步：用Object.defineProperty修改變量的getter/setter方法星爪，實(shí)現(xiàn)響應(yīng)式浆西，開始監(jiān)聽，并將 data 的屬性/methods的方法等代理到 vm 上（從
data.list代理到vm.list上顽腾，這樣render函數(shù)才能用到那個(gè)變量with(this){...list} // vm.list） - 第三步：首次渲染近零，執(zhí)行 render 函數(shù)诺核，獲得vnode，patch轉(zhuǎn)化成真實(shí)DOM久信，顯示頁面窖杀，且通過getter收集訂閱者，綁定依賴（執(zhí)行 render 函數(shù)裙士，會訪問到 vm.list vm.title入客，會被響應(yīng)式的 getter 方法監(jiān)聽到，只有被getter監(jiān)聽到的data才會在setter的時(shí)候響應(yīng)式更新[代碼實(shí)現(xiàn)十分復(fù)雜腿椎，發(fā)布訂閱者模式桌硫，待研究]）
- 第四步：data 屬性變化，被響應(yīng)式setter監(jiān)聽到（上一步的data啃炸，不被get監(jiān)聽到的铆隘，這一步不會被set監(jiān)聽到，即怎么修改都不會變化）南用，觸發(fā) updateComponent膀钠，重新執(zhí)行render函數(shù)，生成新的vnode裹虫，與舊vnode執(zhí)行diff算法對比肿嘲，重新patch更新到html頁面中
第一步：解析模板成 render 函數(shù)
render函數(shù)：
第二步：響應(yīng)式開始監(jiān)聽
第三步：首次渲染，顯示頁面筑公，且綁定依賴
第四步：data 屬性變化
