Vue3系列12--keep-alive缓存组件

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。

开启keep-alive 生命周期的变化.

• 初次进入时： onMounted> onActivated
• 退出后触发 deactivated
• 再次进入：
• 只会触发 onActivated
• 事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

 (1) 建立src\components\login\index.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

<template>     <div>         <table>             <tr>                 <td>账号：</td> <td><input type="text" v-model="form.login"></td>             </tr>             <tr>                 <td>密码：</td> <td><input type="password" v-model="form.psd"></td>             </tr>         </table>         <button @click="submit">登录</button>     </div> </template>     <script setup lang="ts"> import { reactive ,onMounted,onUnmounted,onActivated,onDeactivated} from 'vue'; const form = reactive({     login:"",     psd:"" })   const submit = ()=>{     console.log(form) }   <script lang="ts"> export default {     name:"Login" } </script>

（2）建立src\components\reg\index.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<template>     <div>         <table>             <tr>                 <td>账号：</td> <td><input type="text" v-model="form.login"></td>             </tr>             <tr>                 <td>密码：</td> <td><input type="password" v-model="form.psd"></td>             </tr>             <tr>                 <td>验证码：</td> <input type="text" v-model="form.code">             </tr>         </table>         <button @click="submit">注册</button>     </div> </template>     <script setup lang="ts"> import { reactive ,onMounted,onUnmounted,onActivated,onDeactivated} from 'vue'; const form = reactive({     login:"",     psd:"",     code:"" })   const submit = ()=>{     console.log(form) }   onMounted(()=>{     console.log("reg mounted,只执行一次") })   onActivated(()=>{     form.code = ''     console.log("reg onActivated,每次进来都执行一下") })   onDeactivated(()=>{     console.log("reg onDeactivated,每次离开都执行一下") })   onUnmounted(()=>{     console.log("reg onunmounted,有了keep-alive就不会执行了") })   </script>

（3）建立src\App.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<template>   <div>     <!-- 里面只能有一个组件,通过include指定缓存组件，也可呀通过exclude排除 max指定缓存的数量-->     <keep-alive :include="['Login']" :max=10>       <Login v-if="flag"></Login>       <Reg v-else></Reg>     </keep-alive>     <button @click="flag = !flag">切换</button>   </div> </template>   <script setup lang="ts"> import Login from './components/login/index.vue' import Reg from './components/reg/index.vue' import { ref } from 'vue'; const flag = ref(true) </script>

通过上面的测试可以发现，通过keep-alive可以指定缓存数据，并且可以配合生命周期函数进行使用更加方便。