组件的渲染和更新,我的理解

来源: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

同学你好,理解是没问题的,从virtualDom转变为真实Dom这个过程同学可以看看-->这篇文章,总结的很详细。

如面试时,同学能把这些都回答上来老师主观认为是没问题的。

祝学习愉快!

0

0 学习 · 15276 问题

查看课程