Хуки жизненного цикла Vue3

В Vue.js функции хуков жизненного цикла — это ряд методов, автоматически вызываемых Vue во время создания, обновления, уничтожения и других процессов экземпляра компонента. На этих этапах компонент запускает ряд функций, называемых "хуками жизненного цикла", позволяя разработчикам выполнять пользовательский код в определённые моменты.

Регистрация и использование хуков жизненного цикла

хук mounted: Этот хук срабатывает после того, как компонент завершает первоначальный рендеринг и создаёт DOM-узлы. Например:

export default {
  mounted() {
    console.log(`组件已挂载。`);
  }
}

Другие распространённые хуки: помимо mounted, существуют также такие хуки, как updated и unmounted, которые вызываются на разных этапах жизненного цикла экземпляра.

Примечания к хукам жизненного цикла

Контекст this:Во всех функциях-хуках жизненного цикла `this` автоматически указывает на экземпляр компонента, который их вызывает.

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

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

Ниже приведена диаграмма жизненного цикла экземпляра:

Ниже приведены функции-хуки жизненного цикла Vue.js

Название хукаМомент срабатывания
beforeCreateВызывается после инициализации экземпляра, перед наблюдением за данными и настройкой событий.
createdВызывается сразу после создания экземпляра. На этом этапе экземпляр завершил наблюдение за данными, вычисление свойств и методов, а также колбэки watch/event.
beforeMountВызывается перед началом монтирования: соответствующая функция рендеринга вызывается впервые.
mountedelТолько что созданнымvm.$elзаменён, и этот хук вызывается после того, как он смонтирован к экземпляру.
beforeUpdateВызывается при обновлении данных, перед повторным рендерингом и патчингом виртуального DOM.
updatedВызывается после повторного рендеринга и патчинга виртуального DOM из-за изменений данных.
beforeUnmountВызывается перед размонтированием экземпляра.
unmountedВызывается после размонтирования экземпляра.

Ниже приведено подробное описание хуков жизненного цикла компонента Vue:

В Vue.js функции-хуки жизненного цикла — это ряд методов, которые Vue автоматически вызывает во время создания, обновления, уничтожения и других процессов экземпляра компонента. С помощью этих функций-хуков можно выполнять определённые операции на разных этапах жизненного цикла компонента. Ниже приведено подробное описание хуков жизненного цикла компонента Vue:

1. beforeCreate

  • Описание: Вызывается после инициализации экземпляра, до наблюдения за данными и настройки событий.
  • Использование: На этом этапе можно инициализировать некоторые данные, не проксируемые Vue.

Пример:

Пример

beforeCreate() {
  console.log('beforeCreate:Экземпляр только что создан');
}

2. created

  • Описание: Вызывается сразу после создания экземпляра. На этот момент экземпляр завершил следующие настройки: наблюдение за данными, вычисление свойств и методов, а также watch/event-колбэки; этап монтирования ещё не начался.
  • Использование: На этом этапе можно получать доступ к данным и изменять их, но DOM ещё не смонтирован.

Пример:

Пример

created() {
  console.log('created:Создание экземпляра завершено');
}

3. beforeMount

  • Описание: Вызывается перед началом монтирования: соответствующая функция рендеринга вызывается впервые.
  • Использование: Выполните некоторые операции перед монтированием, например изменение структуры DOM, и т. д.

Пример:

Пример

beforeMount() {
  console.log('beforeMount:Перед началом монтирования');
}

4. mounted

  • Описание: elТолько что созданнымvm.$elзаменён, и этот хук вызывается после того, как он смонтирован к экземпляру.
  • Использование: На этом этапе вы можете манипулировать DOM и выполнять логику, связанную с DOM.

Пример:

Пример

mounted() {
  console.log('mounted:Экземпляр смонтирован');
}

5. beforeUpdate

  • Описание: Вызывается при обновлении данных, перед повторным рендерингом и применением патчей к виртуальному DOM.
  • Использование: На этом этапе вы можете получить доступ к состоянию до обновления.

Пример:

Пример

beforeUpdate() {
  console.log('beforeUpdate:Перед обновлением данных');
}

6. updated

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

Пример:

Пример

updated() {
  console.log('updated:Обновление данных завершено');
}

7. beforeUnmount（Vue 3）

  • Описание: Вызывается перед размонтированием экземпляра.
  • Использование: Выполните некоторые операции очистки перед размонтированием экземпляра, например удаление слушателей событий и т. д.

Пример:

Пример

beforeUnmount() {
  console.log('beforeUnmount:Перед размонтированием экземпляра');
}

8. unmounted（Vue 3）

  • Описание: Вызывается после размонтирования экземпляра.
  • Использование: Выполните некоторые операции очистки после размонтирования экземпляра, например уничтожение таймеров и т. д.

Пример:

Пример

unmounted() {
  console.log('unmounted:Экземпляр размонтирован');
}

Порядок выполнения хуков жизненного цикла

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate (срабатывает при изменении данных)
  6. updated (срабатывает при изменении данных)
  7. beforeUnmount
  8. unmounted

Пример

Ниже приведён полный пример компонента Vue, демонстрирующий использование всех функций-хуков жизненного цикла:

Пример

const LifecycleDemo = {
  template: `<div>{{ message }}</div>`,
  data() {
    return {
      message: 'Привет, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate:Экземпляр только что создан');
  },
  created() {
    console.log('created:Создание экземпляра завершено');
  },
  beforeMount() {
    console.log('beforeMount:Перед началом монтирования');
  },
  mounted() {
    console.log('mounted:Экземпляр смонтирован');
  },
  beforeUpdate() {
    console.log('beforeUpdate:Перед обновлением данных');
  },
  updated() {
    console.log('updated:Обновление данных завершено');
  },
  beforeUnmount() {
    console.log('beforeUnmount:Перед размонтированием экземпляра');
  },
  unmounted() {
    console.log('unmounted:Экземпляр размонтирован');
  }
};

const app = Vue.createApp({
  components: {
    LifecycleDemo
  }
});

app.mount('#app');

Попробуйте »

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

Хуки Composition API

Vue 3 представляет Composition API (Composition API), черезsetupфункцию, хуки жизненного цикла можно организовать более ясно с точки зрения логики. При использовании Composition API эти хуки определяются черезonXxxфункцию:

  • onMounted: эквивалентноmounted。
  • onBeforeUnmount: эквивалентноbeforeUnmount。
  • onUnmounted: эквивалентноunmounted。
  • onBeforeMount: эквивалентноbeforeMount。
  • onBeforeUpdate: эквивалентноbeforeUpdate。
  • onUpdated: эквивалентноupdated。
  • onCreatedиonBeforeCreateОни, как правило, не часто используются в Composition API, потому чтоsetupкод в нём будет выполняться на этапе создания.

Хуки жизненного цикла с Composition API:

Пример

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Компонент смонтирован!');
      // Выполните инициализацию здесь
    });

    onBeforeUnmount(() => {
      console.log('Компонент вот-вот будет размонтирован!');
      // Выполните очистку здесь
    });
  }
};

Преимущества Composition API:

  • Высокая переиспользуемость: хуки жизненного цикла можно комбинировать с другой логикой, что упрощает их инкапсуляцию и повторное использование.
  • Более ясная логика: приsetupреализации остальной логики внутри него в одной функции, что уменьшает разбросанность кода и сложность.
Другие расширения