Svelte 5中$derived.by未按预期工作问题排查

问题根源 #

你遇到的问题是因为Svelte 5的普通$state无法追踪数组可变方法（如push、splice）的内部变化。$state仅监听变量引用的变更，当你用push修改数组时，数组的引用没有改变，Svelte不会感知到状态更新，因此依赖它的$derived.by也不会重新计算。

两种解决方案 #

方案1：用不可变方式更新数组（替换引用）

放弃push，直接创建新数组替换原数组，让Svelte捕获到引用变化：

// 替换原来的push操作
products.productCategories = [...products.productCategories, ...json.productCategories];
// 若json.productCategories是单个对象而非数组，改为：
// products.productCategories = [...products.productCategories, json.productCategories];

方案2：使用$state.array()创建响应式数组（推荐）

Svelte 5提供了专门的响应式数组API，它会自动拦截push、pop等可变操作并触发响应。修改你的状态定义：

function createProducts() {
  // 用$state.array替代普通$state定义数组
  const productCategories = $state.array([]);
  const allProducts = $derived.by(() => {
    // 这里写你的推导逻辑，比如合并所有分类的产品
    return productCategories.flatMap(category => category.products);
  });

  return { productCategories, allProducts };
}

之后再调用products.productCategories.push(...json.productCategories)（或单个元素的push），allProducts就会自动更新了。

额外说明 #

$state.array()是Svelte 5为集合类型提供的响应式封装，类似的还有$state.map()，它们专门用来处理需要频繁做可变操作的场景，比手动维护不可变更新更便捷。

内容的提问来源于stack exchange，提问作者Sasha