vue实现的整体流程
vue实现分为4大步骤
第一步:解析模板成render函数
with的用法,在javascrip精粹这本书中作者提出在开发中还是最好不要使用with,除非你对它存在的问题非常之了解,当前vue中使用了不会影响开发者使用
模板中的所有信息都被render函数包含
模板中用到的data中的属性,都变成了js变量
模板中的v-model v-for v-on都变成了js逻辑
render函数返回vnode
第二步:响应式开始监听
Object.definePropery
通过Object.defineProperty来给对象设计上get和set函数当设计和获取都可以监听到了
将data的属性代理到vm上
第三步:首次渲染,显示页面,且绑定依赖
初次渲染,执行updateComponent,执行vm.render()
执行render函数,会访问到vm实例的数据
会被响应式的get方法监听到
执行updateComponent,会走到vdom的patch方法
patch将vnode渲染成dom,初次渲染完成
patch函数,初始时把vnode直接添加到dom选择器里,
如果oldVnode有值,然后对比oldVnode和newVnode把更新变化的修改
第四步:data属性变化 ,触发render函数
修改属性,被响应式的set监听到
set中执行updateComponent
updateComponent重新执行vm._render()
生成的vnode和prevVnode,通过patch进行对比
渲染到html中
版权声明:本文由Web学习之路发布,如需转载请注明出处。