在 Svelte 中，直接对数组中原始类型字段（如 number/string）进行 bind:value 无法触发响应式更新，根本原因是原始值被复制而非引用；必须通过对象/数组等引用类型传递整个项，才能实现真正的响应式绑定。
在 svelte 中，直接对数组中原始类型字段（如 number/string）进行 `bind:value` 无法触发响应式更新，根本原因是原始值被复制而非引用；必须通过对象/数组等引用类型传递整个项，才能实现真正的响应式绑定。
Svelte 的响应式系统依赖于变量引用的变更检测。当你在 {#each array as item} 中解构出 item.x 或 item.y 并传入子组件（如 <item x="{item.x}" y="{item.y}"></item>），你实际传递的是两个独立的原始值——它们在内存中是新拷贝，与原数组中的对象属性无引用关联。因此，在子组件中修改 x 或 y 只会改变局部副本，父组件的 array 不会感知变化，导致“输入无效”“日志无更新”等现象。
✅ 正确做法：始终传递引用类型（即整个对象），让子组件直接操作原对象属性：
<!-- Item.svelte -->
<script>
export let arrayItem; // ✅ 接收整个对象引用
</script>
<div>
<input bind:value={arrayItem.x} placeholder="x" />
<input bind:value={arrayItem.y} placeholder="y" />
</div><!-- Parent.svelte -->
<script>
import Item from './Item.svelte';
let array = [
{ x: 1, y: 2 }
];
function handleAdd() {
// ✅ 使用展开语法创建新对象，但保持每个元素为独立引用
array = [...array, { x: 0, y: 0 }];
}
function handleLog() {
console.log(array); // ✅ 输出实时更新后的数组
}
</script>
<div>
{#each array as arrayItem}
<Item {arrayItem} /> <!-- ✅ 传递对象引用，非解构属性 -->
{/each}
<button on:click={handleAdd}>Add element</button>
<button on:click={handleLog}>Log array</button>
</div>⚠️ 注意事项：
- ❌ 避免
let {x, y} = item后再bind:value={x}—— 这会切断响应式链； - ✅ 若需在子组件中校验或转换值，仍应操作
arrayItem.x，而非中间变量； - ? 修改数组本身（如
push()、splice()）需配合赋值更新（如array = array）或使用$:声明响应式语句，但本例中array = [...array]已满足要求； - ? 扩展场景：若数组元素含嵌套对象（如
{pos: {x: 1, y: 2}}），也须确保嵌套对象本身是引用类型，避免pos: {...pos}拷贝破坏响应性。
总结：Svelte 的 bind:value 要生效，绑定目标必须是可变的、可追踪的响应式引用。对数组操作，请坚持“传对象、改属性、不拆解”，这是保障数据流单向清晰、响应准确的核心实践。
