vue3.0生命周期
使用前需引入
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted,
onActivated,
onDeactivated,
onErrorCaptured,
onRenderTracked,
onRenderTriggered
} from "vue";
// setup可以代替初始化之前和初始化之后
// onBeforeMount(() => {
// // 组件挂载前
// console.log("组件挂载前--》onBeforeMount");
// });
// onMounted(() => {
// // 组件挂载后
// console.log("组件挂载后--onMounted");
// });
// onBeforeUpdate(() => {
// // 组件跟新后之前
// console.log("组件跟新后之前-onBeforeUpdate");
// });
// onUpdated(() => {
// // 组件跟新之后
// console.log("组件跟新之后--onUpdated");
// });
// onBeforeUnmount(() => {
// // 组件销毁之前
// console.log("组件销毁之前--onBeforeUnmount");
// });
// onUnmounted(() => {
// // 组件销毁之后
// console.log("组件销毁之后--onUnmounted");
// });
// onActivated(() => {
// // 跟<keep-alive></keey-alive>配合使用
// // 组件活跃时触发
// });
// onDeactivated(() => {
// // 跟<keep-alive></keey-alive>配合使用
// // 组件不活跃时触发
// });
// onErrorCaptured(() => {
// // 捕获子组件异常时触发的函数
// });
// onRenderTracked((event) => {
// // 响应式跟踪(所有响应式状态)(数据状态包括定义的数组的length以及数组里的每个值)
// console.log("状态跟踪钩子函数------->>>>>>>>");
// console.log(event);
// });
// onRenderTriggered((event) => {
// // 单个响应式跟踪
// console.log("单个状态跟踪钩子函数-->>>>>>>>");
// console.log(event);
// });