Vue3和Vue2的差异总结对比（含代码案例）

目录

Composition API（组合式 API）

setup() 函数

ref 和 reactive

Teleport 组件

Fragment 组件

全局 API 改变

V-model 的改进

编译器优化

响应式系统改进

更好的类型推导和支持

更好的性能

---

Composition API（组合式 API）

• Vue3引入了Composition API，它是Vue3中最引人注目的变化之一，是一种新的组件编写方式，它允许开发者使用函数式API来组织和重用组件逻辑，而不仅仅是依赖于选项对象 API。这使得组件更易于理解和维护。
• 在Vue2中，我们使用Options API来定义组件，而在Vue3中，我们可以使用setup函数，并结合各种函数和响应式引用进行逻辑编写。

 在Vue3中，使用Composition API可以更好地组织和重用组件逻辑。通过setup()函数，在其中编写逻辑代码。下面是一个示例：

Vue3:

Vue2:

setup() 函数

在Vue3中，组件的选项中添加了一个名为setup()的新函数。setup()函数用于替代Vue2中的created()、mounted()等钩子函数。setup()函数在组件实例被创建之前执行，并且作为一个独立的生命周期阶段。

setup()函数，可以替代Vue2中的生命周期钩子函数。下面是一个示例：

Vue3:

Vue2:

ref 和 reactive

在Vue3中，ref和reactive是用于创建响应式数据的新函数。ref用于创建一个基本类型的响应式数据，而reactive则用于创建一个响应式对象。在Vue2中，可以直接在data选项中定义响应式数据。

ref和reactive函数用于创建响应式数据，示例：

Vue3:

Vue2:

Teleport 组件

Vue3引入了Teleport组件，它可以在DOM树中的任何位置渲染组件内容。这对于创建弹出窗口、对话框等动态组件非常有用。

下面是一个示例：

Vue3:

Vue2:

Fragment 组件

Vue3中可以使用