【vue】keep-alive动态组件的基础用法

一、解读

是 Vue.js 中动态组件的用法，它允许你根据传入的 view 动态地渲染不同的组件。搭配 keep-alive 可以保持组件的状态，即使它们在切换时被卸载和重新加载，也能记住之前的状态。

动态组件的基础用法

中的 view 是一个动态变量，根据它的值不同，可以渲染不同的组件。

javascript 复制代码

<template>
  <div>
    <button @click="view = 'ComponentA'">Show Component A</button>
    <button @click="view = 'ComponentB'">Show Component B</button>
    
    <!-- 动态渲染组件 -->
    <component :is="view"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      view: 'ComponentA', // 初始显示的组件
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在这个例子中，点击不同的按钮会切换 view 的值，从而动态渲染 ComponentA 或 ComponentB。

keep-alive 的用法

keep-alive 用来缓存组件状态，使其在切换时保持数据不丢失。当你需要在切换不同组件时保持它们的状态，keep-alive 就很有用。

与动态组件结合使用时，你可以将需要缓存的组件包裹在 keep-alive 中：

javascript 复制代码

<template>
  <div>
    <button @click="view = 'ComponentA'">Show Component A</button>
    <button @click="view = 'ComponentB'">Show Component B</button>
    
    <!-- 使用 keep-alive 缓存动态组件 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      view: 'ComponentA',
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

keep-alive 的工作原理

当你切换到另一个组件时，keep-alive 会缓存当前组件的状态，而不是销毁它。

当你返回到该组件时，它会恢复之前的状态，而不是重新初始化组件。

这对于复杂的表单、长时间的页面交互场景非常有用，因为你不需要担心切换组件后数据丢失。

实际应用场景

如果你有一个多页签的功能，不希望每次切换页签时都重新加载组件内容，那么 keep-alive 可以有效地保持状态：

javascript 复制代码

<template>
  <div>
    <button @click="view = 'TabA'">Tab A</button>
    <button @click="view = 'TabB'">Tab B</button>
    
    <!-- 缓存页签内容 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </div>
</template>

<script>
import TabA from './TabA.vue';
import TabB from './TabB.vue';

export default {
  data() {
    return {
      view: 'TabA',
    };
  },
  components: {
    TabA,
    TabB
  }
};
</script>

这样，切换 Tab 页时，之前的 Tab 页内容会被保留，用户无需重新加载数据。

总结

用于动态渲染组件。

keep-alive 用于缓存组件，使其状态不会因为切换而丢失。

适用于需要保持组件状态的场景，如页签切换、复杂表单操作等。

希望这个解释能帮助你理解如何使用动态组件和 keep-alive 结合实现状态管理！

二、总结

keep-alive 能够保存当前被缓存的组件的完整状态，而不仅仅是页面上的显示。它会缓存组件的数据、生命周期钩子和 DOM 状态，所以当你切换回去时，组件的所有状态都会恢复到你离开时的状态。

具体行为

数据保存：keep-alive 缓存的组件会保留其内部的所有 data 数据，例如表单内容、输入框的值等。

DOM 状态保存：例如滚动位置、已打开的弹窗、展开的部分都会保持。

生命周期钩子：被缓存的组件在切换离开时不会触发 destroyed 钩子。再切换回来时，它会跳过 created 和 mounted 钩子，而是触发 activated。当离开时会触发 deactivated，而不是 destroyed。

保存多个组件的状态

如果你在一个场景中有多个组件在动态切换，并且想要它们各自的状态都被保存，keep-alive 也可以做到。

比如，你有三个动态组件 ComponentA、ComponentB 和 ComponentC，并且想在切换时缓存它们的状态。使用 keep-alive 会让它们的状态各自保存，不会因为切换而丢失。

javascript 复制代码

<template>
  <div>
    <button @click="view = 'ComponentA'">Show Component A</button>
    <button @click="view = 'ComponentB'">Show Component B</button>
    <button @click="view = 'ComponentC'">Show Component C</button>

    <!-- 缓存所有的动态组件 -->
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
  data() {
    return {
      view: 'ComponentA', // 初始显示的组件
    };
  },
  components: {
    ComponentA,
    ComponentB,
    ComponentC
  }
};
</script>

组件的状态缓存

当你切换到 ComponentA 时，它的数据和状态会保存下来。

当你切换到 ComponentB 或 ComponentC 时，ComponentA 不会被销毁，而是被缓存。

再次切换回 ComponentA 时，它会恢复之前的状态，包括数据、DOM 状态等。

所以，keep-alive 不仅能够保存当前页面的数据，还能保存所有被它包裹的组件的状态。只要这些组件被包裹在 keep-alive 中，它们的状态就不会丢失。

场景举例

例如，你有一个复杂的表单组件 ComponentA，一个图表组件 ComponentB，还有一个消息列表组件 ComponentC。通过 keep-alive，你可以在这些组件之间切换，所有表单数据、图表状态、消息列表的滚动位置都可以保持不变，而不需要重新加载或初始化它们。

总结

keep-alive 不仅保存当前页面的数据，还保存所有缓存中的组件状态。

每个被 keep-alive 缓存的组件状态都是独立的，不会相互影响。

组件的 data、DOM 状态和生命周期钩子会在缓存中保持。

如果你希望多个页面或组件之间的状态都能保存，keep-alive 是非常适合的工具

【vue】keep-alive动态组件的基础用法

一、 解读

二、总结

一、解读