- A+
所属分类：Web前端
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。
开启keep-alive 生命周期的变化.
- 初次进入时： onMounted> onActivated
- 退出后触发
deactivated - 再次进入：
- 只会触发 onActivated
- 事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中
(1) 建立srccomponentsloginindex.vue
<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）建立srccomponentsregindex.vue
<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）建立srcApp.vue
<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可以指定缓存数据，并且可以配合生命周期函数进行使用更加方便。
