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

  • Vue3系列12–keep-alive缓存组件已关闭评论
  • 35 次浏览
  • A+
所属分类:Web前端
摘要

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

有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到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可以指定缓存数据,并且可以配合生命周期函数进行使用更加方便。