vue3生命周期-编程知识

vue3生命周期

原理

请添加图片描述
vue3也提供了Composition API形式的生命周期钩子，与vue2.x中钩子对应关系如下：
beforeCreate =setup（）
created =setup（）
beforeMount=onBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmounted===onUnmounted

示例：生命周期

HomeView.vue

<template><div ref="showDiv" v-text="username"></div><button @click="changeTitle">更新数据</button>
</template><script lang="ts" setup>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,
} from "vue";//获取页面组件
const showDiv = ref();const username = ref("张三");
//修改名称
const changeTitle = () => {username.value = "zhangsan";
};console.log("setup:开始创建组件之前，在beforeCreate和created之前执行");onBeforeMount(() => {console.log("onBeforeMount:组件挂载到节点上之前执行",showDiv.value?.innerText);
});
onMounted(() => {console.log("onMounted:组件挂载到节点上之后执行", showDiv.value?.innerText);
});onBeforeUpdate(() => {console.log("onBeforeUpdate:组件更新之前执行", showDiv.value?.innerText);
});
onUpdated(() => {console.log("onUpdated:组件更新完成之后执行", showDiv.value?.innerText);
});onBeforeUnmount(() => {console.log("onBeforeUnmount:组件卸载之前执行", showDiv.value?.innerText);
});
onUnmounted(() => {console.log("onUnmounted:组件卸载完成之后执行", showDiv.value?.innerText);
});
</script>

App.vue

<template><div><HomeView v-if="isDestroy" ></HomeView><button @click="destroyShowDiv">用v-if模拟组件销毁的过程</button></div><!-- <router-view /> -->
</template><script setup lang="ts">
import { ref } from "vue";
import HomeView from './views/HomeView.vue';const isDestroy = ref(true);
//用v-if模拟组件销毁的过程
const destroyShowDiv = () => {isDestroy.value = false;
};
</script>