使用 Stimulus 实现目标元素的连接和断开回调
内容提要
这篇文章介绍了使用Stimulus控制器的Connect和Disconnect回调函数来跟踪目标元素的添加和移除。通过示例代码演示了如何在列表中添加新的元素，并在页面加载时更新元素数量。这是Stimulus的一个小而实用的功能。
延伸解读
目标连接与断开回调的触发时机
在 Stimulus 中，当带有 data-*-target 属性的元素被添加到 DOM 时，会触发对应的 targetConnected 回调；当元素从 DOM 中移除时，则触发 targetDisconnected 回调。这些回调不仅会在动态操作（如通过 JavaScript 插入或删除元素）时触发，也会在控制器连接时对已存在的目标元素触发，因此页面加载时就能自动执行初始化逻辑。
利用回调自动同步界面状态
文章示例中，通过 itemTargetConnected 和 itemTargetDisconnected 回调调用同一个更新方法，实时更新鸡蛋数量显示。这种模式避免了在每次添加或删除元素时手动调用更新函数，减少了重复代码，并确保界面状态与目标元素数量始终保持一致，尤其适合动态列表场景。
与 Values API 回调的对比
文章开头提到之前介绍过 Values API 的 change 回调，而本文聚焦于 targets 的 Connect 和 Disconnect 回调。两者都是 Stimulus 的响应式特性：Values 回调在数据属性变化时触发，Targets 回调在目标元素增减时触发。开发者可以根据需要跟踪的变化类型选择合适的方式，或结合使用以实现更精细的控制。
Q&A
Stimulus的Connect和Disconnect回调函数有什么作用？
Connect和Disconnect回调函数用于跟踪目标元素的添加和移除。
如何在Stimulus中添加新的目标元素？
可以通过在控制器中使用insertAdjacentHTML方法来添加新的目标元素。
如何更新列表中元素的数量？
通过itemTargetConnected和itemTargetDisconnected回调函数来更新元素数量。
Stimulus的targets是什么？
targets允许通过名称引用重要元素，便于在控制器中管理这些元素。
在Stimulus中如何显示当前元素数量？
可以在控制器中使用countTarget来显示当前元素数量，并在元素连接或断开时更新。
Stimulus的这个功能在开发中有什么实际应用？
这个功能可以有效管理动态元素，提升用户交互体验。
