Cобытия жизненного цикла компонента

Друзья, привет!

Практическое понимание событий жизненного цикла компонентов даёт возможность быстро анализировать и разрабатывать бизнес-задачи. Мы разберём 7 событий жизненного цикла компонентов на примере Composition API в Vue3 фреймворке.

onBeforeMount()

Событие жизненного цикла срабатывает до появления компонента в DOM дереве.

• Первым из всех событий жизненного цикла имеет доступ к реактивным данным.

• Компонент создан. Первая фаза рендеринга не началась. Компонента ещё нет в DOM дереве.

Сигнатура метода

onBeforeMount(callback(): void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: получение данных с сервера

Мы можем запросить данные с сервера сразу после настройки реактивного состояния компонента в <script setup>. Компонент ещё не виден пользователю, но необходимые данные с сервера уже запрошены.

// <script setup>
import {onBeforeMount, ref} from "vue";

const users = ref<{id: number, name: string}[]>([]);

onBeforeMount(async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  users.value = await response.json()
})

// template
<ul>
  <li v-for="user of users">{{user.name}}</li>
</ul>

Пример: регистрация событий DOM

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

// <script setup>
import {onBeforeMount} from "vue";
const width = ref(window.innerWidth)

const reszie = () => {
  width.value = window.innerWidth;
}

onBeforeMount(() => {
  window.addEventListener('resize', resize);
})

onMounted()

Событие жизненного цикла срабатывает после появления компонента в DOM дереве.

• Компонент считается смонтированным, если все дочерние синхронные компоненты смонтированы.

• Компонент отображается в DOM дереве.

Сигнатура метода

onMounted(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: инициализация сторонней библиотеки

Для примера возьмем библиотеку отображения графиков Chart.js. Данная библиотека требует на вход ссылку на DOM элемент. Хук onMounted срабатывает после отображения шаблона компонента в DOM дереве. Реактивная ссылка chartRef будет иметь указатель на canvas элемент.

// <script setup>
import {onMounted, ref} from "vue";
const canvasRef = ref<HTMLCanvasElement | null>(null)
const chartRef = shallowRef<ChartJS | null>(null)


onMounted(() => {
  chartRef.value = new ChartJS(canvasRef.value, config as any)
})

// template
<canvas ref="canvasRef"/>

Пример: получение данных из внешнего источника

Если после отображения компонента нам необходимы дополнительные данные с сервера, то используем onMounted() событие.

// <script setup>
import {onMounted, ref} from "vue";

const users = ref<{id: number, name: string}[]>([]);

onMounted(async () => {
  const response = await fetch("http://localhost:3000/users");
  users.value = await response.json()
})

// template
<ul>
  <li v-for="user of users">{{user.name}}</li>
</ul>

Пример: регистрация событий DOM

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

// <script setup>
import {onMounted, ref} from "vue";
const width = ref(window.innerWidth)

const reszie = () => {
  width.value = window.innerWidth;
}

onMounted(() => {
  window.addEventListener('resize', resize)
})

onBeforeUpdate()

Срабатывает до обновления DOM дерева. Используется для взаимодействия с DOM деревом. Безопасно изменять состояние компонента.

Сигнатура метода

onBeforeUpdate(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: удаление ссылок на компоненты

Если нам необходимо хранить массив ссылок на элементы шаблона нашего компнента, то при изменении кол-ва элементов, необходимо обновить реактивные данные. Если мы используе ref с v-for в шаблоне компонента, то нет гарании, что массив ref будет хранить туже последовательность, что и данные в v-for. Нам нужно самим управлять массивом HTML элементов.

// <script setup>
import {onBeforeUpdate, shallowRef} from "vue";
const liElements = shallowRef<(HTMLLIElement | undefined) []>([])

onBeforeUpdate(() => {
  liElements.value = []
})

const onUpdateRef = (e: any, index: number) => {
  liElements.value[index] = e
}

// template
<li v-for="(user, index) in users"
          :ref="e => onUpdateRef(e, index)"
          :key="user.id"
          tabindex="1"
          @click="onItemClick(user.id)">{{user.name}}</li>

onUpdated()

Callback функция срабатывает после изменения DOM дерева компонентов в соответствии с реактивным сотоянием компонента. Различные изменения состояния объединяются в один цикл рендеринга компонента для отпимизации производительности.

Сигнатура метода

onMounted(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: получение применённого реактивного стостояния в DOM дереве.

Пользователь нажимает на кнопку, реактивное состояние компонента изменяется и применяется к DOM. Callback в onUpdated методе содержит одинаковые данные как в DOM, так и в реактивном состоянии.

// <script setup>
import {onUpdated, ref} from "vue";

const count = ref(0)
const divRef = ref<HTMLDivElement | null>(null)

onUpdated(() => {
  const divCountValue = parseInt(divRef.value.innerHTML)
  // divCountValue === count => true
  console.log(divCountValue === count.value)
})

// template
  <div ref="divRef">{{count}}</div>
  <button @click="count++">Count</button>

onBeforeUnmounted()

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

Сигнатура метода

onBeforeUnmounted(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: удаление таймеров созданных в компоненте

Регистрация событий, таймеров происходит в onBeforeMount или onMounted в зависимости от целей задачи. Очистка зарегестрированных обработчиков выполняется в onBeforeUnmount.

// <script setup>
let intervalId;

onMounted(() => {
  intervalId = setInterval(() => {
    // logic here
  },1000)
})

onBeforeUnmount(() => {
  clearInterval(intervalId)
})

onUnmounted()

Компонент уничтожен. Все реактивные состояния остановлены. Мы можем взаимодействовать с созданными подписками таймеров, DOM или подключением к серверу.

Сигнатура метода

onUnmounted(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример использования

Удаление обработчика события изменения окна.

// <script setup>
import {onMounted, onUnmounted, ref} from "vue";
const size = ref({width: window.innerWidth, height: window.innerHeight})

const resize = () => {
  size.value.width = window.innerWidth
  size.value.height = window.innerHeight
}

onMounted(() => {
  window.addEventListener('resize', resize)
})

onUnmounted(() => {
  window.removeEventListener('resize', resize)
})

onErrorCaptured()

Метод предоставляет возможность перехватывать ошибки в компоненте. Ошибки кода в <script setup>, рендеринга, обработчиков событий, функций жизненного цикла компонента, наблюдателей, директив и переходов.

Сигнатура метода

onBeforeUnmounted(callback: () => void): void

Выполнение функции callback синхронное. Можно выполнять асинхронный код в callback функции. Vue фреймворк не будет ждать завершение исполнения асинхронного кода.

Пример: отображение ошибки из дочернего компонента

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

// <script setup>
const error = ref<string | undefined>()

onErrorCaptured((err, instance, info) =>{
  error.value = err.message;
})

// template
  <ErrorComponent v-if="!error"/>
  <div v-if="error">Error: {{error}}</div>

Резюме

Понимание событий жизненного цикла компонента упрощает реализацию бизнес-задач.

Ссылка на исходный код.

Статья подготовлена в преддверии старта курса Vue.js Developer. Узнать подробнее о курсе.