在 vue 3 的 `v-for` 列表中，若需为每个元素独立控制类名（如点击单张图片高亮），不可共用单一布尔状态，而应使用与列表等长的状态数组，并通过索引精准更新对应项。
在 Vue 3（尤其是选项式 API）中，当对 v-for 渲染的多个元素使用同一个响应式变量（如 active: false）控制 :class 时，所有元素会同步响应——点击任一项都会触发全局切换，违背“仅激活当前项”的交互预期。根本原因在于：共享状态无法表达个体差异。
解决思路是将“是否激活”这一状态从全局变量升级为按索引隔离的局部状态。推荐做法是维护一个与 images 数组长度一致的布尔数组 activeState，每个下标对应一张图片的激活状态。
以下是完整、可直接运行的优化实现：
@@##@@
✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- activeState 使用 new Array(n).fill(false) 初始化，确保每个图片拥有独立的响应式状态位；
- @click="toggleState(index)" 将事件绑定到具体索引，避免副作用扩散；
- :class="{ 'itsActive': activeState[index] }" 实现精准类名绑定，语义清晰且性能友好；
- 若后续需支持多选或取消其他项（单选模式），可在 toggleState 中扩展逻辑，例如先重置全部再设当前项为 true；
- 注意：若 images 是响应式 prop 且可能动态变更长度，建议在 watch 中同步调整 activeState 长度（但多数场景下图片列表静态，此步可省略）。
该方案符合 Vue 响应式设计原则，结构清晰、易于维护，是处理列表项独立状态的经典范式。
