Vue2和Vue3究竟有哪些区别

AliceOvO
2,279 阅读4分钟

一、Vue3的优点

1.速度快

相比于 Vue2 ，Vue3重写了虚拟DOM，优化了编译模版，提高了 undate 性能和 SSR 的速度。

2.体积小

通过 webpack 的 tree-shaking 功能，可以将不需要的模块“剪切掉”，只打包需要的模块。

3.便于维护

  1. Vue3 模块可以和其他框架搭配使用。
  2. 可以灵活的组合和复用。

4.接近原生

可以自定义渲染API。

5.更易使用

将响应式 API 暴露出来。

二、Vue2和Vue3的区别

1.响应式原理

Vue2 的响应式原理基础是 Object.defineProprety 方法，而 Vue3 响应式系统是基于 ES6 的 Proxy 对象。Object.defineProprety 方式是直接在一个对象上定义新的属性或修改现有属性并返回对象。而 Proxy 会拦截对对象属性的访问和修改。通过代理对象，Vue 可以追踪依赖关系，并在数据发生变化时自动更新。

2.多根节点

在 Vue2 中每个组件都必须有一个单一的根元素。而 Vue3 支持多根节点，不再需要一个单独的根元素包裹所有的子元素。

<template>
  <header>Header Content</header>
  <main>Main Content</main>
  <footer>Footer Content</footer>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

注意： 虽然多根节点带来了灵活性，但还是要注意 Key 属性和样式处理。如果需要进行唯一性标识，则每个元素需要有唯一的 key 属性。而且因为没有统一的父元素，要注意是否会影响全局样式。

3.API的形式

Vue2 是选项式API，主要是由三个部分组成：data、methods、computed。

它是按类来区分的，也就是所有的数据放在一块，所有的方法放在一块。这意味着一个功能的所有部分会被差分到文件中的不同位置，从而导致代码的可读性变差。当需要修改某个功能时需要反复移动。

Vue3 是组合式API，他将一个功能的所有内容放在一起，增强了代码的可读性，也便于代码的维护和复用。

Snipaste_2024-12-27_21-11-47.png

4.生命周期

对于生命周期这方面，二者的差别不大，只是在 Vue3 中大多数的生命周期钩子会在名称前加上“on”。需要注意的是，Vue3 在组合式 API 中使用生命周期钩子时是要提前引入的，但在 Vue2 的时候可以直接调用。

Snipaste_2025-02-28_10-27-50.png

ce40ec82703cce162e9b2818d67c0e44.png

Vue2 的生命周期

09ed001490744af7b23f97f721a95236.png

Vue3 的生命周期

3.setup函数

setup函数是Vue3 特有的入口函数，提供了更灵活和强大的方式来组织和复用组件。

  • setup函数是组合式API的起点。
  • 在生命周期中，会在 beforeCreate 之前执行。
  • 函数中的 this 不是实例，是 undefined。
  • 当函数或数据在末班中使用，需要在 setup 中返回。
  • 在 Vue3 中基本不会用到 this ，所有东西需要通过函数获取。

6.虚拟DOM

虚拟DOM是通过创建一个轻量级的内存中的副本（即虚拟DOM）来表示实际的DOM树，从而减少DON树所带来的性能开销。毕竟，DOM树的大小和修改都需要大量的资源，十分影响响应速度。

在 Vue2 中是通过 render 函数来实现虚拟DOM的创建和更新。render 函数会返回一个虚拟节点，这个节点会描述应该怎样进行渲染。当数据发生变化时，会新建一个虚拟DOM树，与旧的虚拟DOM树进行比较，找出不同的部分，再更新DOM树。

而 Vue3 则对虚拟DOM进行了重写，提高了性能和灵活性。Vue3 中的虚拟DOM的创建和更新依旧是由render函数来实现，但提供了一个全新的全局API createApp 来创建应用实例并进行挂载和渲染组件。

相比之下，Vue3比Vue2优化了以下几点：

  1. 性能优化：Vue3减少了不必要的DOM操作，提高了渲染性能。
  2. Tree-shaking支持：Vue3 的虚拟DOM采用了模块化的设计，使开发人员更容易进行 Tree-shaking 优化，从而减少打包体积。
  3. 组合式API：Vue3 中的组合式API是一大亮点，使代码管理更加规范，也方便维护和复用。而且组合式API也能更好的与虚拟DOM进行交互。

总结

从 Vue2 到 Vue3 的变化是巨大的，了解二者之间的区别，更有利于对 Vue3 的学习。

avatar
文章
阅读
粉丝