vue重新渲染页面时发生了什么 • Worktile社区

worktile

Worktile官方账号

当 Vue 发现数据发生变化时，会触发重新渲染页面的过程。在重新渲染页面时，Vue 会执行以下操作：

Virtual DOM 的 diff 算法：
Vue 使用 Virtual DOM 来代替直接操作真实的 DOM，这个 Virtual DOM 是一个轻量级的 JS 对象，它保存着页面的状态和结构。在重新渲染页面时，Vue 会通过 diff 算法比较前后两个 Virtual DOM 的差异，从而找出需要更新的部分。
更新组件子树：
一旦找到有差异的组件，Vue 就会更新这些组件的子树。Vue 使用响应式系统来实现数据变化的检测，当数据发生变化时，与之相关的组件会被标记为“脏组件”，然后进行更新。Vue 会遍历需要更新的组件，并执行以下操作：
- 调用组件的 beforeUpdate 钩子函数（如果存在）；
- 更新组件的 props 和 computed 属性；
- 更新组件的状态（data）；
- 更新组件的指令、事件等；
- 调用组件的 updated 钩子函数（如果存在）。
生成新的 Virtual DOM：
在更新组件子树的过程中，Vue 会生成新的 Virtual DOM，用于和之前的 Virtual DOM 进行比较，并找出差异。这个新的 Virtual DOM 保存着最新的页面状态和结构。
执行 DOM 操作：
最后，Vue 会根据 diff 的结果，执行实际的 DOM 操作。Vue 会通过对比新旧 Virtual DOM 的差异，准确地更新页面中需要改变的部分，以达到最小化对 DOM 的操作。

综上所述，Vue 在重新渲染页面时，通过比较新旧 Virtual DOM 的差异，更新组件的子树，并最终执行实际的 DOM 操作，以实现页面的重新渲染。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

当Vue重新渲染页面时，会发生以下几个方面的变化：

更新虚拟DOM：Vue使用虚拟DOM来表示页面的结构和状态。当页面需要重新渲染时，Vue会比较当前虚拟DOM和上一次渲染的虚拟DOM的差异，找到需要更新的部分。然后，Vue会根据这些差异对虚拟DOM进行更新。
重新计算组件的数据：在重新渲染页面时，Vue会重新计算组件的数据。这意味着Vue会重新执行组件中的计算属性和侦听属性，并更新组件的状态。这些计算属性和侦听属性可以依赖于其他数据或者组件的状态，当这些依赖发生变化时，Vue会重新计算它们。
检查更新的组件：在重新渲染页面时，Vue会检查哪些组件的状态发生了变化，并且需要重新渲染。Vue通过比较组件的状态来确定哪些组件需要重新渲染。然后，Vue会通过调用组件的渲染函数来重新渲染这些组件。
执行更新操作：在重新渲染页面时，Vue会执行一系列的更新操作来更新组件的状态。这些更新操作包括更新组件的虚拟DOM、执行组件的生命周期钩子函数、更新组件的子组件等。通过执行这些更新操作，Vue可以确保页面的渲染结果与组件的状态保持一致。
重新渲染页面：最后，当所有的更新操作完成后，Vue会重新渲染整个页面。这意味着Vue会根据更新后的虚拟DOM生成新的页面结构，并将其渲染到实际的DOM中。这样，页面就完成了重新渲染，用户可以看到最新的页面内容。

总的来说，当Vue重新渲染页面时，会更新虚拟DOM、重新计算组件的数据、检查更新的组件、执行更新操作，并最终重新渲染整个页面。通过这些步骤，Vue可以保证页面的内容与组件的状态保持一致，实现快速、高效的页面更新。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

当Vue重新渲染页面时，主要是通过以下几个步骤来实现：

依赖收集：在Vue的数据绑定中，每个数据都有一个对应的Watcher对象，Watcher会记录当前数据的依赖关系。当页面初始化时，会通过遍历模板的每个节点，找到其中的数据绑定表达式，创建对应的Watcher对象，并将Watcher对象添加到当前数据的依赖列表中。
数据改变：当数据改变时，Vue会调用数据的setter函数，setter函数通常会触发对应的依赖列表中的Watcher对象的更新方法。
重新渲染：Watcher对象的更新方法会调用Vue的虚拟DOM更新逻辑，在这个过程中，Vue会先计算出需要更新的最小的DOM节点集合，然后通过对比新旧虚拟DOM树，找出需要更新的节点，最后将更新的部分应用到实际的DOM树中。
视图更新：通过上述步骤，Vue已经更新了实际的DOM树，此时浏览器会重新渲染视图，这一步是由浏览器自身来完成的。

需要注意的是，为了优化性能，Vue会通过Diff算法来计算虚拟DOM树的差异，将更新的步骤限制在最小的范围内，以提升渲染的效率。此外，Vue还会对页面中的异步任务进行优化，将多个数据更新操作合并为一次更新，减少了不必要的渲染过程。

综上所述，Vue重新渲染页面的过程主要包括依赖收集、数据改变、重新渲染和视图更新等步骤，通过这些步骤实现了数据驱动视图的更新。

2年前 0条评论