使用 <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，因此您还必须以相同的方式定义 livecycle 挂钩：

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

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

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

Is it possible to define lifecycle methods in Vue 3 while using the <script setup> syntax?

vue.js

vuejs3

vue-sfc