Svelte 5 中 $derived 状态派生机制解析

状态派生在 Svelte 5 中的工作原理

Svelte 5 引入了全新的响应式系统，其中 $derived 和 $derived.by 是用于创建派生状态的重要特性。与 Svelte 4 中的 $: 语法不同，新版本提供了更明确的派生状态声明方式。

常见误区与正确用法

开发者在使用过程中容易犯的一个典型错误是：在模块作用域中直接调用派生函数并赋值给常量。例如：

// ❌ 错误用法：只会在初始化时计算一次
const derivedCount = getDerivedCount();

这种写法会导致派生状态失去响应性，因为它只在模块加载时执行一次。正确的做法应该是：

1. 在模板中直接调用：

<script>
  import { getDerivedCount } from './store';
</script>

<!-- ✅ 正确用法：在模板中调用 -->
<div>{getDerivedCount()}</div>

2. 使用 $derived 包装：

// ✅ 正确用法：使用 $derived 创建响应式派生
const derivedCount = $derived(getDerivedCount());

状态派生中的副作用处理

需要注意的是，在 $derived.by 回调函数中修改状态是反模式的做法：

// ❌ 反模式：在派生函数中修改状态
const derivedCount = $derived.by(() => {
  updateCount = updateCount + 1; // 非法状态修改
  return state.count;
});

派生函数应该是纯函数，只用于计算而不产生副作用。如果需要跟踪更新次数，应该使用其他响应式机制。

最佳实践建议

1. 对于简单的派生值，优先使用 $derived
2. 对于需要复杂计算的派生值，使用 $derived.by
3. 避免在派生函数中修改任何状态
4. 在组件中直接调用派生函数，而不是提前赋值
5. 对于需要复用的派生逻辑，考虑封装为自定义 store

Svelte 5 的新响应式系统提供了更强大和灵活的状态管理能力，理解这些核心概念将帮助开发者构建更高效和可维护的应用程序。