Vue3+TypeScript学习笔记（十四）

有时我们不希望组件被重新渲染影响使用体验，亦或者出于某些性能优化需求需要存储非活跃组件状态，可以使用keep-alive内置组件

1. keep-alive有三个props，分别是include、exclude和max，用于限制标签内缓存组件的数量。其中include和exclude可以接受（无需v-bind）、Array或RegExp（两个都需要v-bind），如果使用了include则只有include中的组件会被缓存，如果使用了exclude则exclude中的组件会被排除在缓存之外。
2. max接收一个number类型参数，用于限制缓存组件的最大数量。若超出限定范围，使用频率最少的组件会被取消缓存
3. 此外，使用keep-alive组件后还会生成两个新的生命周期钩子onActivated和onDeactivated，分别在组件由缓存-> 活跃时触发和组件从活跃-> 缓存时触发。

切记，onActivated和onDeactivated这两个函数必须写在子组件中，否则将无法触发！
完整代码：

App.vue

template>
    
  !-- KeepAlive内部仅允许一个活跃的组件,其他非活跃的组件将被缓存 -->
    
  KeepAlive>
    
    A v-if="flag">
    /A>
    
    B v-else>
    /B>
    
  /KeepAlive>
    
  button @click="flag = !flag">
    切换组件/button>
    
/template>
    

script setup lang="ts">

  import {
 ref, reactive }
     from 'vue'
  import A from './components/A.vue'
  import B from './components/B.vue'

  let flag = ref(true)
/script>
    

style scoped>
    /style>
    

A.vue

template>
    
    form>
    
        input type="checkbox" />
     span>
    A/span>
    
        br />
    
        input type="checkbox" />
     span>
    B/span>
    
    /form>
    
/template>
    

script setup lang="ts">

import {
 ref, reactive, onActivated, onDeactivated }
     from 'vue'
// 必须写在子组件中
onActivated(() =>
 {

    console.log('组件A的keep-active被触发了')
}
    )

onDeactivated(() =>
 {

    console.log('组件A的keep-active被缓存了')
}
    )
/script>
    

style scoped>
    /style>
    

B.vue

template>
    
    form>
    
        input type="checkbox" />
     span>
    C/span>
    
        br />
    
        input type="checkbox" />
     span>
    D/span>
    
    /form>
    
/template>
    

script setup lang="ts">

import {
 ref, reactive, onActivated, onDeactivated }
     from 'vue'

onActivated(() =>
 {

    console.log('组件B的keep-active被触发了')
}
    )

onDeactivated(() =>
 {

    console.log('组件B的keep-active被缓存了')
}
    )
/script>
    

style scoped>
    /style>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！