Vue.js

Внешний вид

Содержание

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

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

Исправить эту страницу на GitHub