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 годом!