你可以通过在生命周期钩子前面加上 “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>