Vue.js

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

Примечание

Все хуки жизненного цикла автоматически привязывают свой контекст this к экземпляру, поэтому есть доступ к локальному состоянию, вычисляемым свойствам и методам. Нельзя использовать стрелочные функции при определении хука жизненного цикла (например, created: () => this.fetchTodos()). Причина в том, что стрелочные функции привязываются к родительскому контексту, поэтому this не будет экземпляром компонента и this.fetchTodos будет неопределён.

# beforeCreate

  • Тип: Function

  • Подробности:

    Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.

  • См. также: Диаграмма жизненного цикла

# created

  • Тип: Function

  • Подробности:

    Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил: наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.

  • См. также: Диаграмма жизненного цикла

# beforeMount

  • Тип: Function

  • Подробности:

    Вызывается непосредственно перед началом монтирования: функция render будет вызываться в первый раз.

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

# mounted

  • Тип: Function

  • Подробности:

    Вызывается после монтирования экземпляра, где элемент, переданный в app.mount, заменяется вновь созданным vm.$el. Если корневой экземпляр примонтирован на элемент документа, то vm.$el также будет элементом документа при вызове mounted.

    Обратите внимание: mounted не гарантирует, что все дочерние компоненты будут уже примонтированы. Если необходимо дождаться, пока будут отрисованы все дочерние компоненты, то можно воспользоваться vm.$nextTick внутри mounted:

    mounted() {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // отрисовки всех представлений
  })
}
    1
    2
    3
    4
    5
    6

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

# beforeUpdate

  • Тип: Function

  • Подробности:

    Вызывается при изменении данных, перед обновлением DOM. В этом хуке удобно получить доступ к существующему DOM перед обновлением, например, чтобы вручную удалить слушатели событий, которые были добавлены.

    Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.

  • См. также: Диаграмма жизненного цикла

# updated

  • Тип: Function

  • Подробности:

    Вызывается после того, как обновится виртуальный DOM из-за изменений данных.

    DOM компонента уже будет обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции, связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.

    Обратите внимание: updated не гарантирует, что все дочерние компоненты также были отрисованы повторно. Если необходимо дождаться повторной отрисовки всех дочерних компонентов, можно воспользоваться vm.$nextTick внутри updated:

    updated() {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // переотрисовки всех представлений
  })
}
    1
    2
    3
    4
    5
    6

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

# activated

  • Тип: Function

  • Подробности:

    Вызывается при активации компонента внутри <keep-alive>.

    Не вызывается при отрисовке на стороне сервера.

  • См. также:

# deactivated

  • Тип: Function

  • Подробности:

    Вызывается после деактивации компонента внутри <keep-alive>.

    Не вызывается при отрисовке на стороне сервера.

  • См. также:

# beforeUnmount

  • Тип: Function

  • Подробности:

    Вызывается перед размонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен.

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

# unmounted

  • Тип: Function

  • Подробности:

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

    Не вызывается при отрисовке на стороне сервера.

  • См. также: Диаграмма жизненного цикла

# errorCaptured

  • Тип: (err: Error, instance: Component, info: string) => ?boolean

  • Подробности:

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

    Совет

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

    Правила распространения ошибок

    • По умолчанию все ошибки по-прежнему отправляются в глобальный обработчик config.errorHandler, если он был объявлен. Поэтому ошибки можно отправлять в сервис по сбору аналитики из одного места в коде.

    • Если существует несколько хуков errorCaptured в цепочке наследования компонента или родительской цепочке, то все они будут вызваны с этой же ошибкой.

    • Если сам хук errorCaptured выбрасывает ошибку, то обе ошибки (зафиксированная и выброшенная хуком) отправятся в глобальный обработчик config.errorHandler.

    • Хук errorCaptured может возвращать false для предотвращения дальнейшего распространения ошибки. Это значит — «ошибка была обработана и её следует игнорировать», что предотвратит вызов других хуков errorCaptured или глобального config.errorHandler для этой ошибки.

# renderTracked

  • Тип: (e: DebuggerEvent) => void

  • Подробности:

    Вызывается при отслеживании перерисовки виртуального DOM. Хук получает в качестве аргумента debugger event. Это событие сообщает, какая операция была отслежена в компоненте, а также целевой объект и ключ этой операции.

  • Использование:

    <div id="app">
  <button v-on:click="addToCart">Добавить в корзину</button>
  <p>Корзина({{ cart }})</p>
</div>
    1
    2
    3
    4
    const app = createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTracked({ key, target, type }) {
    console.log({ key, target, type })
    /* Будет выведено при первой отрисовке компонента:
    {
      key: "cart",
      target: {
        cart: 0
      },
      type: "get"
    }
    */
  },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

app.mount('#app')
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

# renderTriggered

  • Тип: (e: DebuggerEvent) => void

  • Подробности:

    Вызывается при срабатывании перерисовки виртуального DOM. Подобно renderTracked, в качестве аргумента получает debugger event. Это событие сообщает, какая операция вызвала перерисовку, а также целевой объект и ключ этой операции.

  • Использование:

    <div id="app">
  <button v-on:click="addToCart">Добавить в корзину</button>
  <p>Корзина({{ cart }})</p>
</div>
    1
    2
    3
    4
    const app = createApp({
  data() {
    return {
      cart: 0
    }
  },
  renderTriggered({ key, target, type }) {
    console.log({ key, target, type })
  },
  methods: {
    addToCart() {
      this.cart += 1
      /* Это приведёт к вызову renderTriggered
        {
          key: "cart",
          target: {
            cart: 1
          },
          type: "set"
        }
      */
    }
  }
})

app.mount('#app')
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26

← Доступные ресурсы →