Vue原理「十四」-- 组件渲染过程***

最新推荐文章于 2024-07-04 10:01:18 发布

原创最新推荐文章于 2024-07-04 10:01:18 发布 · 756 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了Vue.js的渲染过程，包括初次渲染和更新过程。在初次渲染时，Vue解析模板，监听data属性，执行render函数生成虚拟DOM。更新过程中，数据变更触发setter，重新渲染并使用diff算法更新DOM。Vue采用异步更新队列，确保多次数据变更只渲染一次，通过$nextTick可在DOM更新后执行回调。

1.初次渲染过程

解析模板为render函数（或在开发环境中已完成，vue-loader）
触发响应式，监听data属性的getter setter（render函数需要通过getter先获取模板使用的数据）
执行render函数，生成vnode, patch(elem,vnode)

2.更新过程

修改data，触发setter(此前getter中已被监听)
重新执行render函数，生成newVnode
patch(vnode,newVnode)，patch的diff算法会算出最小差异并更新到DOM上。

完整流程图

执行 render函数时会 Touch(触发) getter; 生成依赖，并watcher（观察）起来，
修改data时，触发setter,通知 watcher重新触发render函数，重新渲染。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

3.异步渲染

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

更新 DOM 时是异步执行的,DOM不会立刻渲染，获取不到最新的DOM节点

add() {
this.list.push(Date.now());
this.list.push(Date.now());
this.list.push(Date.now());

const ulElem = this.$refs.ul1; //获取ul的DOM节点
console.log(ulElem.childNodes.length); //此时data改变之后

使用 $nextTick 会在DOM渲染之后被触发，以获取最新DOM节点

this.$nextTick(() => {
const ulElem = this.$refs.ul1; //获取ul的DOM节点
console.log(ulElem.childNodes.length); //$nextTick会在DOM渲染之后被触发,此时已经是最新的DOM节点
});

异步渲染，$nextTick 待DOM渲染完再回调
页面渲染是，会将data的修改做整合，多次data修改只会渲染一次