Жизненный цикл компонента Vue.js для детей

Question

В каком порядке создаются и монтируются дочерние компоненты?Я знаю, что жизненный цикл для одного компонента задокументирован здесь , но я не смог найти ничего, что описывалось при создании и подключении дочерних элементов.

Например, что такое создание и подключениезаказать для следующего компонента?

<template>
    <div class='parent'>
        <child-1/>
        <child-2/>
        <child-3/>
    </div>
</template>

Answer 1

Я нашел эта статья особенно полезной для объяснения порядка выполнения хуков родительского / дочернего жизненного цикла.Эта диаграмма, в частности, предлагает хорошее резюме процесса.

Также взгляните на этот пост от LinusBorg на форуме vuejs.

• beforeCreate() и created() родительского запуска в первую очередь.
• Затем выводится шаблон родителя, что означаетсоздаются дочерние компоненты.
• , поэтому теперь выполняются дочерние хуки beforeCreate() и created() соответственно.
• эти дочерние компоненты монтируются в элементы DOM, что вызывает их beforeMount() и mounted() hooks.
• и только после этого, после завершения шаблона родителя, родитель может быть подключен к DOM, так что, наконец, вызываются родительские хуки beforeMount() и mounted().