是否可以使用 <script setup> 语法在 Vue 3 中定义生命周期方法？

Question

我定义了一个类似于下面的 SFC

<script setup>
const msg = 'Hello World!'
const props = defineProps({....})
.....
function onMounted() {
    console.log('the component is now mounted')
}
</script>

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

该onMounted函数根本没有执行。

我在 Vue 文档中找不到任何内容。是否可以像这样声明生命周期钩子？

Answer 1

带有设置脚本的 SFC 使用 CompositionAPI，因此您还必须以相同的方式定义生命周期挂钩：

import { onMounted } from 'vue'
onMounted(() => {
    console.log('mounted!')
})

https://v3.vuejs.org/api/composition-api.html#lifecycle-hooks