是否可以在使用 <脚本设置>语法的同时在 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