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

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

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    connect() {
        // …
    }
}

Методы

Вы можете определить любой из следующих методов в своем контроллере:

Метод Вызывается Stimulus…
initialize() Один раз, при первом инстанцировании контроллера
[name]TargetConnected(target: Element) Каждый раз, когда объект подключается к DOM
connect() Каждый раз, когда контроллер подключается к DOM
[name]TargetDisconnected(target: Element) Каждый раз, когда объект отсоединяется от DOM
disconnect() Каждый раз, когда контроллер отсоединяется от DOM

Подключение

Контроллер подключен к документу, когда верны оба следующих условия:

Когда контроллер становится подключенным, Stimulus вызывает его метод connect().

Объекты

Объект подключен к документу, если верны оба следующих условия:

Когда объект становится подключенным, Stimulus вызывает метод [name]TargetConnected() своего контроллера, передавая целевой элемент в качестве параметра. Хуки жизненного цикла [name]TargetConnected() срабатывают до хука контроллера connect().

Отключение

Подключенный контроллер впоследствии станет отключенным, когда одно из предыдущих условий станет ложным, например, при любом из следующих сценариев:

Когда контроллер становится отключенным, Stimulus вызывает его метод disconnect().

Объекты

Подключенный объект впоследствии станет отключенный, когда одно из предыдущих условий станет ложным, например, при любом из следующих сценариев:

Когда объект становится отключенным, Stimulus вызывает метод [name]TargetDisconnected() своего контроллера, передавая целевой элемент в качестве параметра. Хуки жизненного цикла [имя]TargetDisconnected() срабатывают до хука контроллера disconnect().

Переподключение

Отключенный контроллер может быть снова подключен позднее.

Когда это происходит, например, после удаления элемента контроллера из документа, а затем его повторного подключения, Stimulus повторно использует предыдущий экземпляр контроллера элемента, вызывая его метод connect() несколько раз.

Аналогично, отключенный объект может быть подключен снова в более позднее время. Stimulus вызовет метод [name]TargetConnected() своего контроллера несколько раз.

Очерёдность и тайминги

Stimulus следит за изменениями на странице асинхронно, используя DOM MutationObserver API.

Это означает, что Stimulus вызывает методы жизненного цикла вашего контроллера асинхронно после внесения изменений в документ, в следующей microtask после каждого изменения.

Методы жизненного цикла по-прежнему выполняются в порядке их появления, поэтому два вызова метода контроллера connect() всегда будут разделены одним вызовом disconnect(). Аналогично, два вызова метода контроллера [name]TargetConnected() для данного объекта всегда будут разделены одним вызовом [name]TargetDisconnected() для того же объекта.