Vue 2.0 发布于 8年前的 2016 年，这是 Vue 成为主流框架过程中的一个重要里程碑。Vue 团队于 2020 年 9 月 18 日发布了 Vue 3.0 版本，2023年12月31日宣布Vue2将停止维护，如今Vue3生态系统正在蓬勃发展，本篇文章将全面介绍Vue2和Vue3到底有什么区别，以及我们如何更高效的使用Vue3来进行项目开发。

一、 Vue3的优点

1. 速度更快

• Vue3 相比 Vue2 来说，Vue3 重写了虚拟 Dom 实现，编译模板的优化，更高效的组件初始化，undate性能提高 1.3 ~ 2 倍，SSR 速度提高了 2 ~ 3 倍。

2. 体积更小

• 通过 webpack 的 tree-shaking 功能，可以将无用模块“剪辑”，仅打包需要的模块。

3. 更易维护

• compositon Api 可与现有的 Options API 一起使用。
• 灵活的逻辑组合与复用。
• Vue3 模块可以和其他框架搭配使用。

4. 更接近原生

• 可以自定义渲染 API 。

5.更易使用

• 响应式 Api 暴露出来。

二、Vue2和Vue3的区别

1、生命周期

对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。

Vue2和Vue3的生命周期

Vue2	Vue3	说明
beforeCreate	setup	组件创建之前，执行初始化任务
created	setup	组件创建完成，访问数据、获取接口数据
beforeMount	onBeforeMount	组件挂载之前
mounted	onMounted	组件挂载完成，DOM已创建，访问数据或DOM元素，访问子组件
beforeUpdate	onBeforeUpdate	未更新，获取更新前所有状态
updated	onUpdated	组件挂载完成，DOM已创建，访问数据或DOM元素，访问子组件
beforeDestroy	onBeforeUnmount	未更新，获取更新前所有状态
destroyed	onUnmounted	组件销毁之后

               vue2的生命周期

Vue3的生命周期 

Tips： setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地去定义。

2、组合式api

Vue2是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。

Vue3组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。所有逻辑在setup函数中，使用 ref、watch 等函数组织代码。

3、setup函数

setup函数是组合式API的入口函数，默认导出配置选项，setup函数声明，返回模板需要数据与函数。

• setup 函数是 Vue3 特有的选项，作为组合式API的起点
• 从组件生命周期看，它在 beforeCreate 之前执行
• 函数中 this 不是组件实例，是 undefined
• 如果数据或者函数在模板中使用，需要在 setup 返回
• 今后在vue3的项目中几乎用不到 this , 所有的东西通过函数获取。

4、 多根节点

Vue2只能存在一个根节点，需要用一个div来包裹；Vue3 支持多个根节点，也就是 fragment。

// Vue2只能存在一个根节点，需要用一个<div>来包裹着
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>

// Vue3支持多个根节点
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

5、 响应式原理

Vue2 响应式原理基础是 Object.defineProperty；Vue3 响应式原理基础是 Proxy。

• Object.defineProperty 基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。
• Proxy提供了一种更强大和灵活的拦截器机制，允许开发者定义代理对象并拦截对该对象的各种操作（如属性读取、属性设置、函数调用等）。

 以下分别是Vue2和Vue3的响应式原理的简单示例。

以下是一个Vue2响应式原理的简单示例：

// 定义一个对象  
const data = {  
  name: 'Vue2',  
  count: 0  
};  
  
// 使用Object.defineProperty为每个属性添加getter和setter  
Object.defineProperty(data, 'name', {  
  get() {  
    console.log('name getter called');  
    return this._name;  
  },  
  set(newValue) {  
    console.log('name setter called with value:', newValue);  
    this._name = newValue;  
    // 这里可以触发视图更新等操作  
  },  
  configurable: true,  
  enumerable: true  
});  
  
// 初始化_name属性  
data._name = data.name;  
  
// 访问和修改属性  
console.log(data.name); // 输出: name getter called，Vue2  
data.name = 'New Name'; // 输出: name setter called with value: New Name

 以下是一个Vue3响应式原理的简单示例：

import { reactive } from 'vue';  
  
// 创建一个响应式对象  
const state = reactive({  
  name: 'Vue3',  
  count: 0  
});  
  
// 访问和修改属性  
console.log(state.name); // 访问属性，触发getter  
state.name = 'New Name'; // 修改属性，触发setter  
  
// 在Vue3中，你不需要显式地定义getter和setter，因为Proxy会为你处理这些  
// 但是，你可以通过调试或查看Vue3的内部实现来了解它是如何工作的

6、虚拟Dom

 在Vue2中，虚拟DOM的创建和更新是通过render函数来实现的。render函数返回一个虚拟节点（VNode），这个VNode描述了应该渲染什么样的DOM结构。当数据变化时，Vue2会重新计算生成一个新的虚拟DOM树，并与旧的虚拟DOM树进行比对，找出差异部分，然后更新真实的DOM。

Vue3对虚拟DOM进行了重写，以提高性能和灵活性。在Vue3中，虚拟DOM的创建和更新仍然是通过render函数来实现的，但render函数的调用方式有所不同。Vue3提供了一个新的全局APIcreateApp来创建Vue应用实例，并通过这个实例来挂载和渲染组件。与Vue2相比，Vue3的虚拟DOM在以下几个方面进行了改进：

1. 性能优化：Vue3采用了更高效的算法来减少不必要的DOM操作，从而提高了渲染性能。
2. Tree-shaking支持：Vue3的虚拟DOM代码采用了模块化的设计，使得开发者可以更方便地进行Tree-shaking优化，减小最终的打包体积。
3. 组合式API：Vue3引入了组合式API，使得开发者可以更灵活地组织和重用组件逻辑。在虚拟DOM的处理上，组合式API可以更好地与虚拟DOM进行交互。

 以下是一个Vue2中使用虚拟DOM的简单示例：

// Vue2 示例  
import Vue from 'vue';  
  
new Vue({  
  el: '#app',  
  data: {  
    message: 'Hello, Vue2!'  
  },  
  render(h) {  
    return h('div', this.message);  
  }  
});

 以下是一个Vue3中使用虚拟DOM的简单示例：

// Vue3 示例  
import { createApp, h } from 'vue';  
  
const App = {  
  render() {  
    return h('div', 'Hello, Vue3!');  
  }  
};  
  
createApp(App).mount('#app');