vue3生命周期 onBeforeMount 、 onMounted 、 onBeforeUpdate 、 onUpdated 、 onBeforeUnmount 、onUnmounted 简介
<template>
<div @click="cahngeMsg">{{ msg }}</div>
</template>
<script setup>
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
} from 'vue';
// 最优先执行
const msg = ref('生命周期');
let msg2 = '生命周期';
const cahngeMsg = (value) => {
msg.value = '生命周期-数据更新';
msg2 = '生命周期-数据更新';
};
// 在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。
onBeforeMount(() => {
console.log('onBeforeMount---dom渲染前');
});
// 在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
onMounted(() => {
console.log('onMounted---dom渲染后');
});
// dom中绑定数据发生改变前触发
onBeforeUpdate(() => {
console.log('onBeforeUpdate---数据更新前', msg, msg2);
});
// 影响改变绑定数据发生前改变后触发
onUpdated(() => {
console.log('onUpdated---数据更新后', msg, msg2);
});
// 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
onBeforeUnmount(() => {
console.log('onBeforeUnmount---组件销毁前');
});
// 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
onUnmounted(() => {
console.log('onUnmounted---组件销毁后');
});
</script>
<style scoped></style>
