Vue3使用<script setup>语法时能否定义生命周期钩子方法？

问题结论 #

不能通过自定义同名函数的方式声明Vue生命周期钩子，你的写法不符合<script setup>下生命周期钩子的注册规则。

原因说明 #

onMounted是Vue官方提供的内置组合式API，不是约定的函数名。你自己声明的function onMounted() {}只是普通的自定义函数，没有和Vue的生命周期调度逻辑绑定，Vue不会自动识别执行该函数。

正确写法 #

你需要先从vue包中导入onMounted API，再将挂载后要执行的逻辑作为回调函数传入onMounted即可：

<script setup>
// 第一步：导入内置的onMounted API
import { onMounted } from 'vue'

const msg = 'Hello World!'
const props = defineProps({
  // 你的props定义
})

// 第二步：传入回调注册生命周期逻辑
onMounted(() => {
    console.log('the component is now mounted')
})
</script>

<template>
    <p>{{ msg }}</p>
</template>

内容的提问来源于stack exchange，提问作者Arjun Aravind