Svelte 响应式更新依赖对变量的重新赋值，而 Array.prototype.push() 返回数组长度而非新数组，导致直接赋值后变量类型改变、响应式失效。
svelte 响应式更新依赖对变量的重新赋值，而 `array.prototype.push()` 返回数组长度而非新数组，导致直接赋值后变量类型改变、响应式失效。
在 Svelte 中，响应式更新的核心机制是：当一个被声明为 let 的顶层变量被重新赋值（即使用 = 运算符）时，Svelte 才会触发依赖该变量的 $: 声明和 DOM 更新。这意味着，仅调用原地修改方法（如 push、pop、splice）而未重新赋值，不会触发响应式更新——即使数组内容已变。
回到原始代码的问题：
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {
numbers = numbers.push(numbers.length + 1); // ❌ 错误！
}
$: sum = numbers.reduce((total, currentNumber) => total + currentNumber, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>Add a number</button>numbers.push(...) 的返回值是新数组的长度（例如，向 [1,2,3,4] 推入 5 后返回 5），因此执行 numbers = numbers.push(...) 实际上将 numbers 赋值为数字 5，而非数组。后续 $: sum = numbers.reduce(...) 会因 numbers 不再是数组而抛出运行时错误（TypeError: numbers.reduce is not a function），或在某些环境下静默失败。
你观察到的“修复写法”：
function addNumber() {
numbers.push(numbers.length + 1);
numbers = numbers; // ✅ 触发响应式更新（但冗余）
}之所以“看似有效”，是因为第二行 numbers = numbers 是一次无意义但合法的重新赋值操作，它让 Svelte 检测到 numbers 变量被写入，从而强制刷新依赖。但这属于副作用驱动的 hack，并非推荐实践——它既掩盖了语义问题，又无法保证所有 Svelte 版本或优化场景下的稳定性（例如开启 immutable 模式时可能失效）。
✅ 正确且符合函数式/不可变风格的做法是：使用返回新数组的方法进行纯赋值。推荐以下两种现代写法：
方式一：扩展运算符（最常用、可读性强）
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}方式二：concat()（语义明确，兼容性好）
function addNumber() {
numbers = numbers.concat(numbers.length + 1);
}? 提示：concat() 支持传入单个元素（无需包装为数组），所以上例中 numbers.concat(numbers.length + 1) 等价于 numbers.concat([numbers.length + 1])。
此外，若需批量添加、删除或重排，也可结合 slice()、filter()、map() 等纯函数方法，始终确保 numbers 被赋予一个全新数组引用。
? 关键总结：
- push() / pop() / shift() / unshift() / splice() 都是就地修改方法，返回值不是数组本身，不能直接用于赋值更新响应式变量；
- Svelte 的响应式追踪基于赋值行为（assignment），而非对象内部变化；
- 坚持“不可变更新”原则：用 ...spread、concat()、filter() 等创建新数组并重新赋值，代码更可靠、可预测，也便于未来迁移至严格不可变模式。
这样，你的 numbers 始终保持数组类型，$: 声明持续生效，按钮点击即可稳定更新视图。
