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

События жизненного цикла компонента Vue происходят во время его жизненного цикла от создания компонента до его удаления. Они позволяют нам добавлять обратные вызовы  на каждом этапе жизни компонента, когда это необходимо.

Vue выполняет события по порядку следующим образом:

setup: Это событие запускается перед всеми другими хуками, в том числе перед Create. У него нет доступа this компонента, поскольку на данный момент this еще не создан. Этот хук используется в основном для использования Composition API и обрабатывается так же, как Vue обрабатывает script setup. Мы обсудим composition API в дальнейших статьях.

beforeCreate: хук запускается, когда ваш компонент был инициализирован, но данные еще не стали реактивными, а события не прослушиваются.

created: вы сможете получить доступ к реактивным данным и событиям, но  template и DOM
не монтируется и не отрендерена. Этот хук хорошо подходит при запросе асинхронных данных с сервера, так как вам, скорее всего, понадобится эта информация понадобиться раньше, прежде чем виртуальный DOM будет смонтирован.

beforeMount: очень необычный хук, так как он запускается непосредственно перед первым рендерингом вашего компонента и не вызывается при Server-Side Rendering.

Mounted: наиболее используемый хук, поскольку он позволяет вам получить доступ к вашим элементам DOM, и можно было интегрировать библиотеки, отличные от Vue.

beforeUpdate: это запускается сразу после изменения вашего компонента и до того, как он будет перерисован. Это полезно для получения состояния реактивных данных до того, как они будут отображены.

updated: хук запускается сразу после хука beforeUpdate и повторно рендерит ваш компонент с новыми измененеными данными.

beforeUnMount: запускается непосредственно перед размонтированием вашего компонента. Компонент будет по-прежнему функционировать до тех пор, пока не будет вызван

unmount хук, что позволит вам остановить прослушивание событий и подписки на данные, чтобы избежать утечек памяти. Обратите внимание, это событие называется
beforeDestroy в Vue 2.x.

unmounted: все виртуальные элементы DOM и прослушиватели событий будут удалены из вашего экземпляра Vue.  Этот хук в Vue 2.x называется destroyed.

Упражнение для закрепления

Создайте и импортируйте пустой компонент, как это показано в упражнении.

Создайте скелет компонента.

Мы начнем с создания массива данных для итерации элементов в списке, установите для ключа значение n и выведите значение {{item}} внутри элемента <li>, используя
фигурные скобки:

<template>
  <div>
    <h1>Vue Lifecycle hooks</h1>
    <ul>
      <li v-for="(item, n) in list" :key="n">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
     ],
    }
  }
}
</script>

Добавьте beforeCreated() и created() в качестве хуков под секцией data(). Установите alert() внутри хуков, чтобы вы могли видеть, когда они срабатывают:

<script>
export default {
  data(){ /*…*/ },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
}
</script>

Теперь вы увидите, что данные хуки будут выполняться один за другим, сначала beforeCreate затем created.

Добавьте новый элемент кнопки внутри элемента <li>, который отображает вывод элемента. Затем добавьте директиву @click для привязки этой кнопки к методу с именем deleteItem и передачи элемента в качестве аргумента:

<template>
  <div>
    <h1>Vue Lifecycle hooks</h1>
    <ul>
      <li v-for="(item, n) in list" :key="n">{{ item }}
        <button @click="deleteItem(item)">Delete</button>
      </li>
    </ul>
  </div>
</template>

Добавьте метод с именем deleteItem в объект methods над вашими хуками, но ниже data(). Внутри этой функции передайте значение в качестве аргумента и отфильтруйте элементы из массив списка на основе этого значения. Затем замените существующий список новым списком:

<script>
  export default {
    data() { /*…*/ },
    /*…*/
    methods: {
      deleteItem(value) {
         this.list = this.list.filter(item => item !== value)
      },
    },
  }
</script>

Добавьте функции beforeUpdate() и updated() так же, как на шаге 9, и установите alert или
console.log внутри них:

<script>
  export default {
    /*...*/
    beforeUpdate() {
      alert('beforeUpdate: we know an update is about to happen, and have the data')
    },
    updated() {
      alert('updated: virtual DOM will update after you click OK')
    },
  }
</script>

Когда вы удаляете элемент списка, нажав кнопку Delete в браузере, вы должны увидеть эти предупреждения.

Добавьте beforeUnmount() и unmounted() к параметрам компонента. Установите alert или console.log() внутри этих хуков, чтобы вы могли видеть, когда они
запускаются:

<script>
export default {
  /*...*/
  beforeUnmount() {
    alert('beforeUnmount: about to blow up this component')
  },
  unmounted() {
    alert('unmounted: this component has been destroyed')
  },
}
</script>

Cмонтированные и созданные хуки жизненного цикла будут запускаться каждый раз при инициализации компонента. Если это
не является желаемым эффектом, рассмотрите возможность запуска кода, который вы хотите запустить один раз, из родительского
компонента, например из файла App.vue.

В этом упражнении мы узнали, что такое хуки жизненного цикла Vue, когда они срабатывают,
и в каком порядке они срабатывают. Это будет полезно в сочетании с запуском методов и управлением данными в ваших компонентах Vue.
Далее мы обсудим, как мы можем стилизовать наши компоненты Vue, используя <style>.