快捷導(dǎo)航

Vue3生命周期鉤子函數(shù)詳解

更新時間：2022年01月25日 09:29:59 作者：葉子_o

這篇文章主要為大家詳細(xì)介紹了Vue3生命周期鉤子函數(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue3生命周期鉤子函數(shù)的具體代碼，供大家參考，具體內(nèi)容如下

一、Vue3生命周期鉤子

setup() : 開始創(chuàng)建組件之前，在 beforeCreate 和 created 之前執(zhí)行，創(chuàng)建的是 data 和 method
onBeforeMount() : 組件掛載到節(jié)點上之前執(zhí)行的函數(shù)；
onMounted() : 組件掛載完成后執(zhí)行的函數(shù)；
onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù)；
onUpdated(): 組件更新完成之后執(zhí)行的函數(shù)；
onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù)；
onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù)；
onActivated(): 被包含在 <keep-alive> 中的組件，會多出兩個生命周期鉤子函數(shù)，被激活時執(zhí)行；
onDeactivated(): 比如從 A 組件，切換到 B 組件，A 組件消失時執(zhí)行；
onErrorCaptured(): 當(dāng)捕獲一個來自子孫組件的異常時激活鉤子函數(shù)。
PS：使用<keep-alive> 組件會將數(shù)據(jù)保留在內(nèi)存中，比如我們不想每次看到一個頁面都重新加載數(shù)據(jù)，就可以使用<keep-alive> 組件解決。

二、Vue2.x 和 Vue3.x 生命周期對比

三、Vue3生命周期鉤子函數(shù)的簡單使用

<template>
? <div>
? ? <h1>Vue3生命周期鉤子函數(shù)</h1>
? ? <h2>響應(yīng)式攔截數(shù)據(jù)data的值是：{{msg}}</h2>
? ? <p><button @click="changeMsg">點擊改變msg</button></p>
? </div>
</template>

<script>
import { reactive, onUnmounted, onUpdated, onMounted, toRefs } from 'vue'; // 引入需要的
export default {
? setup () {
? ? // 初始化項目工作都放在setup中
? ? console.log("當(dāng)前應(yīng)用程序被安裝了");
? ? const state = reactive({ // 定義狀態(tài)
? ? ? msg: '學(xué)而時習(xí)之', // 定義變量
? ? ? changeMsg: () => { // 定義方法
? ? ? ? state.msg = '不亦說乎'
? ? ? }
? ? })
? ? let timer = 0;
? ? let count = 0;
? ? onMounted(() => {
? ? ? console.log('頁面掛載完成，觸發(fā)了onMounted鉤子函數(shù)');
? ? ? timer = setInterval(() => {
? ? ? ? console.log('定時器正在運行中', count++)
? ? ? }, 1000)
? ? })
? ? onUpdated(() => {
? ? ? console.log('數(shù)據(jù)發(fā)生了更新，觸發(fā)了onUpdated鉤子函數(shù)')
? ? })
? ? onUnmounted(() => {
? ? ? console.log('頁面/組件退出，觸發(fā)了onUnmounted鉤子函數(shù)')
? ? ? // 如果不清楚，這些異步的行為就會常駐在內(nèi)存中，一定程度上會造成常駐內(nèi)存的不必要消耗，造成內(nèi)存泄露
? ? ? clearInterval(timer);
? ? })
? ? return {
? ? ? ...toRefs(state)
? ? }
? }
}
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: