Хуки життєвого циклу Vue.js

Хуки життєвого циклу Vue.js — це набір методів, які дозволяють запускати код на певних етапах життєвого циклу компонента Vue. Вони надають спосіб задіяти різні точки існування компонента, від створення до знищення. Ці хуки необхідні для виконання таких завдань, як ініціалізація даних, налаштування прослуховувачів подій і очищення ресурсів.

Життєвий цикл компонента Vue

Життєвий цикл компонента Vue можна розділити на кілька етапів. Кожна стадія пов’язана з певними хуками життєвого циклу, які можна використовувати для виконання коду. Ось основні етапи життєвого циклу компонента Vue:

• Створення: Виконується ініціалізація компонента.
• Монтаж: Компонент додається до DOM.
• Оновлення: Реактивні дані компонента змінюються.
• Знищення: Компонент видаляється з DOM.

Ключові хуки життєвого циклу

Vue.js надає кілька хуків життєвого циклу, які можна використовувати у своїх компонентах. Кожен хук відповідає певному етапу життєвого циклу. Ось найбільш часто використовувані гачки:

• created: Викликається після створення екземпляра компонента. Це гарне місце для отримання даних або ініціалізації стану компонента.
• mounted: Викликається після того, як компонент було змонтовано до DOM. Тут ви можете виконувати маніпуляції з DOM або запускати асинхронні операції.
• updated: Викликається після зміни реактивних даних компонента та оновлення DOM. Корисно для реагування на зміни даних.
• destroyed: Викликається перед знищенням компонента. Використовуйте цей хук, щоб очистити ресурси, такі як слухачі подій або таймери.

Приклади хуків життєвого циклу

Створений гачок

Хук created використовується для виконання дій після створення екземпляра компонента, але до його монтування. Ось приклад використання хука created для отримання даних:

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

Навісний гак

Хук mounted викликається після додавання компонента до DOM. Він ідеально підходить для виконання маніпуляцій з DOM або запуску асинхронних операцій, які вимагають, щоб компонент був у DOM. Ось приклад:

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

Оновлений хук

Хук updated викликається після зміни реактивних даних компонента та оновлення DOM. Це корисно для реакції на зміни даних. Ось приклад:

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

Зруйнований Крюк

Хук destroyed викликається перед знищенням компонента. Використовуйте цей хук, щоб виконувати очищення, наприклад, видаляти слухачів подій або зупиняти таймери. Ось приклад:

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

Висновок

Хуки життєвого циклу Vue.js необхідні для керування різними етапами життєвого циклу компонента. Розуміючи та використовуючи ці хуки, ви можете ефективно ініціалізувати дані, маніпулювати DOM, обробляти оновлення та очищати ресурси. Включіть перехоплювачі життєвого циклу в компоненти Vue.js, щоб створювати надійні та адаптивні додатки.