// comp.vue <template> <ul v-if="products != null"> <li v-for="(pr, i) in products">{{pr}}</li> </ul> </template> <script> import {getProducts} from ""; import {ref} from "vue"; const products = ref(null); onMounted(() => { getProducts().then(result => products.value = result) }) </script> setup() (выполняется до beforeCreate и created) onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted Родитель: setup Родитель: beforeCreate Родитель: created Родитель: beforeMount Дочерний: setup Дочерний: beforeCreate Дочерний: created Дочерний: beforeMount Дочерний: mounted Родитель: mounted <template> <div> <slot name=""></slot> </div> </template>

В представленном Vue 3 коде используется Composition API с функцией setup и хуками жизненного цикла.

• setup() вызывается перед beforeCreate и created, инициализирует реактивные данные.
• onMounted() вызывается после монтирования компонента, здесь происходит асинхронный вызов getProducts() и обновление реактивной переменной products.

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

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

Это означает, что дочерний компонент полностью инициализируется и монтируется до того, как родительский компонент завершит монтирование.

Пример использования хуков в Composition API:

<script setup>
import { ref, onMounted } from 'vue';

const products = ref(null);

onMounted(async () => {
  products.value = await getProducts();
});
</script>

<template>
  <ul v-if="products">
    <li v-for="(pr, i) in products" :key="i">{{ pr }}</li>
  </ul>
</template>

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