在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别，web前端开发技术

多根节点

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

// vue2

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

| 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里存在多个根节点会报错

// 只能存在一个根节点，需要用一个

来包裹着

</