vue的实现流程

三要素: 双向绑定、模板解析、渲染

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

with的引用
模板中所有的信息都要被render函数包含
模板中用到的data属性都变成js变量
v-modle、v-for……变成js
返回vnode

第二步: 响应式开始监听

通过object.defineProperty监听到data中属性的get和set方法
将data中的属性代理带vm上

第三步: 首次渲染,显示页面,绑定依赖

首次渲染使用uodateComponent()函数
vm.patch($el, vnode)
patch将vnode转换成dom,完成首次渲染

第四步:data变化,触发rerender

命中set的监听
set 中执行updateComponent
uodate重新执行render()
vdom和preVdom比较
渲染到dom中

发布了149 篇原创文章 · 获赞 166 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/weixin_44369568/article/details/103453237