Vue.js: Хуки жизненного цикла ваших и сторонних компонентов

Lifecycle hooks (Хуки жизненного цикла) — это очень важная часть любого компонента. Нам, нашему приложению, часто нужно знать что происходит с компонентом, когда он создан, смонтирован, обновлен или уничтожен.

В компоненте мы можем отлавливать эти события используя соответствующие методы, например:

• created — экземпляр компонента создан
• mounted — экземпляр компонента cмонтирован
• updated — виртуальный DOM был обновлён из-за изменения данных
• destroyed — экземпляр компонента уничтожен
• и т.д. Документация

В коде нашего компонента это будет выглядеть так:

// MyComponent.vue <template>   <h1>Hello, {{ who }}</h1> </template>  <script> export default {   name: 'MyComponent',   data() {     return {       who: 'world'     }   },   mounted() {   // Сделаем что-то полезное после монтирования нашего компонента   } } </script> 

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

// Дочерний компонент ChildComponent.vue <template>   <div>     <div>Count: {{ counter }}</div>     <button @click="add">+1</button>   </div> </template>  <script> export default {   name: 'ChildComponent',   data() {     return {       counter: 0     }   },   updated() {     this.$emit('updated')   },   methods: {     add() {       this.counter++     }   } } </script> 

// Родительский компонент ParentComponent.vue <template>   <div>     <ChildComponent @updated="usefulMethod"/>   </div> </template>  <script> import ChildComponent from 'ChildComponent.vue'  export default {   name: 'ParentComponent',   components: {     ChildComponent   },   data() {     return {}   },   methods: {     usefulMethod() {     // Делаем что-то полезное по событию пришедшему из дочернего компонента     }   } } </script> 

Отлично, при обновлении дочернего компонента родительский компонент отлавливает событие updated и выполняется метод usefulMethod().

Все круто! Но что делать, если нам нужно встроить сторонний компонент, скачанный с npm или git и сделать что-то полезное в родительском компоненте, например при его монтировании? Залезать в код стороннего компонента, в хуке mounted порождать событие,… Не самая хорошая идея! А что если я вам скажу, что этого делать не надо! Вместо этого мы можем просто слушать событие! Именем этого события будет имя хука жизненного цикла, но к нему нужно дописать префикс @hook: так-то так @hook:имя_хука_жизненного_цикла, например: @hook:mounted, @hook:updated или @hook:destroyed.
В коде выглядеть это будет примерно так:

// Родительский компонент ParentComponent.vue  <template>   <div>     <ThirdPartyComponent @hook:mounted="usefulMethod"/>   </div> </template>  <script> import ThirdPartyComponent from 'vue-third-party-component' // Сторонний компонент  export default {   name: 'ParentComponent',   components: {     ThirdPartyComponent   },   data() {     return {}   },   methods: {     usefulMethod() {     // Делаем что-то полезное по хуку mounted произошедшему в стороннем компоненте     }   } } </script> 

Как мне кажется, это очень полезный функционал для работы, как со своими, так и со сторонними компонентами. Надеюсь и вам он будет полезен. Немного странно, что в документации о нем нет ни слова и некоторые фичи можно узнать только читая исходный код.

Спасибо за прочтение. Читайте доку и исходники! И с наступающим новым 2020 годом!