AlpineJS更新无关属性时x-for重渲染致DOM状态丢失问题

复现场景 #

已将原本复杂度较高的业务场景简化为可稳定复现的最小Demo，核心代码如下：

根组件数据定义：

<div x-data="{hasValue: false, categories: [{label: 'hey', id: 'first'}, {label: 'yow', id: 'second'}], htmlTest:'<input type=\'checkbox\'>'}"> 

循环渲染模板：

<template x-for="(category, index) in categories">
  <div>
    <div x-html="htmlTest"></div>
    <label class="c-system-tile" x-bind:for="category.id">
      <span class="hello" x-text="category.label"></span>
    </label>
  </div>
</template>

复现操作路径：运行代码后先手动勾选x-html渲染出的复选框，再点击绑定了更新hasValue逻辑的test按钮，即可观察到复选框的选中状态直接丢失。

成因排查 #

点击test按钮会修改hasValue属性值，该更新会触发当前组件下所有绑定的完整重计算，导致x-html指令插入的DOM内容被重新渲染替换，进而引发交互状态丢失等异常。本次最小复现仅表现为复选框选中态丢失，在复杂业务场景下可能触发更多不可预期的问题。

待确认疑问 #

• 该现象是否属于AlpineJS的正常运行机制？
• 若不属于预期行为，是否有可行的临时规避方案？
• 任意无关属性更新就触发全量绑定重绘，是否为框架本身的Bug？

最终解决方案 #

该问题是AlpineJS V2版本的特有缺陷，将框架版本升级至V3即可彻底解决该问题，无需额外调整业务代码。

内容的提问来源于stack exchange，提问作者OzerU