Демістифікація методів життєвого циклу Vue

Використання компонентів у вашому застосунку – це одна справа, але дуже важливо знати, як вони працюють та розуміти методи їх життєвого циклу (коли вони створюються, додаються до DOM, оновлюються чи знищуються). Ви можете використати кожний з цих методів компоненту для виконання конкретних завдань. У цій статті я поясню різні методи життєвого циклу у Vue: як вони працюють та коли повинні бути реалізовані.

Що таке методи життєвого циклу?

Методи життєвого циклу дають змогу зрозуміти, як вбудовані компоненти працюють за лаштунками, дозволяють виконувати дії на різних етапах життєвого циклу компонентів. Вони також автоматично зв'язані з вашим компонентом, щоб ви могли використовувати стан і методи компонента. Дії методів життєвого циклу можна розділити на чотири стадії:

• Створення
• Встановлення
• Оновлення
• Знищення

Створення

Методи створення використовуються для виконання дій у вашому компоненті, перш ніж додавати його в DOM. Їх потрібно використовувати при налаштуванні компонента під час рендерингу на клієнтській та серверній стороні. Створення реалізується за допомогою методів beforeCreate() та created().

beforeCreate() стежить за даними та подіями ініціалізації вашого компонента. Тут дані все ще не реактивні, а події, що виникають впродовж циклу, ще не налаштовані. Погляньте на приклад нижче:

new Vue({
   data: {
     x: 5
    },
    beforeCreate: function () {
      // `this` вказує на екземпляр Vue
      console.log('x is: ' + this.x)
    }
  })
     // x: undefined

created() викликається, коли Vue налаштував події та спостереження даних. Тут події активні, і є доступ до реактивних даних, хоча шаблони ще не встановлені або не відтворені. Погляньте на блок коду нижче:

new Vue({
   data: {
     x: 5
    },
    created: function () {
      // `this` вказує на екземпляр Vue
      console.log('x is: ' + this.x)
    }
  })
     // x: 5

Встановлення

Найбільш використовувані методи при роботі з компонентами, методи встановлення дозволяють вам отримати доступ до вашого компонента безпосередньо перед і після першого рендеру. Їх потрібно використовувати, якщо DOM вашого компонента потрібно модифікувати безпосередньо перед або після того як його буде вперше відрендерено.

Оскільки методи встановлення не запускаються під час рендерингу на стороні сервера, їх не слід використовувати під час отримання даних для компонентів при ініціалізації. Метод created() найкраще підходить для цієї мети.

beforeMount() викликається після того, як наш шаблон було скомпільовано і віртуальний DOM оновлюється за допомогою Vue. Після цього властивість $el додається до екземпляра Vue, оновлюється реальний DOM і викликається метод mounted().

new Vue({
   beforeMount: function () {
      // `this` вказує на екземпляр Vue
      console.log(`this.$el is yet to be created`)
    }
  })

mounted() дає вам доступ до шаблонів і дозволяє взаємодіяти з DOM. Він в основному використовується під час отримання даних для компонента і модифікації DOM для інтеграції інших бібліотек та фреймворків. Подивімось на код нижче:

<div id="app">
   <p>Я текст всередині компонента.</p>
</div>

Використаємо метод mount(), щоб отримати ці дані з DOM:

new Vue({
   el: '#app',
    mounted: function() {
      console.log(this.$el.textContent) 
    }
  })
  // Я текст всередині компонента.

Оновлення

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

beforeUpdate() метод запускається після зміни даних у вашому компоненті, і цикл оновлення починається безпосередньо перед тим, як DOM виправлено та повторно відрендерено. Це дозволяє отримати новий стан будь-яких реактивних даних у вашому компоненті перед його рендерингом. Погляньте на блок коду нижче:

<div id="app">
  <p>{{counter}}</p>
</div>

Взаємодія з нашим екземпляром Vue:

new Vue({
   el: '#app',
    data() {
      return {
        counter: 0
      }
    },
     created: function() {
      setInterval(() => {
        this.counter++
      }, 1000)
    },

    beforeUpdate: function() {
      console.log(this.counter) // Логує значення counter кожну секунду, перед оновленням DOM.
    }
  })

updated() виконується після зміни даних у вашому компоненті та при повторному рендерингу DOM. Подивіться на приклад нижче:

<div id="app">
  <p ref="dom">{{counter}}</p>
</div>

Взаємодія з нашим екземпляром Vue дає:

new Vue({
   el: '#app',
    data() {
      return {
        counter: 0
      }
    },
     created: function() {
      setInterval(() => {
        this.counter++
      }, 1000)
    },
    updated: function() {
      console.log(+this.$refs['dom'].textContent === this.counter) // Виводить у консоль true кожну секунду.
    }
  })

Знищення

Методи знищення використовуються в останні моменти життєвого циклу компонента. Вони дозволяють виконувати такі дії, як очищення, коли ваш компонент знищено і виконуються, коли ваш компонент видаляється з DOM.

beforeDestroy() метод виконується безпосередньо перед знищенням вашого компонента. Тут ваш компонент все ще повністю присутній і може функціонувати. Якщо вам потрібно очистити події, beforeDestroy() – найкращий час для цього. Погляньте на блок коду нижче:

new Vue ({
  data() {
    return {
      coolMethods: 'Lifecycle methods are awesome!'
    }
  },

  beforeDestroy: function() {
    // Виконує процедуру вилучення для coolMethods. coolMethods в даному випадку є нічим.
    this.coolMethods = null
    delete this.coolMethods
  }
})

destroyed() метод викликається після того, як ваш компонент був знищений, його директиви були відв'язані і слухачі подій були видалені. Метод destroyed() може використовуватися для будь-якого останнього очищення або інформування віддаленого сервера про те, що компонент був знищений. Перегляньте приклад нижче:

import destructionUpdateBot from './destruction-site'
  new Vue ({
    destroyed: function() {
      console.log(this) // Нема що показати тут
      destructionUpdateBot.bomb('Target acquired.')
    }
  })

Підсумок

Ось і все. Це все чим є методи життєвого циклу Vue і не більше. Тепер ви повинні бути в змозі візуалізувати «подорож» екземпляру Vue як тільки його ініціалізовано, а також, при потребі, налаштувати ваш власний код за допомогою цих хуків чи методів. Ви завжди можете знайти й інші методи та властивості у документації Vue, які можна застосовувати разом із методами життєвого циклу при створенні ваших компонентів.