有時候我們不希望組件被重新渲染影響使用體驗；或者處于性能考慮，避免多次重復渲染降低性能，而是希望組件可以快取下來,維持當前的狀態，這時候就需要用到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可以指定快取資料，并且可以配合生命周期函式進行使用更加方便，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501644.html
標籤：其他