setup() (выполняется до beforeCreate и created) onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted Родитель: setup Родитель: beforeCreate Родитель: created Родитель: beforeMount Дочерний: setup Дочерний: beforeCreate Дочерний: created Дочерний: beforeMount Дочерний: mounted Родитель: mounted <template> <button @click="onClick"> {{ text }} </button> </template> <script lang="ts"> interface Props { text: string; } const props = defineProps<Props>(); interface Emit { myClick: [string]; } const emits = defineEmit<Emit>(); function onClick() { } </script> <template> <MyButton :text="Нажми на меня"></MyButton> </template>

В Vue 3 жизненный цикл компонента с Composition API начинается с вызова setup(), который выполняется до хуков beforeCreate и created в Options API.

Порядок вызова хуков для родительского и дочернего компонентов:

1. Родитель: setup
2. Родитель: beforeCreate
3. Родитель: created
4. Родитель: beforeMount
5. Дочерний: setup
6. Дочерний: beforeCreate
7. Дочерний: created
8. Дочерний: beforeMount
9. Дочерний: mounted
10. Родитель: mounted

Хуки жизненного цикла Composition API:

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted

Пример компонента с Composition API и типизацией на TypeScript:

<template>
  <button @click="onClick">
    {{ text }}
  </button>
</template>

<script lang="ts" setup>
interface Props {
  text: string;
}
const props = defineProps<Props>();

interface Emit {
  myClick: [string];
}
const emit = defineEmits<Emit>();

function onClick() {
  emit('myClick', 'clicked');
}
</script>

В родительском компоненте можно использовать <MyButton :text="'Нажми на меня'" @myClick="handleClick" />.

Таким образом, setup — это место для инициализации реактивных данных, функций и подписок, а хуки жизненного цикла позволяют реагировать на этапы жизненного цикла компонента.