当前位置：首页 > news >正文

【Vue】Vue2 与 Vue3 内置组件对比

news 2025/9/10 6:51:13

📘 Vue2 与 Vue3 内置组件对比

内置组件	Vue 2	Vue 3	变化说明	使用场景示例
KeepAlive	✅ 支持	✅ 支持（增强）	Vue3 增强了 `include` / `exclude` 支持正则表达式、数组、函数，更灵活。	缓存 Tab 页、路由切换保持状态。 `<KeepAlive :include="['User','Profile']"><router-view/></KeepAlive>`
Transition	✅ 支持	✅ 支持（优化）	性能优化，新增 v-show 过渡支持更好；事件钩子 API 更统一。	元素/组件进出场动画。 `<Transition name="fade"><p v-if="show">Hello</p></Transition>`
TransitionGroup	✅ 支持	✅ 支持	基本一致，性能优化。	列表过渡动画。
Teleport	❌ 不支持	✅ 新增	可将子内容渲染到 DOM 的任意位置，脱离父组件层级。	模态框、全局提示、悬浮层。 `<teleport to="body"><div class="modal">我是模态框</div></teleport>`
Suspense	❌ 不支持	✅ 新增	类似 React Suspense，用于异步组件加载时展示 fallback。	异步加载页面时显示骨架屏/加载动画。 `<Suspense><template #default><AsyncComp/></template><template #fallback>加载中...</template></Suspense>`
Fragment	❌ 不支持（需单根节点）	✅ 新增（默认支持）	Vue3 模板支持多根节点，内部通过 Fragment 虚拟组件实现。	避免不必要的 div 包裹。 `<template><h1>标题</h1><p>描述</p></template>`
Async Component 定义	✅ 支持（`Vue.component('async-comp',()=>import(...))`）	✅ 支持（`defineAsyncComponent`）	Vue3 提供 `defineAsyncComponent` 辅助函数，结合 Suspense 使用更优雅。	懒加载组件。 `const AsyncComp = defineAsyncComponent(()=>import('./Comp.vue'))`

🔎 相关代码示例

✅ Vue 3 新增的内置组件

`<Teleport>`

作用：把子组件或元素渲染到 DOM 的指定位置（即使不在当前组件层级内）。
常见场景：模态框、全局提示、浮层。

<template><teleport to="body"><div class="modal">我是模态框</div></teleport>
</template>

`<Suspense>`

作用：用于处理异步组件加载时的占位和 fallback。

类似 React 的 Suspense。

<template><Suspense><template #default><AsyncComponent /></template><template #fallback><div>加载中...</div></template></Suspense>
</template>

`<Fragment>`（虚拟概念，不需要显式写）

Vue 2 中模板必须有唯一根节点，Vue 3 开始可以有多个根节点。
实际上 Vue 内部通过 Fragment 支持的，不需要 <div>再包裹一层。

<template><h1>标题</h1><p>说明文字</p>
</template>

`<defineAsyncComponent>`

defineAsyncComponent(辅助函数，不是组件标签）
用于更优雅地定义异步组件，通常和 Suspense 搭配使用。

import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('./MyComp.vue'))

🔑 总结

Vue 3 真正新增的核心内置组件主要是：

Teleport（跨 DOM 渲染）
Suspense（异步加载占位）
Fragment（多根节点支持，内置虚拟组件）而

KeepAlive / Transition / TransitionGroup 是 Vue 2 就有的，只是 Vue 3 做了增强:

<KeepAlive>缓存动态组件的状态，Vue 3 增加了 include/exclude 更灵活的正则/函数过滤。
<Transition> / <TransitionGroup>过渡动画组件，Vue 3 改进了性能和用法，但整体与 Vue 2
类似。

✅Vue2(保留)、Vue3(增强)内置组件

`keepAlive`

vue2用法:

<template><div><!-- 缓存 User 和 Profile 组件 --><keep-alive include="User,Profile"><component :is="currentView"></component></keep-alive></div>
</template><script>
export default {data() {return { currentView: 'User' }}
}
</script>

vue3用法(增强版)

<template><div><!-- Vue3 支持数组 / 正则 / 函数过滤 --><keep-alive :include="['User', 'Profile']"><component :is="currentView"></component></keep-alive></div>
</template><script setup>
import { ref } from 'vue'const currentView = ref('User')
</script>

差异点：

Vue2 include/exclude 只能是字符串（逗号分隔）。
Vue3 支持字符串 / 数组 / 正则 / 函数，更灵活。

`Transition`

Vue2用法：

<template><div><button @click="show = !show">切换</button><transition name="fade"><p v-if="show">Hello Vue2</p></transition></div>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style><script>
export default {data() {return { show: true }}
}
</script>

Vue3用法：

<template><div><button @click="show = !show">切换</button><transition name="fade"><p v-if="show">Hello Vue3</p></transition></div>
</template><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter-from, .fade-leave-to {opacity: 0;
}
</style><script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

差异点

Vue2 使用 fade-enter、fade-leave-to。
Vue3 统一为 *-from, *-to , *-active 三类命名，更直观。

`TransitionGroup`

Vue 2 用法:

<template><div><button @click="add">添加</button><transition-group name="list" tag="ul"><li v-for="item in items" :key="item">{{ item }}</li></transition-group></div>
</template><style>
.list-enter-active, .list-leave-active {transition: all 0.5s;
}
.list-enter, .list-leave-to {opacity: 0;transform: translateY(30px);
}
</style><script>
export default {data() {return { items: [1, 2, 3] }},methods: {add() {this.items.push(this.items.length + 1)}}
}
</script>

Vue 3 用法:

<template><div><button @click="add">添加</button><transition-group name="list" tag="ul"><li v-for="item in items" :key="item">{{ item }}</li></transition-group></div>
</template><style>
.list-enter-active, .list-leave-active {transition: all 0.5s;
}
.list-enter-from, .list-leave-to {opacity: 0;transform: translateY(30px);
}
</style><script setup>
import { ref } from 'vue'const items = ref([1, 2, 3])
function add() {items.value.push(items.value.length + 1)
}
</script>