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