组件的渲染和更新,我的理解
来源:3-18 vue组件是如何渲染和更新的
激情的樱木花道
2022-08-24 14:17:56
初次渲染过程:
第一步:解析模板
在开发环境中,通过vue-loader对模板完成了编译,生成了render函数,
第二步:触发响应式,监听data属性getter、setter
在这时已经触发了响应式,通过getter拿到数据,在触发getter的时候并完成依赖的收集(收集哪个数据是模板中在用的,并对相应的数据进行观察)。
第三步:执行render函数,生成vnode ,patch(elem,vnode),vnode转换为真实DOM挂载到页面相应位置,至于如何转换为真实DOM,不清楚,老师能讲下吗?还是这里大概知道就可以了。
更新过程:
修改data,触发setter
重新执行render函数,生成newVnode
patch(vnode,newVnode)
setter的触发会被监听到,然后发布消息给dep(依赖收集器,存放所有用到该数据的观察者),dep会通知每一个观察者,重新触发render函数,生成newVnode,再进行patch(vnode,newVnode),新旧虚拟DOM做对比(diff),计算出最小的更新范围,重新渲染视图。
1回答
好帮手慕小李
2022-08-24
相似问题
回答 1