Vue的完整实现流程

vue 的完整实现流程

• 第一步：webpack打包的时候，解析Vue模板字符串成 render 函数(这个render 函数执行后返回vnode)
• 第二步：用Object.defineProperty修改变量的getter/setter方法，实现响应式，开始监听，并将 data 的属性/methods的方法等代理到 vm 上（从data.list代理到vm.list上，这样render函数才能用到那个变量with(this){...list} // vm.list）
• 第三步：首次渲染，执行 render 函数，获得vnode，patch转化成真实DOM，显示页面，且通过getter收集订阅者，绑定依赖（执行 render 函数，会访问到 vm.list vm.title，会被响应式的 getter 方法监听到，只有被getter监听到的data才会在setter的时候响应式更新[代码实现十分复杂，发布订阅者模式，待研究]）
• 第四步：data 属性变化，被响应式setter监听到（上一步的data，不被get监听到的，这一步不会被set监听到，即怎么修改都不会变化），触发 updateComponent，重新执行render函数，生成新的vnode，与旧vnode执行diff算法对比，重新patch更新到html页面中

第一步：解析模板成 render 函数

render函数：

第二步：响应式开始监听

第三步：首次渲染，显示页面，且绑定依赖

第四步：data 属性变化