关于 vue 虚拟dom 的渲染机制的一些思考

发布时间 2023-10-31 17:58:38作者: veegeer

1. 虚拟dom 的渲染过程

2. vue3中 nexttick 的作用

 

1.虚拟dom 的渲染机制

我们在template中写的 div 和 其他的标签。不会被vue 当作是最终 渲染的dom, vue会将我们写入的标签 转化为 对象,通过diff算法,将其构造成一个虚拟树

每个树 都有一个 对应的key,这个key 作为不同阶段的标识,什么意思呢,就是 当树发生改变时,这个id会变,也作为vue 构造新树 以及与旧树比对的 标识

说到渲染 ,vue触发渲染有两种形式:第一种,当 template 里面的 输入数据 (由外部用户输入数据)数据发生改变时 ,第二种,vue 中 data 中 的属性值发生改变时,这两种情况都会触发 vue 渲染机制

渲染 过程: 上述说到了渲染的情形 ,下面说一下渲染 的节点 和渲染的过程

假设:data 中有一个属性叫做  change,如其名 ,这个属性的属性值 经常会发生改变 ,如果属性值 每改变一次 就渲染一次 ,那么是很耗性能的,vue 中做了一个最优处理方式 ,就是将改变的 数值 (任务),放到一个队列任务中,这个队列就好比一个排班人员

告诉我们的vue渲染 按照 “先进先出”的规则,依次处理渲染  队列中 待执行的任务。

听到这里,不免发问,这个任务队列一旦 给到 vue ,后面或中间 突然加任务还可以继续添加吗。其实 是不可以的。这就意味着这个任务 无法及时渲染到视图上,这就是批量执行,想执行 新的,就需要等到下一个事件循环(下一个任务队列)

要等到下一个任务队列 ,很明显 。在响应式环境下 ,做到 视图 和数据 同步渲染是不理想的,有没有 什么 补救的办法呢?看下 nextick

 

2. vue3中 nexttick 的作用:

这就是上述的补救办法 ,当 我们将批量执行任务 移交给 vue 去 执行(渲染) 时,在此之前 是否 能检查一下 是否有新加入的任务 ,如果有 就 给他响应的处理函数,相当于上车前临时补个票

nexttick 相当于 列车上的乘务员 ,在列车即将发车之际(当队列中待执行的任务移交给vue处理的时候),给 还未上车的旅客补个票帮助他们上车(帮助 突然加入的待执行任务  加入到  当前即将要执行队列中)