Vue2与Vue3的区别

什么是Vue？

Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面和单页应用（SPA）。它的核心理念是通过数据驱动的方式，使得开发者可以以声明的方式来构建应用，提供了响应式的数据绑定和组件化的开发模式。

什么是Vue2、Vue3？

Vue2 和 Vue3 都是在不同的发展阶段中，Vue.js 框架的主要版本。Vue2 发布与2016年，Vue3发布于2020年。Vue 2 作为经典版本，稳定且易于学习，而 Vue 3 则通过引入新的特性和优化，提供了更强大的工具，满足现代 Web 开发的需求。

 Vue2的主要特性

响应式数据绑定

使用 Object.defineProperty 来实现数据的观测，能够自动更新视图。

底层是用发布-订阅者模式来实现数据的双向绑定的，使用Watcher来对数据进行变化监听。

 选项 API

组件的定义通过一组选项（如 data、methods、computed 等）来组织。

指令

 使用指令（如 v-bind、v-if、v-for 等）来操作 DOM

 生态系统

配备了如 Vue Router（路由管理）和 Vuex（状态管理）等官方插件。

虚拟DOM

Vue 2利用虚拟DOM技术实现高效的渲染性能。它会在内存中创建一个轻量级的虚拟DOM树，然后通过比较虚拟DOM与实际DOM的差异来最小化DOM操作，提高应用程序的性能。 

Vue3的主要特性

性能优化

引入了 Proxy API 提升性能，重写了虚拟DOM。

组合API

提供了 setup 函数，使得逻辑复用和组件的组织更为灵活。

 新特性

增加了 Teleport、Fragments 等新特性，增强了功能性。

 TypeScript支持

对 TypeScript 的支持更加完备，方便大型项目的开发。

生态系统

 与 Vue 2 的生态系统匹配，同时对 Vue Router 和 Vuex 进行了改进以支持新的 API。

Vue2与Vue3的主要区别

 响应式设计

• Vue 2：
  • 使用 Object.defineProperty 来实现数据的观测。当对数据属性进行更改时，会触发视图重新渲染。
  • 对数组的操作（如 push、splice）需要大量的手动处理，某些操作需要使用 $set 方法保持响应性。
• Vue 3：
  • 使用 ES6 的 Proxy API，适用于对象和数组，能够直接拦截对对象的访问和修改。
  • 响应式系统支持更为复杂的对象结构，数组的操作更加自然，不需要使用 $set。

 组件定义与结构

• Vue 2：
  • 采用选项 API，组件的定义是通过选项对象（数据、方法、生命周期）来组织，不同功能代码可能会分散在不同的部分。
• Vue 3：
  • 引入了组合 API（Composition API），使用 setup 函数，将逻辑和状态组织在一起，更加直观。
  • 允许更好的逻辑复用，可以创建自定义组合函数，极大提升了代码的可维护性。

性能

• Vue 2：

  • 虚拟 DOM 渲染方式的性能已足够良好，但在复杂场景下可能出现性能瓶颈。

• Vue 3：

  • 通过重写虚拟 DOM 实现了性能优化，框架内核更轻量。
  • 引入了异步渲染方式，能够更高效地调度更新，提升大规模应用的性能表现。

生命周期

• Vue 2：

  • 生命周期钩子命名使用如 beforeDestroy 和 destroyed 等传统命名方式。
  • vue2的生命周期钩子

  • beforeCreate  // 组件实例被创建之初，在数据观测和事件配置之前被调用。
    created       // 组件实例创建完成后被调用，此时数据已被观测，事件已被配置，但 DOM 还未生成。
    beforeMount   // 在组件挂载开始之前被调用，相关的 render 函数首次被调用。
    mounted       // 组件被挂载在实例后调用，此时 DOM 已经生成，可以进行 DOM 操作。
    beforeUpdate  // 组件数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
    updated       // 组件数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。
    beforeDestroy // 组件实例销毁之前调用，此时可以进行清理工作。
    destroyed     // 组件实例销毁后调用，所有的事件监听器和子实例都被移除。
    activated     // keep-alive 缓存的组件激活时被调用
    deactivated   // keep-alive 缓存的组件被停用时调用
    errorCaptured // 捕获一个来自子孙组件的错误时被调用

• Vue 3：

  • 对生命周期钩子进行重新命名，beforeCreate 、created  两个钩子被setup()钩子来替代。
  • vue3的生命周期钩子

  • setup             // 开始创建组件，在 beforeCreate 和 created 之前执行，创建的是 data 和 method
    onBeforeMount     // 组件挂载到节点上之前执行的函数
    onMounted         // 组件挂载完成后执行的函数
    onBeforeUpdate    // 组件更新之前执行的函数
    onUpdated         // 组件更新完成之后执行的函数
    onBeforeUnmount   // 组件卸载之前执行的函数
    onUnmounted       // 组件卸载完成后执行的函数
    onActivated       // 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行
    onDeactivated     // 比如从 A 组件，切换到 B 组件，A 组件消失时执行
    onErrorCaptured   // 当捕获一个来自子孙组件的异常时激活钩子函数

根节点

• Vue 2:

  • 必须要有根节点，且只有一个。

• Vue 3:

  • 可以没有根节点或有多个，因为Vue 3会默认将多个根标签包裹在一个fragement虚拟标签中，有利于减少内存。

v-if 和 v-for 的优先级

• Vue 2

  • v-for 的优先级大于 v-if

• Vue 3:

  • v-if 的优先级大于 v-for

diff 算法 

• Vue 2

  • 基于树的比较：

    • Vue 2 使用的是一种基于树的 Diff 算法，主要通过深度优先遍历的方式来比较两个虚拟 DOM 树。
    • 在比较过程中，Vue 2 会逐层比较节点，检查每个节点的类型、属性和子节点。

  • 性能问题：

    • 由于 Vue 2 的 Diff 算法是基于深度优先遍历的，处理复杂组件时可能会导致性能瓶颈，尤其是在大量节点更新时。
    • 对于同级节点的比较，Vue 2 需要遍历整个子树，可能导致不必要的性能开销。

  • 优化策略：

    • Vue 2 通过一些优化策略（如静态节点的标记）来减少不必要的更新，但在复杂场景下仍然可能出现性能问题。

• Vue 3:

  • 基于块的比较：

    • Vue 3 引入了一种新的 Diff 算法，采用了基于块的比较方式，能够更高效地处理虚拟 DOM 的更新。
    • 这种算法将虚拟 DOM 分为多个块（block），在更新时只需比较受影响的块，而不是整个树。

  • 更高效的更新：

    • Vue 3 的 Diff 算法能够更智能地处理同级节点的更新，减少了不必要的比较和更新操作。
    • 通过使用 key 属性，Vue 3 可以更好地识别节点的身份，从而优化更新过程。

  • 性能提升：

    • 由于采用了更高效的算法，Vue 3 在处理复杂组件和大量数据更新时，性能显著提升。
    • 这种设计使得 Vue 3 更加适合大型应用程序，能够更好地应对复杂的 UI 更新场景。

• 关键区别

  • 算法类型：

    • Vue 2：基于树的深度优先遍历算法。
    • Vue 3：基于块的比较算法，优化了同级节点的处理。

  • 性能优化：

    • Vue 2：在复杂场景下可能出现性能瓶颈，优化策略有限。
    • Vue 3：通过更智能的更新策略和块比较，显著提升了性能。

  • 节点识别：

    • Vue 2：对同级节点的比较较为简单，可能导致不必要的更新。
    • Vue 3：通过 key 属性更好地识别节点身份，优化更新过程。

以上就是本篇文章的全部内容了，如果对你有帮助的话，还希望不要吝啬手中的赞和关注，非常感谢！