建筑工程专业_购买域名要多少钱_开网站需要多少钱_快速优化官网

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、运行结果：

切换到A：

发现之前的计数值：3，还是存在的，再次切换到B,发现123也是存在的。

5、总结：

<KeepAlive></KeepAlive>实现了状态的保存，以及还原的功能。

官方：https://cn.vuejs.org/guide/built-ins/keep-alive.html#keepalive