在 Svelte 中，直接对数组元素的原始类型属性（如 x、y）进行 bind:value 无法触发响应式更新；必须绑定到可变引用（如对象本身），才能确保状态同步。
在 svelte 中，直接对数组元素的原始类型属性（如 `x`、`y`）进行 `bind:value` 无法触发响应式更新；必须绑定到可变引用（如对象本身），才能确保状态同步。
Svelte 的响应式系统依赖于赋值追踪（assignment-based reactivity）。当使用 bind:value={arrayItem.x} 时，若 arrayItem 是从 {#each array as arrayItem} 解构而来，Svelte 实际上会将 arrayItem.x 视为一个临时读取的原始值（如 number 或 string），而非对原对象属性的持久引用。因此，输入框修改的是该值的一个副本，而非原数组中对象的属性 —— 这导致后续 console.log(array) 仍显示旧值，变更“丢失”。
✅ 正确做法是：将整个对象（引用类型）传入子组件，并在子组件内部绑定其属性。因为对象是引用类型，arrayItem 始终指向数组中同一内存地址的对象，对其属性的修改会直接反映在源数组中。
以下为推荐实现结构：
子组件 Item.svelte（接收对象引用，绑定其属性）：
<script>
export let arrayItem; // ✅ 引用类型：对象
</script><div>
<input type="number" bind:value="{arrayItem.x}"><input type="number" bind:value="{arrayItem.y}">
</div>
父组件（维护数组，使用 {#each} 渲染并传递对象）：
<script>
import Item from './Item.svelte';
let array = [
{ x: 1, y: 2 }
];
function handleAdd() {
// ✅ 使用展开语法创建新数组，但新对象仍是独立引用
array = [...array, { x: 0, y: 0 }];
}
function handleLog() {
console.log('Current array:', array); // ✅ 输出实时更新后的值
}
</script><div>
{#each array as arrayItem}
<item></item><!-- ✅ 传递对象引用 -->
{/each}
<button on:click="{handleAdd}">Add element</button>
<button on:click="{handleLog}">Log array</button>
</div>
⚠️ 注意事项：
- 不要尝试
bind:value={array[i].x}在父组件中直接绑定（Svelte v3 不支持嵌套路径的响应式绑定）； - 避免在
{#each}中使用let:item={...}解构后又试图修改解构变量（如item.x = 5），这不会影响原数组； - 若需深度响应式操作（如动态增删嵌套字段），建议配合
$:声明式语句或使用store管理复杂状态； - Svelte 5 引入了
bind:this和增强的$state，但本问题在 Svelte 3/4 中仍普遍适用上述模式。
总结：Svelte 的响应式更新本质是“监听赋值动作 + 追踪引用”。只要确保 bind 目标是可变的对象属性（而非解构出的原始值），数组内状态就能正确同步。
