vue2和vue3的渲染过程简述版

2023-06-27 09:26:15 浏览数 (1)

vue2渲染过程

在Vue 2的渲染过程中，包括以下几个关键步骤：

  1. 解析模板：Vue 2使用基于HTML语法的模板，首先会将模板解析成抽象语法树（AST），用于后续的编译和渲染过程。
  2. 编译模板：将解析后的抽象语法树编译成渲染函数。编译过程包括静态标记、生成可复用的渲染函数以及处理动态绑定等操作。

静态标记阶段通过遍历抽象语法树，给其中的静态节点打上标记，这些节点在重新渲染时可以被跳过，从而提升渲染性能。 生成可复用的渲染函数阶段会将剩余的动态节点转换成JavaScript的渲染函数，这些函数接收数据作为入参，返回虚拟DOM（Virtual DOM）。 处理动态绑定阶段会将具有动态绑定的节点与对应的响应式数据建立关联，当数据发生变化时，会触发重新渲染的过程。

  1. 创建实例：通过Vue构造函数创建组件实例，并初始化相关属性和事件。
  2. 数据响应式：Vue使用双向绑定机制，在数据发生变化时自动更新对应的视图。在渲染过程中，Vue会为每个响应式数据对象设置侦听器，当数据发生改变时，会触发重新渲染的过程。
  3. 渲染虚拟DOM：Vue根据渲染函数生成虚拟DOM（Virtual DOM），虚拟DOM是一种轻量级的JavaScript对象，用于表示真实的DOM结构。

Diff算法会逐层比较新旧虚拟DOM树的节点，找出需要更新的节点。 使用key来唯一标识节点，可以帮助Diff算法更准确地找出差异。

  1. Diff算法：在重新渲染之前，Vue会进行虚拟DOM的比对，通过Diff算法找出需要更新的部分。Diff算法会高效地找出差异，并最小化DOM操作，提高渲染性能。
  2. 应用更新：根据Diff算法的结果，Vue将只更新需要修改的部分DOM节点，而不是重新渲染整个视图。这样可以减少不必要的计算和DOM操作，提高性能。
  3. 更新后钩子：在完成DOM更新后，Vue会触发相应的生命周期钩子函数，如updated，供开发者进行后续操作或处理副作用。

以上是Vue 2的简要渲染过程，通过将模板解析成渲染函数、创建实例、生成虚拟DOM以及更新差异等步骤，Vue能够高效地实现数据驱动的视图更新。

vue3渲染过程

在Vue 3中，渲染过程主要包括以下几个步骤：

  1. 解析模板：Vue 3使用编译器将模板解析成渲染函数，这是在构建阶段完成的。渲染函数可以理解为一个JavaScript函数，用于生成虚拟DOM。
  2. 创建响应式数据：Vue 3使用reactive()函数对数据进行响应式处理。该函数会将数据转换成响应式对象，使得当数据发生变化时，能够触发视图的重新渲染。
  3. 初始化组件实例：在创建组件实例时，Vue 3会执行一系列初始化操作，包括设置组件的初始状态、注入依赖项等。
  4. 渲染虚拟DOM：调用渲染函数生成虚拟DOM（VNode）。虚拟DOM是一个轻量级的JavaScript对象，它描述了要渲染到页面上的元素及其属性。
  5. 比较与更新：Vue 3通过算法优化，将新旧虚拟DOM进行比较，找出两者之间的差异。这个过程称为虚拟DOM diff。然后，根据差异进行有针对性地更新。
  6. 生成真实DOM：根据最新的虚拟DOM，Vue 3会进行真实DOM的创建或更新。
  7. 将真实DOM插入页面：在更新完真实DOM后，Vue 3将其插入到页面中，用户最终看到的就是这个经过更新的页面。
  8. 监听数据变化：在组件实例被挂载到页面上后，Vue 3会自动建立数据的观察者机制，当数据发生变化时，会通知相关依赖进行重新渲染。

优化和扩充

在Vue 3的渲染过程中，除了上述提到的步骤，还有一些优化和扩充的内容：

  1. 编译优化：Vue 3使用了静态模板提升（Static Template Hoisting）的技术，将静态节点转换成常量，在渲染过程中减少不必要的计算。这样可以降低虚拟DOM的生成和比对过程的开销，提高性能。
  2. 标记优化：Vue 3引入了递增式的静态标记（Incremental Static Marking），通过分层次、增量式的标记方式，将模板标记为可静态节点、需要动态跟踪的节点以及可能产生动态内容的节点，进一步减少不必要的更新操作。
  3. 静态提升：Vue 3可以将静态节点进行提升，从而避免重复创建和比对。这意味着在重新渲染时，Vue 3可以直接复用之前生成的静态节点，而无需重新生成和比对。
  4. Fragments：Vue 3支持Fragments（片段），可以在组件内部渲染多个根级别的元素，而无需包裹额外的父级元素。这样可以更灵活地组织组件的结构。
  5. Suspense：Vue 3引入了Suspense机制，用于处理异步组件的渲染。通过Suspense可以在异步组件加载中显示自定义的等待界面，提升用户体验。
  6. Teleport：Vue 3提供了Teleport（传送门）功能，可以将组件的内容渲染到DOM结构的其他位置，而不受组件嵌套层次的限制。这在处理模态框、弹出菜单等场景下非常有用。

Vue 3在渲染过程中进行了多方面的优化，包括编译优化、标记优化、静态提升等，以提升整体性能。此外，还引入了一些新特性如Fragments、Suspense和Teleport，为开发者提供了更加灵活和便利的渲染方式。

vue2和vue3对比

Vue 3通过使用静态模板提升、编译时优化等技术手段，使得整个渲染过程更为高效，并且相较于Vue 2有更好的性能表现。同时，Vue 3还引入了递增式的静态标记，可以进一步减少不必要的更新操作，提升渲染性能。

Vue 3的渲染过程包括解析模板、创建响应式数据、初始化组件实例、渲染虚拟DOM、比较与更新、生成真实DOM、将真实DOM插入页面和监听数据变化等环节。通过对比新旧虚拟DOM的差异，Vue 3能够高效地更新页面，并提供响应式的数据绑定。

vue.js

0 人点赞