2025年vue2和vue3区别代码有什么区别（vue2vue3的区别）

大家好，我是讯享网，很高兴认识大家。

 <p id="main-toc"><strong>目录</strong></p>

多根节点，fragment（碎片）

Composition API

reactive 函数是用来创建响应式对象

Ref

toRef

toRefs

去除了管道

v-model的prop 和 event 默认名称会更改

vue2写法

Vue 3写法

vue3组件需要使用v-model时的写法

其他语法

1. 创建应用实例

2. 组件注册

3. 全局 API

4. 生命周期钩子

5. 计算属和监听器

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

讯享网

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

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

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

Vue 3 中的函数是用来创建响应式对象的，它将普通的 JavaScript 对象转换成 Vue 响应式的对象。下面是一个简单的例子，演示如何使用：

reactive 只能给对象，数组添加响应式，如果想给值类型( string ,Number,Boolean ,Symbol )添加响应式，就要用到ref。

讯享网

可以将一个响应式对象的某个属性转换成一个单独的响应式对象。当这个属性发生改变时，这个改变会被追踪，并且会触发视图更新。

是 Vue 3 中的工具函数，可以将一个响应式对象转换成一个由所有属性都为响应式对象的普通对象。当响应式对象中的某个属性发生改变时，这个改变会被追踪，并且会触发视图更新。

讯享网

reactive封装的响应式对象，不要通过解构的方式return，这是不具有响应式的。可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

Vue 3 之前的版本中提供了管道（pipe）的功能，可以通过在模板中使用符号来对表达式的结果进行处理。例如：

讯享网

在上面的代码中，我们使用管道将变量的值转换为大写形式。

然而，Vue 3 中已经移除了管道的功能。这是因为管道的实现方式会带来一些性能问题。每个管道都会创建一个新的函数，这会导致更多的函数创建和执行，而这些函数可能只是对数据进行了一些简单的操作，这些操作完全可以在组件中使用计算属性或方法来完成。

在 Vue 3 中，推荐使用计算属性或方法来完成管道的功能。例如，在上面的代码中，我们可以将过滤器的功能封装到一个计算属性或方法中，然后在模板中使用这个计算属性或方法来对数据进行处理。这样可以避免创建多余的函数，提高应用的性能。

讯享网

在 Vue 3 中，我们需要在组件上使用指令时，需要同时指定一个名为的 prop 和一个名为的事件。例如：

Vue 3 引入了一些新的特性和优化，同时也对一些 API 进行了调整和改进。以下是一些常见的 API 类型的比较：

Vue 2: Vue.component(name, options)
Vue 3: app.component(name, definition)

Vue 2: Vue.directive(name, definition)
Vue 3: app.directive(name, definition)

vue2：vue2中的生命周期：

vue3：vue3中的生命周期：

Vue 2: computed: {}
Vue 3: computed()

Vue 2: watch: {}
Vue 3: watch()