生命周期钩子

setup 生命周期钩子

你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

生命周期钩子

onBeforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

onMounted
在实例挂载完成后被调用，这时候传递给 app.mount 的元素已经被新创建的 vm.$el 替换了。如果根实例被挂载到了一个文档内的元素上，当 mounted 被调用时， vm.$el 也会在文档内。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick。

onBeforeUpdate
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

onUpdated
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

onBeforeUnmount
在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。

onUnmounted
卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

onErrorCaptured
在捕获一个来自后代组件的错误时被调用。

onRenderTracked
跟踪虚拟 DOM 重新渲染时调用。

onRenderTriggered
当虚拟 DOM 重新渲染被触发时调用。

onActivated
被 keep-alive 缓存的组件激活时调用

onDeactivated
被 keep-alive 缓存的组件失活时调用。

生命周期官方文档

https://v3.cn.vuejs.org/api/options-lifecycle-hooks.html#beforecreate

示例

<template>
	<div>
		<button @click="counter">点击计数 : {{count}}</button>
	</div>
	<div>
		{{user.name}}
	</div>
</template>
<script setup>
import {ref, reactive, onMounted} from "Vue";
const count = ref(0);
const user  = ref({
	name : "LessCode",
	age  : 10
});
const counter = ()=>{
	count.value ++;
	user.value.name = 'test';
};
onMounted(()=>{
	console.log('onMounted');
});
</script>