在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别

目录

前言

正文

一、Vue3 与 Vue2 区别概览

二、Vue3 与 Vue2 区别详述

生命周期

多根节点

Composition API

异步组件（Suspense）

Teleport

响应式原理

虚拟DOM

事件缓存

Diff算法优化

打包优化

自定义渲染API

TypeScript支持

三、Options API 与 Composition API

Options API

Composition API

如何选择？

展望

---

前言

不知道大家有没有留意到，Vue 官网文档已经更新为默认使用 Vue3 版本了。

接触过 Vue2 的朋友可能会疑惑：Vue3 相对于 Vue2 来说，到底更新了什么内容？

今天，我就为大家盘点一下 Vue3 相对于 Vue2，主要区别有哪些。

正文

一、Vue3 与 Vue2 区别概览

Vue3 与 Vue2 的主要区别如下：

• 生命周期

• 多根节点

• Composition API（组合式API）

• 异步组件（Suspense）

• Teleport

• 响应式原理

• 虚拟DOM

• 事件缓存

• Diff算法优化

• 打包优化

• 自定义渲染API

• TypeScript支持

二、Vue3 与 Vue2 区别详述

生命周期

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

// vue3
<script setup>     
import { onMounted } from 'vue';   // 使用前需引入生命周期钩子

onMounted(() => {
  // ...
});

// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
  // ...
});
</script>

// vue2
<script>     
export default {         
  mounted() {   // 直接调用生命周期钩子            
    // ...         
  },           
}
</script> 

常用生命周期对比如下表所示。

Vue2

Vue3

beforeCreate

Not needed

created

Not needed

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeDestroy

onBeforeUnmount

destroyed

onUnmounted

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

多根节点

熟悉 Vue2 的朋友应该清楚，在模板中如果使用多个根节点时会报错，如下所示。

// vue2中在template里存在多个根节点会报错
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>

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

但是，Vue3 支持多个根节点，也就是fragment。即以下多根节点的写法是被允许的。

<template>
  <header></header>
  <main></main>
  <footer></footer>
</templ