Vue.js

Оформление

Оглавление

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

Каждый экземпляр компонента Vue при создании проходит ряд шагов инициализации — например, ему необходимо настроить наблюдение за данными, скомпилировать шаблон, подключить экземпляр к 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().

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

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

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

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

Редактировать эту страницу на GitHub