生命周期钩子

这些生命周期钩子注册函数只能在setup()期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例。

官网给出的映射如下：

示例

查看生命周期钩子的执行顺序

<template><div class="home"><div>{{userInfo.name}}</div><div>{{userInfo.age}}</div><button @click="changeUserName">修改名称</button><button @click="changeUserAge">修改年龄</button></div></template><script lang="ts">import {defineComponent, ref, reactive, toRef, toRefs,onMounted, onUpdated, onUnmounted,} from 'vue';export default defineComponent({name: 'Home',beforeCreate() {console.log('beforeCreate');},created() {console.log('created');},setup(props, context) {console.log('setup');onMounted(() => {console.log('onMounted!');});onUpdated(() => {console.log('onUpdated!');});onUnmounted(() => {console.log('onUnmounted!');});},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');},});</script>

执行结果：

从上面的执行结果可以看出setup函数是在beforeCreate、created函数之前执行，还有就是生命周期钩子函数onMounted比mounted先执行，其他生命周期也是同理。

如果觉得《vue3基础-组合式API之生命周期钩子》对你有帮助，请点赞、收藏，并留下你的观点哦！