Какие знаешь хуки у компонентов Vue второй версии?

Хуки жизненного цикла компонентов в Vue 2

В Vue 2 система хуков жизненного цикла компонентов является фундаментальной частью архитектуры фреймворка. Эти хуки позволяют разработчикам выполнять код в определенные моменты существования компонента — от его создания до уничтожения. Всего существует 8 основных хуков, которые можно разделить на четыре категории.

Основные хуки жизненного цикла

1. Хуки инициализации и создания

• beforeCreate — вызывается самым первым, когда экземпляр компонента только инициализирован. На этом этапе данные (data), вычисляемые свойства (computed) и методы (methods) еще не доступны.

• created — вызывается после инициализации реактивных данных, вычисляемых свойств, методов и событий. Однако DOM-элемент еще не создан, поэтому работы с DOM здесь быть не должно.

export default {
  beforeCreate() {
    console.log('beforeCreate: данные еще не реактивны');
    console.log(this.message); // undefined
  },
  created() {
    console.log('created: данные теперь реактивны');
    console.log(this.message); // 'Hello Vue!'
    // Идеальное место для AJAX-запросов к API
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}

2. Хуки подключения к DOM

• beforeMount — вызывается перед началом монтирования компонента в DOM. Шаблон уже скомпилирован, но компонент еще не вставлен в документ.

• mounted — вызывается после того, как экземпляр компонента полностью смонтирован в DOM. На этом этапе можно безопасно работать с DOM-элементами через this.$el.

export default {
  beforeMount() {
    console.log('beforeMount: компонент готов к монтированию');
    console.log(this.$el); // undefined (еще нет DOM)
  },
  mounted() {
    console.log('mounted: компонент в DOM');
    console.log(this.$el); // [object HTMLElement]
    // Можно инициализировать сторонние библиотеки (например, карты, графики)
    this.initChart();
  }
}

3. Хуки обновления

• beforeUpdate — вызывается при изменении реактивных данных, но до того, как DOM будет перерисован. Полезен для получения состояния DOM перед обновлением.

• updated — вызывается после того, как виртуальный DOM был перерисован и изменения применены к реальному DOM. Здесь нужно быть осторожным, чтобы не вызвать бесконечный цикл обновлений.

export default {
  beforeUpdate() {
    console.log('beforeUpdate: данные изменились, DOM еще нет');
    console.log(this.$el.textContent); // старое значение
  },
  updated() {
    console.log('updated: DOM обновлен');
    console.log(this.$el.textContent); // новое значение
    // Можно выполнять операции, зависящие от обновленного DOM
  }
}

4. Хуки уничтожения

• beforeDestroy — вызывается перед началом уничтожения компонента. Компонент еще полностью функционален — данные, методы и события доступны. Идеальное место для очистки таймеров, отмены AJAX-запросов и удаления слушателей событий.

• destroyed — вызывается после полного уничтожения компонента. Все директивы отвязаны, все дочерние компоненты уничтожены, все слушатели событий удалены.

export default {
  beforeDestroy() {
    console.log('beforeDestroy: подготовка к уничтожению');
    // Очистка ресурсов
    clearInterval(this.timerId);
    window.removeEventListener('resize', this.handleResize);
  },
  destroyed() {
    console.log('destroyed: компонент уничтожен');
  }
}

Особенности и рекомендации по использованию

Порядок выполнения хуков важен для понимания:

1. beforeCreate → created → beforeMount → mounted (при первом рендеринге)
2. beforeUpdate → updated (при каждом изменении данных)
3. beforeDestroy → destroyed (при уничтожении компонента)

Ключевые сценарии использования:

• created — наиболее популярное место для получения данных с сервера, так как данные уже реактивны, но компонент еще не в DOM
• mounted — работа с DOM, инициализация сторонних библиотек
• beforeDestroy — критически важный хук для предотвращения утечек памяти

Важные ограничения:

• В beforeCreate нельзя обращаться к данным компонента
• В created и beforeMount нельзя работать с DOM-элементами
• В updated нужно избегать модификации реактивных данных, чтобы не создать бесконечный цикл обновлений

// Пример полного жизненного цикла
export default {
  data() {
    return {
      users: [],
      timerId: null
    }
  },
  
  beforeCreate() {
    console.log('1. beforeCreate');
  },
  
  async created() {
    console.log('2. created');
    // Загрузка данных
    this.users = await this.fetchUsers();
    
    // Запуск таймера
    this.timerId = setInterval(() => {
      console.log('Timer tick');
    }, 1000);
  },
  
  beforeMount() {
    console.log('3. beforeMount');
  },
  
  mounted() {
    console.log('4. mounted');
    // Работа с DOM
    const element = this.$el.querySelector('.user-list');
    if (element) {
      element.style.backgroundColor = '#f5f5f5';
    }
  },
  
  beforeUpdate() {
    console.log('5. beforeUpdate');
  },
  
  updated() {
    console.log('6. updated');
  },
  
  beforeDestroy() {
    console.log('7. beforeDestroy');
    // Очистка таймера
    clearInterval(this.timerId);
  },
  
  destroyed() {
    console.log('8. destroyed');
  },
  
  methods: {
    async fetchUsers() {
      // Логика получения данных
      return [];
    }
  }
}

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