Поиск по сайту:

Понимание хуков жизненного цикла Vue.js

Введение

Крючки жизненного цикла — это окно в то, как библиотека, которую вы используете, работает за кулисами. Крючки жизненного цикла позволяют узнать, когда ваш компонент создан, добавлен в DOM, обновлен или уничтожен.

Эта статья познакомит вас с хуками создания, монтирования, обновления и уничтожения в Vue.js.

Предпосылки

Чтобы пройти этот урок, вам понадобится:

  • Знакомство с Vue.js. Прочтите серию статей Как разрабатывать веб-сайты с помощью Vue.js, чтобы узнать больше.

Понимание хуков создания (инициализация)

Перехватчики создания — это первые перехватчики, которые запускаются в вашем компоненте. Они позволяют вам выполнять действия еще до того, как ваш компонент будет добавлен в DOM. В отличие от любых других хуков, хуки создания также запускаются во время рендеринга на стороне сервера.

Используйте хуки создания, если вам нужно что-то настроить в своем компоненте, как во время рендеринга клиента, так и рендеринга сервера.

У вас не будет доступа к DOM или целевому элементу монтирования (this.$el) внутри хуков создания.

перед созданием

Хук beforeCreate запускается при инициализации вашего компонента — data не был сделан реактивным, а events еще не настроены:

<script>
export default {
  beforeCreate() {
    console.log('At this point, events and lifecycle have been initialized.')
  }
}
</script>

В этом примере при запуске хука beforeCreate этот фрагмент будет регистрировать сообщение:

Output
At this point, events and lifecycle have been initialized.

созданный

Хук created запускается до того, как шаблоны и виртуальный DOM будут смонтированы или отображены — вы можете получить доступ к активным реактивным данным и событиям:

<template>
  <div ref="example-element">{{ propertyComputed }}</div>
</template>

<script>
export default {
  data() {
    return {
      property: 'Example property.'
    }
  },

  computed: {
    propertyComputed() {
      return this.property
    }
  },

  created() {
    console.log('At this point, this.property is now reactive and propertyComputed will update.')
    this.property = 'Example property updated.'
  }
}
</script>

В этом примере фрагмент будет хранить property как Example property. Когда запускается хук created, он регистрирует сообщение:

Output
At this point, this.property is now reactive and propertyComputed will update.

А затем свойство изменяется на Пример обновления свойства.

Позже в жизненном цикле {{ propertyComputed }} будет отображаться как Example property updated вместо Example property.

На этом шаге вы рассмотрели несколько примеров хуков создания и готовы перейти к следующей части жизненного цикла — монтированию хуков.

Общие сведения о монтажных хуках (вставка DOM)

Монтажные крючки часто используются чаще всего. Они позволяют вам получить доступ к вашему компоненту непосредственно до и после первого рендеринга. Однако они не запускаются во время рендеринга на стороне сервера.

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

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

Примечание. Вместо этого используйте created (или created и activated для компонентов keep-alive). Особенно, если вам нужны эти данные во время рендеринга на стороне сервера.

перед креплением

Хук beforeMount запускается непосредственно перед первоначальным рендерингом и после компиляции шаблона или функций рендеринга:

<script>
export default {
  beforeMount() {
    console.log(`At this point, vm.$el has not been created yet.`)
  }
}
</script>

В этом примере, когда запускается хук beforeMount, этот фрагмент будет регистрировать сообщение:

Output
At this point, vm.$el has not been created yet.

смонтированный

В хуке mounted у вас будет полный доступ к реактивному компоненту, шаблонам и визуализируемому DOM (через this.$el).

Используйте mounted для изменения DOM, особенно при интеграции библиотек, отличных от Vue:

<template>
  <div ref="example-element">Example component.</div>
</template>

<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
    console.log(this.$el.textContent) // Example component.
  }
}
</script>

В этом примере при запуске хука mounted этот фрагмент будет регистрировать сообщение:

Output
At this point, vm.$el has been created and el has been replaced.

Кроме того, будет зарегистрировано сообщение Example content. (this.$el.textContent).

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

Понимание хуков обновления (разница и повторный рендеринг)

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

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

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

перед обновлением

Хук beforeUpdate запускается после изменения данных в вашем компоненте и начинается цикл обновления, прямо перед исправлением и повторным рендерингом DOM.

Используйте beforeUpdate, если вам нужно получить новое состояние любых реактивных данных в вашем компоненте до того, как он будет обработан:

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
    // Logs the counter value every second, before the DOM updates.
    console.log(this.counter)
  }
}
</script>

Во-первых, этот фрагмент будет хранить counter как 0. Когда запускается хук created, он увеличивает counter каждые 1000 мс. Когда запускается хук beforeUpdate, этот фрагмент записывает сообщение:

Output
At this point, Virtual DOM has not re-rendered or patched yet.

Также регистрируется число для counter.

обновлен

Хук updated запускается после изменения данных в вашем компоненте и повторного рендеринга DOM.

Используйте updated, если вам нужно получить доступ к DOM после изменения свойства:

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has re-rendered and patched.`)
    // Fired every second, should always be true
    console.log(+this.$refs['example-element'].textContent === this.counter)
  }
}
</script>

Во-первых, этот фрагмент будет хранить counter как 0. Когда запускается хук created, он увеличивает counter каждые 1000 мс. Когда запускается хук updated, этот фрагмент регистрирует сообщение:

Output
At this point, Virtual DOM has re-rendered and patched.

И логическое значение true регистрируется, потому что отображаемое значение и текущее значение равны.

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

Понимание хуков разрушения (Teardown)

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

перед уничтожением

beforeDestroy запускается непосредственно перед демонтажем. Ваш компонент по-прежнему будет полностью присутствовать и функционировать.

Используйте beforeDestroy, если вам нужно очистить события или реактивные подписки:

<script>
export default {
  data() {
    return {
      exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
    }
  },

  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
    // Perform the teardown procedure for exampleLeakyProperty.
    // (In this case, effectively nothing)
    this.exampleLeakyProperty = null
    delete this.exampleLeakyProperty
  }
}
</script>

Этот фрагмент сначала сохранит exampleLeakyProperty. Когда запускается хук beforeDestroy, этот фрагмент записывает сообщение:

Output
At this point, watchers, child components, and event listeners have not been torn down yet.

А затем exampleLeakyProperty удаляется.

уничтожен

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

Используйте destroyed, если вам нужно выполнить последнюю очистку или сообщить удаленному серверу, что компонент был уничтожен:

<script>
import ExampleAnalyticsService from './example-analytics-service'

export default {
  destroyed() {
    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
    console.log(this)
    ExampleAnalyticsService.informService('Component destroyed.')
  }
}
</script>

Во-первых, этот фрагмент будет импортировать ExampleAnalyticsService. Когда запускается хук beforeDestroy, этот фрагмент записывает сообщение:

Output
At this point, watchers, child components, and event listeners have been torn down.

То, что осталось от компонента, будет выведено на консоль, а ExampleAnalyticsService будет передано сообщение Компонент уничтожен..

На этом вы завершили общий обзор хуков жизненного цикла Vue.js.

Другие крючки

Есть еще два хука, activated и deactivated. Они предназначены для компонентов keep-alive, тема которых выходит за рамки этой статьи.

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

Заключение

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

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