vuecomputed缓存机制有什么用（Vue3系列12–keep-alive缓存组件）
导读：有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。...
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑 ，避免多次重复渲染降低性能 。而是希望组件可以缓存下来,维持当前的状态 。这时候就需要用到keep-alive组件 。
开启keep-alive生命周期的变化.
初次进入时：onMounted> onActivated 退出后触发deactivated 再次进入： 只会触发 onActivated 事件挂载的方法等 ，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中(1) 建立src\components\login\index.vue
（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可以指定缓存数据 ，并且可以配合生命周期函数进行使用更加方便 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！