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

＜Transition＞和＜KeepAlive＞组件一起用有什么用

news 来源：原创 2025/6/20 19:45:34

在 Vue 3 中， <Transition> 和 <KeepAlive> 都是内置组件，将它们组合使用 <Transition> <KeepAlive> <component :is="view"></component> </KeepAlive> </Transition> 可以实现带有过渡动画效果的组件缓存功能，下面详细解释其作用和原理。

各组件作用

<KeepAlive>：该组件用于缓存动态组件，当组件在 <KeepAlive> 包裹下进行切换时，被切换出去的组件实例不会被销毁，而是被缓存起来。当再次切换回来时，直接从缓存中获取该组件实例，避免了重复创建和销毁组件带来的性能开销，同时也能保留组件的状态。
<Transition>：用于在组件插入或移除 DOM 时应用过渡动画效果。它会根据组件的插入和移除状态添加相应的 CSS 类名，开发者可以通过这些 CSS 类名来定义过渡动画的样式。

组合使用的效果

组合使用 <Transition> 和 <KeepAlive> 可以让组件在切换时既享受缓存带来的性能优势，又能拥有过渡动画效果，提升用户体验。当动态组件 view 发生变化时，新组件会以过渡动画的形式进入，旧组件会以过渡动画的形式离开，同时旧组件的实例会被缓存起来，以便下次快速复用。

示例代码

以下是一个简单的示例，展示了如何使用 <Transition> 和 <KeepAlive> 组合实现带有过渡动画的组件缓存：

<template>
  <div>
    <!-- 切换组件的按钮 -->
    <button @click="toggleView">切换组件</button>
    <!-- 使用 Transition 组件添加过渡动画 -->
    <Transition name="fade">
      <!-- 使用 KeepAlive 组件缓存动态组件 -->
      <KeepAlive>
        <!-- 根据 view 动态渲染组件 -->
        <component :is="view"></component>
      </KeepAlive>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

// 定义当前显示的组件
const view = ref('ComponentA');

const toggleView = () => {
  // 切换组件
  view.value = view.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
};
</script>

<style scoped>
/* 定义淡入淡出的过渡动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>