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可以指定緩存數據，並且可以配合生命周期函數進行使用更加方便。