Svelte 响应式系统无法自动追踪原生数组方法（如 push）的内部变更，直接赋值 numbers = numbers.push(...) 会将数组替换为数字（新长度），导致状态丢失和视图不更新。
svelte 响应式系统无法自动追踪原生数组方法（如 push）的内部变更，直接赋值 `numbers = numbers.push(...)` 会将数组替换为数字（新长度），导致状态丢失和视图不更新。
在 Svelte 中，响应式变量的更新必须通过显式的重新赋值（reassignment）触发。这意味着：仅调用 push()、pop()、splice() 等原生数组方法 不会 触发响应式更新——因为这些方法修改的是数组对象本身，而 Svelte 的响应式系统依赖于对变量引用的重新赋值来检测变化。
问题代码中的关键错误在于：
function addNumber() {
numbers = numbers.push(numbers.length + 1); // ❌ 错误！
}Array.prototype.push() 的返回值是数组的新长度（number），而非数组本身。因此该语句实际执行效果等价于：
numbers = 5; // 假设原数组长度为4 → numbers 被赋值为数字 5！
这不仅使 numbers 不再是数组，还破坏了响应式依赖链，导致后续 $: sum = numbers.reduce(...) 因 numbers 类型错误而抛出运行时异常（如 numbers.reduce is not a function），界面停滞。
⚠️ 补充说明：你观察到的“numbers.push(...); numbers = numbers; 能工作”，其原理是——push() 修改了原数组（mutation），随后 numbers = numbers 是一次无实质变化的自赋值。Svelte 在开发模式下会对这类赋值做浅比较，但因数组引用未变，该写法实际不可靠且不推荐：它依赖于 Svelte 对引用相等性的宽松处理，在某些版本或优化场景下可能失效，且违背响应式设计原则。
✅ 正确做法是：始终用纯函数式方式生成新数组，并重新赋值给响应式变量。推荐以下三种安全写法：
1. 展开运算符（最常用、可读性强）
function addNumber() {
numbers = [...numbers, numbers.length + 1];
}2. concat() 方法（语义清晰，返回新数组）
function addNumber() {
numbers = numbers.concat(numbers.length + 1);
}3. toSpliced()（现代标准，推荐用于新增/删除）
function addNumber() {
numbers = numbers.toSpliced(numbers.length, 0, numbers.length + 1);
}? 提示：toSpliced() 是 ES2023 新增的不可变数组方法（Svelte 运行时环境需支持），完全替代 splice() 的响应式场景，无需额外 polyfill 即可在现代浏览器中使用。
此外，若需频繁进行数组操作（如批量添加、过滤、排序），建议封装为工具函数并确保每次返回新数组引用，避免副作用。同时注意：Svelte 的 $: 声明式语句会自动追踪 numbers 的引用变化，因此只要 numbers 被赋予一个新数组引用，sum 就会正确重新计算。
总结：Svelte 的响应式本质是“引用变更驱动”，而非“对象变更监听”。牢记——永远用新引用替换旧引用，而非就地修改。这是写出健壮、可维护 Svelte 应用的核心原则之一。
