Обзор порядка выполнения жизненного цикла родительско-дочернего компонента в Vue

Vue.js

фон проблемы

В одном компоненте порядок выполнения ловушек таков: beforeCreate->created->mounted->...->destroyed, но когда компоненты «родитель-потомок» вложены друг в друга, родительский и дочерний компоненты имеют свои собственные независимые функции ловушек,Как эти хуки этих родительско-дочерних компонентов интегрируются и выполняются, и каков порядок выполнения?

Порядок выполнения жизненного цикла родительско-дочернего компонента

Компоненты, соответственно, печатают журналы в своих функциях ловушек, чтобы соблюдать порядок выполнения. Полученный результат такой, как показано на рисунке, сначала создается родительский компонент, а затем создается дочерний компонент, сначала монтируется дочерний компонент, а затем монтируется родительский компонент.


父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted

После того, как дочерний компонент смонтирован, родительский компонент не смонтирован. Таким образом, когда данные компонента отображаются, данные API получаются в смонтированном родительском компоненте, но смонтированный дочерний компонент не может быть получен.

Внимательно изучите порядок выполнения хуков жизненного цикла родительско-дочернего компонента, вы обнаружите, что созданный хук выполняется в порядке снаружи внутрь, поэтому решение для родительско-дочернего компонента для передачи данных интерфейса является:

  • Инициировать запрос на получение данных в созданном и получать эти данные в созданном или смонтированном подкомпоненте по очереди.

Порядок выполнения жизненного цикла родительско-дочернего компонента

Загрузить процесс рендеринга

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

процесс обновления

父beforeUpdate->子beforeUpdate->子updated->父updated

процесс разрушения

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

Простая версия обычных хуков

父create->子created->子mounted->父mounted

Дополнительный порядок выполнения хука одного компонента

активированные, деактивированные - уникальные хуки, когда компоненты поддерживают активность

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. activated
  8. deactivated
  9. beforeDestroy
  10. destroyed
  11. errorCaptured

Суммировать

  • Когда выполняется beforeCreate: и данные, и el не инициализируются, и значение не определено
  • При создании выполняется: данные объекта данных, наблюдаемые экземпляром Vue, были настроены, и значение данных может быть получено, но корневой элемент DOM el, используемый экземпляром Vue, не был инициализирован.
  • Когда выполняется beforeMount: и данные, и el были инициализированы, но el не преобразуется в данные в это время, а значение el является «виртуальным» узлом элемента.
  • Когда выполняется монтирование: в это время el был отрендерен и смонтирован в экземпляре.
  • Когда срабатывает beforeUpdate и updated, данные в el уже отрендерены, но dom компонента обновляется только при вызове хука update.
  • В созданном хуке вы можете работать с данными данных.В это время вы можете сделать запрос данных и назначить возвращаемые данные данным
  • Смонтированный хук работает с смонтированным DOM, который уже отрендерен на странице.
  • Хотя обновленная функция будет запускаться при изменении данных, она не может точно определить, какое значение атрибута было изменено, поэтому в реальной ситуации используйтеcomputedилиwatchфункция для прослушивания изменений свойств и выполнения некоторых других операций.
  • Все крючки жизненного цикла автоматически связывают этот контекст к экземпляруВы не можете использовать функции стрелок для определения метода жизненного цикла.(например, создано: () => this.fetchTodos()),приведет к тому, что это укажет на родителя.
  • При использовании vue-router иногда необходимо кэшировать состояние компонента.В это время созданный хук не будет вызываться повторно.Если нашему подкомпоненту нужно выполнять определенные операции каждый раз при загрузке или переключении состояния, вы можете использовать метод активированный крючок, спусковой крючок.
  • Крюк родительского подкапонта не ждет возврата запроса, запрос асинхронный, а дизайн Vue не выполняется, поскольку запрос не отвечает, не выполняя задний крюк. Следовательно, мы должны контролировать время исполнения подкомпонентного крючка через V-iF

Обратите внимание, что когда родительский компонент передает данные интерфейса дочернему компоненту, обязательно добавьте v-if="passed interface data" к метке дочернего компонента.

Отправьте запрос на получение данных в созданном родительском компоненте и передайте их дочернему компоненту через проп. Дочерний компонент принимает данные, переданные от родительского компонента, в созданные или смонтированныеЭто проблематично.

Когда родительский компонент вызывает интерфейс для передачи данных дочернему компоненту, ответ интерфейса явно асинхронный. Это приведет к тому, какой хук вы делаете запрос в родительском компоненте и какой хук в дочернем компоненте получает данные. недоступны. Когда монтирование дочернего компонента завершено, запрос родительского компонента может возвращать данные в это время. В результате данные, передаваемые из родительского компонента в дочерний, не определены.

Обходной путь 1:

Добавьте условие при рендеринге дочернего компонента, data1 — это данные, возвращаемые родительским компонентом, вызывающим интерфейс. Визуализация дочерних компонентов при наличии данных. Это создает естественную блокировку. После того, как запрос в созданном родительском компоненте вернет данные, будет выполнен созданный и смонтированный дочерний компонент. Наконец, выполните монтирование родительского компонента.

<div class="test">
    <children v-if="data1" :data="data1" ></children>
</div>

Обходной путь 2:

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

watch:{
    data:{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.data = newVal
          this.data = newVal.url ? newVal.url : ''
        })
      }
    },
}

Нажмите, чтобы вызвать интерфейс из родительского компонента и отобразить дочерний компонент, дочерний компонент получает данные и прослушивает метод, вызываемый в часах, и отображает его.

Далее следует подкомпонент, а data1 — это данные, переданные из подкомпонента. При создании и монтировании данные1, возвращаемые вызывающим интерфейсом родительского компонента, не могут быть получены. Только часы могут отслеживать данные1. И вызовите метод для рендеринга дочернего компонента.

props:['data1'],
watch:{
    data1:{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.data1 = newVal
          this.showData1(this.data1)
        })
      }
    },
}
Категории