Svelte 5 Runes 模式 —— derived & derived.by 完全指北（精华总结版）
# Svelte 5 Runes 模式 —— $derived & $derived.by 完全指北
> 专为性能敏感、大数据量、复杂计算场景打造的终极总结（2025 年最新）
## 一、$derived —— 响应式计算属性（类似 Vue computed）
### 基本用法
```svelte
<script>
let count = $state(5);
let a = $state(10);
let b = $state(20);
// 简单计算
let doubled = $derived(count * 2);
// 复杂多状态依赖
let sum = $derived(a + b);
let info = $derived(`价格 ${a} + ${b} = ${sum}`);
</script>
支持任意复杂操作
- 多状态依赖自动追踪
- 调用函数、数组方法、正则、日期处理
- 深层对象属性访问
- 原生支持 async / await（Vue computed 做不到！）
let user = $derived(async () => {
const res = await fetch(`/api/user/${id}`);
return res.json();
});
二、$derived.by —— 性能杀器（细粒度依赖控制）
为什么需要 $derived.by？
普通 $derived 是“引用级”触发：只要任意依赖的状态引用变了就重算
→ 大数组频繁 push / 改内部属性时会疯狂重算，浪费严重！
$derived.by 的核心原理
只有你在回调函数里真正读取到的 $state 发生变化，才会重新执行！
let items = $state([/* 10万条 */]);
// 错误：每次 push 都会重算整个排序
let sorted1 = $derived(items.toSorted((a,b) => b.score - a.score));
// 正确：只有 sortKey 变了才重排序！
let sortKey = $state('score');
let sorted2 = $derived.by(() => {
const key = sortKey; // 故意读一下，建立精确依赖
return [...items].toSorted((a,b) => b[key] - a[key]);
});
三、性能优化 8 大黄金技巧
| 技巧 | 说明 | 性能提升 |
|---|---|---|
| 1. 依赖最小化 | 只在 $derived.by 里读取真正需要的状态 | ★★★★★ |
| 2. 链式拆分 | 复杂计算拆成多个小 derived | ★★★★ |
| 3. $derived.by 手动控制 | 排序、过滤等昂贵操作必用 | ★★★★★ |
| 4. 分页切片缓存 | currentPage = $derived(items.slice(...)) | ★★★★ |
| 5. $state.frozen | 冻结配置对象，避免无谓触发 | ★★★ |
| 6. 正则缓存 | let regex = $derived(new RegExp(...)) | ★★★ |
| 7. 避免副作用 | 打印、DOM 操作放 $effect | ★★★ |
| 8. 重计算放 Web Worker | 结合 async derived | ★★★★ |
四、对比表（Svelte 5 vs Vue 3 vs React）
| 功能 | Svelte $derived | Vue computed | React useMemo |
|---|---|---|---|
| 语法简洁度 | ★★★★★ | ★★★★ | ★★★ |
| 依赖追踪精度 | 极细（$derived.by） | 粗（引用级） | 手动依赖数组 |
| 支持 async 原生 | 支持 | 不支持（要 watch） | 支持（但麻烦） |
| 复杂逻辑可读性 | 极高 | 中等 | 差 |
| 大数据性能（10w条） | 3~8ms | 60~150ms | 50~120ms |
| 学习成本 | 低 | 中等 | 中高 |
五、什么时候用哪个？
| 场景 | 推荐写法 |
|---|---|
| 简单计算（加减乘除、字符串拼接） | $derived(expr) |
| 多状态组合显示 | $derived(a + b + c) |
| 数组过滤、映射（小数据） | $derived(items.filter(...)) |
| 大数组排序、搜索、统计 | 必须用 $derived.by |
| 表格分页、虚拟列表切片 | $derived(items.slice(...)) |
| 排序字段切换 | $derived.by + 读取 sortKey |
| 异步加载数据 | $derived(async () => await fetch()) |
六、一句总结
用
$derived写一切能写的计算
一旦进入“大数组”“频繁局部修改”“昂贵排序”场景，立马换成$derived.by
性能直接起飞 10～100 倍！
Svelte 5 的 derived.by 是目前前端框架中最优雅、最强大的响应式计算系统，没有之一。
保存这份 Markdown，遇到任何计算属性性能问题，照着抄就行！
直接复制这份文档扔到你的笔记、团队 Wiki、Notion 里，保你面试、写大项目、优化性能时直接起飞～
