Svelte 响应式系统要求显式赋值才能触发更新，而 push() 返回数组长度而非新数组，导致 numbers = numbers.push(...) 将数组变量错误覆盖为数字，破坏响应式追踪。
svelte 响应式系统要求显式赋值才能触发更新，而 `push()` 返回数组长度而非新数组，导致 `numbers = numbers.push(...)` 将数组变量错误覆盖为数字，破坏响应式追踪。
在 Svelte 中，响应式更新依赖于对响应式声明变量（如 let numbers）进行显式的重新赋值（reassignment）。这意味着：仅调用原地修改方法（如 push()、pop()、splice()）本身不会自动触发 $: 声明或绑定的更新——除非你随后执行一次有效的赋值操作。
问题代码中的关键错误在于：
function addNumber() {
numbers = numbers.push(numbers.length + 1); // ❌ 错误！
}Array.prototype.push() 的返回值是修改后数组的新长度（一个数字），而非数组本身。因此该语句实际等价于：
numbers = 5; // 假设原数组长为4 → push 后返回 5
这导致 numbers 从数组类型被覆写为数字 5，后续 $: sum = numbers.reduce(...) 会因 numbers.reduce is not a function 报错，或静默失败（取决于运行时环境），Svelte 也无法再追踪其变化。
✅ 正确做法是：保持 numbers 始终为数组引用，并通过不可变（immutable）方式生成新数组后重新赋值。推荐以下三种安全模式：
1. 使用扩展运算符（最常用、可读性高）
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}2. 使用 concat()（语义清晰，兼容性好）
function addNumber() {
numbers = numbers.concat(numbers.length + 1);
}3. 使用 unshift() / push() + 显式赋值（需配合解构或复制）
function addNumber() {
numbers.push(numbers.length + 1); // 原地修改
numbers = [...numbers]; // 强制创建新引用，触发响应式更新
}⚠️ 注意：numbers = numbers（如提问中“能工作”的写法）之所以看似有效，是因为它触发了 Svelte 的响应式赋值机制（即使值未变），但这是副作用驱动的巧合，且掩盖了类型错误——此时 numbers 仍是原数组，但逻辑已不清晰，不应作为解决方案。
完整修复示例
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers = [...numbers, numbers.length + 1]; // ✅ 纯函数式、类型安全、响应式可靠
}
$: sum = numbers.reduce((total, n) => total + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>Add a number</button>? 总结：Svelte 不劫持数组原型方法，其响应式基于赋值检测。务必确保赋值右侧始终是同类型的新值（如新数组），避免将变量意外转为非预期类型。优先采用扩展运算符或 concat() 实现不可变更新，代码更健壮、可维护性更高。
