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

vue3 keep-alive简单说明

article 2024/11/6 0:24:31

1、官方说明

<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

我们一般会用现成的三方框架，然后这里面会经常看到<KeepAlive>...</KeepAlive>

2、简单说明：

进行多组件切换的时候，如果需要保存最后一次操作数据的状态，比如说文本框我们输入了一值，要求保存的话，那么只能手工去保存，然后加载的时候，再次赋值。有了Keep-alive，我们就不需要这个保存，赋值的过程。

3、实例：

CompA：计数SFC

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <p>Current component: A</p>
  <span>count: {{ count }}</span>
  <button @click="count++">+</button>
</template>

CompB：String输入SFC

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<template>
  <p>Current component: B</p>
  <span>Message is: {{ msg }}</span>
  <input v-model="msg">
</template>

App.vue引用：

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current" :value="CompB" /> B</label>
    <KeepAlive>
      <component :is="current"></component>
    </KeepAlive>
  </div>
</template>

4、运行结果：