Можно ли определить методы жизненного цикла в Vue 3, используя синтаксис ?

#vue.js #vuejs3 #vue-sfc

Вопрос:

Я определил 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. Возможно ли вообще объявить такие крючки жизненного цикла?

Комментарии:

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

Ответ №1:

SFC со сценарием установки использует CompositionAPI, поэтому вам также необходимо определить крючки livecycle таким же образом:

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

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