Skip to main content

Vue2和Vue3的版本区别

Vue3 相比于 Vue2 做了许多改进和优化。

Vue3 比 Vue2 快，因为 Vue3 使用 Proxy 对象直接监听属性的访问和修改，而不需要为每个属性创建 getter 和 setter。

响应式原理不同​

  • 在 Vue2 中，双向数据绑定是通过使用 Object.defineProperty() API 对数据进行劫持，并结合发布订阅模式来实现的。
  • 在 Vue3 中，采用了更高效的 Proxy 代理方式来实现数据的响应式，通过拦截对象的内部方法的执行，实现数据的挟持和拦截。

为什么使用Proxy​

  1. 动态代理：在使用 Object.defineProperty() 时，要为每一个属性都添加 getter 和 setter，而 Proxy 直接可以劫持整个对象，只需要添加一个代理就可以监听所有的属性
  2. 数组监听：Proxy 可以直接监听数组的变化（push、shift、splice）
  3. 全面拦截：Proxy 提供了更全面的拦截器机制，有多达13种拦截方法（apply、ownKeys、deleteProperty、has）

Vue3引入Fragment​

  • 在 Vue2 中，组件的 template 只能包含一个根节点
  • 在 Vue3 中，引入了 Fragment 的概念，允许组件的 template 包含多个根节点

Vue3引入Composition API​

  • 在 Vue2 中，使用选项式 API 将代码分割成不同的属性：data、methods、computed 等，同一块业务逻辑会把数据和方法拆分到不同的代码块中
  • 在 Vue3 中，使用组合式 API（Composition API），可以将相同业务逻辑的数据和方法组织在同一个代码块中，从而提高了代码的可读性和维护性
  • 选项式 API 是在组合式 API 的基础上实现的

生命周期不同​

Vue2Vue3描述
-setup在组件中使用组合式 API 的入口
beforeCreate在组件被创建之前被调用
created在组件被创建完成后调用
boforeMountonBeforeMount在组件被挂载之前被调用
mountedonMounted在组件挂载完成后调用
beforeUpdateonBeforeUpdate在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updatedonUpdated在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeDestroyonBeforeUnmount在组件实例被卸载之前调用
destroyedonUnMounted在组件实例被卸载之后调用
activatedonActivated若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用
deActivatedonDeactivated若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用
-onErrorCaptured在捕获了后代组件传递的错误时调用

Vue3新增Teleport组件​

Vue3 引入了 Teleport 组件，使得组件可以在 DOM 树的其他位置渲染，方便实现弹窗、模态框等 UI 交互。

虚拟DOM优化​

Vue3 的虚拟 DOM 采用了静态标记和树摇优化，减少了不必要的渲染操作，提升了性能。

更好的TypeScript支持​

Vue3 对 TypeScript 的支持更加友好，提供了更准确的类型推断和类型定义。