生命周期回调

称为生命周期回调的特殊方法允许您在控制器或某些目标连接到和断开与文档的连接时做出响应。

import { Controller } from "@hotwired/stimulus"

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

﹟ 方法

您可以在控制器中定义以下任何方法

方法	由刺激调用的...
initialize()	一次，在控制器首次实例化时
[name]TargetConnected(target: Element)	任何时候目标都连接到 DOM
connect()	任何时候控制器都连接到 DOM
[name]TargetDisconnected(target: Element)	任何时候目标都从 DOM 断开连接
disconnect()	任何时候控制器都从 DOM 断开连接

﹟ 连接

当以下两个条件都为真时，控制器连接到文档

其元素存在于文档中（即document.documentElement（<html>元素）的后代）
其标识符存在于元素的data-controller属性中

当控制器连接时，刺激调用其connect()方法。

﹟ 目标

当以下两个条件都为真时，目标连接到文档

其元素作为其对应控制器的元素的后代存在于文档中
其标识符存在于元素的data-{identifier}-target属性中

当目标连接时，刺激调用其控制器的[name]TargetConnected()方法，并将目标元素作为参数传递。[name]TargetConnected()生命周期回调将在控制器的connect()回调之前触发。

﹟ 断开连接

连接的控制器在以下任一先决条件变为假时，稍后将变为断开，例如在以下任何情况下

使用 Node#removeChild() 或 ChildNode#remove() 从文档中明确删除元素
从文档中删除元素的父元素之一
使用 Element#innerHTML= 替换元素的父元素之一的内容
删除或修改元素的 data-controller 属性
文档安装新的 <body> 元素，例如在 Turbo 页面更改期间

当控制器断开连接时，Stimulus 调用其 disconnect() 方法。

﹟ 目标

连接的目标在以下任一先决条件变为假时，稍后将变为断开，例如在以下任何情况下

使用 Node#removeChild() 或 ChildNode#remove() 从文档中明确删除元素
从文档中删除元素的父元素之一
使用 Element#innerHTML= 替换元素的父元素之一的内容
删除或修改元素的 data-{identifier}-target 属性
文档安装新的 <body> 元素，例如在 Turbo 页面更改期间

当目标断开连接时，Stimulus 调用其控制器的 [name]TargetDisconnected() 方法，将目标元素作为参数传递。[name]TargetDisconnected() 生命周期回调将在控制器的 disconnect() 回调之前触发。

﹟ 重新连接

断开的控制器稍后可能会再次连接。

当发生这种情况时，例如在从文档中删除控制器的元素然后重新附加它之后，Stimulus 将重新使用元素的先前控制器实例，多次调用其 connect() 方法。

类似地，断开的目标稍后可能会再次连接。Stimulus 将多次调用其控制器的 [name]TargetConnected() 方法。

﹟ 顺序和时间

Stimulus 使用 DOM MutationObserver API 异步监视页面中的更改。

这意味着 Stimulus 在对文档进行更改后异步调用控制器的生命周期方法，在每次更改后的下一个微任务中。

生命周期方法仍按其发生的顺序运行，因此对控制器connect()方法的两次调用将始终由对disconnect()的一次调用隔开。类似地，对控制器[name]TargetConnected()的两次调用（针对给定的目标）将始终由对该相同目标的[name]TargetDisconnected()的一次调用隔开。

下一步：操作