渲染过程

85 阅读1分钟

vue渲染的三大核心: 1)响应式 监听数据变化 get set 2)模板编译 生成render函数 执行render函数返回vnode 3)vdom根据vnode渲染真实DOM 或更新真实DOM 走patch和diff

vue初次渲染过程 第一步:解析模板为render函数 第二步:触发响应式,监听data中的属性,getter和setter 第三步:执行render函数,生成vnode, 进而进行patch(elem,vnode) A)这一步会触发data getter,在getter中进行依赖收集(把数据“观察”起来)。 注意:不一定是所有的数据都会被观察。是否被观察取决于模板中是否使用。 第四步:把vnode转化成真实DOM,渲染到页面上。

数据更新过程 第一步:修改数据,会触发data setter 第二步:重新执行render函数,生成新的vnode(newVnode) 第三步:进行patch(vnode,newVnode),patch的过程就是diff的过程

对于上面的流程,vue官方有一人图,如下: v2.cn.vuejs.org/v2/guide/re…

异步渲染: 进行patch(vnode,newVnode),patch的过程就是diff的过程。找到差异,更新差异,这个渲染是 异步。为什么是异步的? 因为汇总data的数据变化,一次性渲染,尽量少的减少渲染次数,提高性能。

三大核心。

响应式:监听data的属性 getter setter 数组的7大方法 模板编译:编译成render函数,再到vnode vdom: patch(elem,vnode) patch(vnode,newVnode)