Skip to content

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

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

Регистрация хуков жизненного цикла

Например, хук onMountedmounted можно использовать для запуска кода после того, как компонент завершил первоначальную отрисовку и создал узлы в DOM:

vue
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`компонент теперь примонтирован.`)
})
</script>
js
export default {
  mounted() {
    console.log(`компонент теперь примонтирован.`)
  }
}

Также есть и другие хуки, которые будут вызываться на различных этапах жизненного цикла экземпляра, например onMounted, onUpdated и onUnmounted.mounted, updated и unmounted.

Все хуки вызываются с контекстом this, указывающим на текущий активный экземпляр, который их вызвал. Обратите внимание, что поэтому следует избегать использования стрелочных функций при объявлении хуков, так как в этом случае не удастся получить доступ к экземпляру компонента через this.

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

js
setTimeout(() => {
  onMounted(() => {
    // ЭТО НЕ СРАБОТАЕТ
  })
}, 100)

Обратите внимание, что это не означает, что вызов должен быть размещён внутри setup() или <script setup>. onMounted() может быть вызван во внешней функции, если стек вызовов синхронный и происходит изнутри setup().

Диаграмма жизненного цикла

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

Диаграмма жизненного цикла компонента

Обратитесь к API хуков жизненного циклаAPI хуков жизненного цикла за подробностями по всем хукам жизненного цикла и соответвующим вариантам использования.

Хуки жизненного циклаУже загружено