Svelte 5 完全解析：从 Runes 语法到响应式革命，前端性能的新天花板

前言：当编译器成为你的第二大脑

2024年底，Svelte 5 稳定版正式发布，带来了被社区称为"自 Svelte 诞生以来最大一次语法变革"的 Runes 系统。消息一出，Twitter（X）上炸开了锅——有人欢呼这是"前端响应式的终态"，也有人抱怨"学不动了"。作为一个在 React 和 Vue 两大阵营里摸爬滚打多年的老兵，我决定花一周时间，把 Svelte 5 从入门到源码全部过一遍，然后写一篇真正能帮到大家的深度解析。

这篇文章不是翻译文档。我会从为什么需要 Runes 出发，剖析其设计哲学，对比 React Hooks 和 Vue Composition API 的历史脉络，然后深入到代码实战、性能优化和生产避坑指南。你需要具备一定的前端基础，但即使你只用 jQuery，我也会在关键概念上做好铺垫。

读完本文后，你会：

• 理解 Runes 到底是什么、解决了什么问题
• 掌握 $state、$derived、$effect 等核心 Rune 的用法
• 具备在生产项目中迁移或新建 Svelte 5 代码的能力
• 了解 Runes 带来的性能提升原理以及需要注意的陷阱

一、背景铺垫：什么是响应式？为什么它这么难

1.1 响应式的基本概念

"响应式"这个词在 2010 年代被各种前端框架炒烂了，但它的本质出奇简单：数据变化了，UI 自动跟着变。

// 一个最简单的响应式例子
let count = 0;
count = 1; // 自动触发 UI 更新

这个"自动"两字，就是前端框架们花了十年时间来解决的核心问题。Angular 用脏检查，React 用虚拟 DOM，Vue 2 用 Object.defineProperty，Vue 3 用 Proxy——每一种方案都是对"自动"的某种妥协。

1.2 虚拟 DOM 的代价

React 的虚拟 DOM 是一个天才的设计，但也是一个不得不承受的代价。每次状态变化，React 会：

1. 计算新旧虚拟 DOM 树的差异（Diffing）
2. 把差异应用到真实 DOM 上

对于简单应用，这套流程非常高效。但随着应用规模扩大，Diffing 的成本会线性增长。当你的页面有上万个组件节点时，每次状态更新都可能触发数百毫秒的计算。

1.3 Svelte 的破局思路

Svelte 的解法非常激进——把响应式的工作从运行时搬到编译时。看一个 Svelte 4 的组件：

<script>
  let count = 0;  // 声明式响应式变量
  $: doubled = count * 2;  // 响应式声明（reactive statement）
</script>

<button on:click={() => count++}>
  Count: {count}, Doubled: {doubled}
</button>

Svelte 编译器在构建阶段会分析这些声明，生成如下等效代码：

// Svelte 编译后的伪代码
let count = 0;
let doubled = 0; // 直接的响应式变量，不再需要运行时依赖追踪

function update() {
  // 精确更新：只更新变化的 DOM 部分
  button_text_node.data = `Count: ${count}, Doubled: ${doubled}`;
}

function handleClick() {
  count++;
  doubled = count * 2;
  update();
}

没有虚拟 DOM，没有 Diffing，没有运行时依赖追踪。Svelte 编译后的代码就是一个普通的 JavaScript 函数，精确地修改需要修改的 DOM 节点。这是 Svelte 在基准测试中性能优异的原因。

1.4 Svelte 4 的痛点

Svelte 4 的响应式系统依赖 $: 语法和编译器的静态分析。虽然性能出色，但在实际使用中暴露了几个问题：

问题一：响应式边界不清晰

<script>
  let obj = { count: 0 };
  function reset() {
    obj = { count: 0 }; // 需要完整替换才能触发更新
  }
  function increment() {
    obj.count++; // 直接修改属性，触发更新？（看编译器心情）
  }
</script>

Svelte 4 对嵌套属性的处理依赖于编译器的静态分析，某些情况下会失效。开发者需要记住"要替换整个对象才能触发更新"这种反直觉的规则。

问题二：模块级状态难以共享

<!-- Store.svelte.js -->
import { writable } from 'svelte/store';
export const count = writable(0);

为了在组件之间共享状态，你需要引入 svelte/store，学习一套新的 API。状态管理的边界模糊，增加了学习成本。

问题三：响应式声明的语法糖脆弱

<script>
  let items = [];
  $: filtered = items.filter(x => x.active); // 链式响应式
  $: sorted = filtered.sort((a, b) => a.name.localeCompare(b.name));
  $: display = sorted.slice(0, 10);
</script>

这种链式响应式声明虽然优雅，但调试困难。当 display 不符合预期时，很难追踪是哪一步出了问题。编译器生成的代码对人类不友好，调试体验糟糕。

二、Runes 系统：重新定义响应式

2.1 什么是 Runes？

Runes 是 Svelte 5 引入的全新响应式原语，借鉴了古英语中"符文（rune）"的概念——符文是承载力量的古老符号，Svelte 团队希望这些 $ 开头的关键字能像符文一样承载响应式的力量。

从技术角度看，Runes 是一组编译器级别的指令，告诉 Svelte 编译器"这一段代码需要被响应式地追踪"。它们不是运行时库，而是编译指示（compile-time directives）。

<script>
  // Svelte 5 Runes 语法
  let count = $state(0);  // 响应式状态
  let doubled = $derived(count * 2);  // 派生值
  let displayItems = $derived.by(() => {
    return items.filter(i => i.active)
               .sort((a, b) => a.name.localeCompare(b.name))
               .slice(0, 10);
  });
  
  $effect(() => {
    console.log(`Count changed to: ${count}`);
  });
</script>

2.2 核心 Rune 详解

2.2.1 $state —— 响应式状态

$state 是最基础的 Rune，用来声明响应式状态。

<script>
  // 基本用法
  let count = $state(0);
  
  // 对象类型 - 深层响应式
  let user = $state({
    name: 'Alice',
    profile: {
      age: 28,
      skills: ['JavaScript', 'Python']
    }
  });
  
  // 数组类型
  let todos = $state([]);
  
  function addTodo(text) {
    todos.push({ text, done: false }); // 自动触发更新
  }
</script>

<button onclick={() => count++}>
  {count}
</button>

<button onclick={() => user.profile.age++}>
  Age: {user.profile.age}
</button>

<button onclick={() => addTodo('New task')}>
  Add Todo
</button>

关键改进：在 Svelte 5 中，$state 的对象和数组是深层响应式的。你可以直接修改嵌套属性，而不需要像 Svelte 4 那样整个对象替换。Svelte 5 使用 JavaScript Proxy 来实现这一特性：

// Svelte 5 $state 编译后的伪代码（简化版）
function createReactive(target) {
  return new Proxy(target, {
    get(obj, key) {
      track(); // 追踪依赖
      const value = obj[key];
      return typeof value === 'object' && value !== null
        ? createReactive(value)
        : value;
    },
    set(obj, key, value) {
      obj[key] = value;
      trigger(); // 触发更新
      return true;
    }
  });
}

这意味着：

<script>
  let settings = $state({ theme: 'dark', language: 'zh-CN' });
</script>

<!-- ✅ Svelte 5: 直接修改即可触发更新 -->
<button onclick={() => settings.theme = 'light'}>
  Switch Theme
</button>

<!-- ✅ 嵌套修改也工作 -->
<button onclick={() => settings.language = 'en-US'}>
  Switch Language
</button>

对比 Svelte 4：

<script>
  let settings = { theme: 'dark', language: 'zh-CN' };
</script>

<!-- ❌ Svelte 4: 直接修改不触发更新 -->
<button onclick={() => settings.theme = 'light'}>
  Switch Theme
</button>

<!-- ✅ Svelte 4: 需要替换整个对象 -->
<button onclick={() => settings = { ...settings, theme: 'light' }}>
  Switch Theme
</button>

2.2.2 $derived —— 派生状态

$derived 用来声明基于其他状态计算得出的值，类似于 React 的 useMemo 和 Vue 3 的 computed。

<script>
  let price = $state(100);
  let quantity = $state(2);
  
  // 简单表达式
  let total = $derived(price * quantity);
  
  // 复杂计算用 $derived.by
  let discountInfo = $derived.by(() => {
    const baseTotal = price * quantity;
    const discount = baseTotal > 500 ? 0.15 : 0.05;
    const saving = baseTotal * discount;
    return {
      subtotal: baseTotal,
      discountRate: discount,
      discountAmount: saving,
      finalPrice: baseTotal - saving
    };
  });
</script>

<p>小计: ¥{discountInfo.subtotal}</p>
<p>折扣率: {discountInfo.discountRate * 100}%</p>
<p>节省: ¥{discountInfo.discountAmount}</p>
<p>实付: ¥{discountInfo.finalPrice}</p>

内部原理：

// $derived 的编译策略
// 编译器分析依赖关系，建立有向无环图（DAG）
// 价格改变 → 小计改变 → 最终价格改变
// 数量改变 → 小计改变 → 最终价格改变
// 折扣率改变 → 节省金额改变 → 最终价格改变
// 最终价格依赖多个上游节点，Svelte 会自动拓扑排序后按序执行

这解决了 Svelte 4 中链式响应式声明的调试问题——$derived.by 的回调函数就是源码，调试体验和普通函数完全一致。

2.2.3 $effect —— 副作用处理

$effect 用来处理副作用，替代 Svelte 4 中的 $: 响应式声明和 afterUpdate 等生命周期钩子。

<script>
  let query = $state('');
  let results = $state([]);
  let loading = $state(false);
  
  // 监听 query 变化，执行搜索
  $effect(() => {
    if (!query.trim()) {
      results = [];
      return;
    }
    
    loading = true;
    const controller = new AbortController();
    
    fetch(`/api/search?q=${encodeURIComponent(query)}`, {
      signal: controller.signal
    })
      .then(res => res.json())
      .then(data => {
        results = data;
        loading = false;
      })
      .catch(() => {
        loading = false;
      });
    
    // 清理函数：query 变化时自动取消上一个请求
    return () => {
      controller.abort();
    };
  });
</script>

<input bind:value={query} placeholder="搜索..." />
{#if loading}
  <p>加载中...</p>
{:else}
  <ul>
    {#each results as result}
      <li>{result.title}</li>
    {/each}
  </ul>
{/if}

对比 Svelte 4：

<!-- Svelte 4 等效代码 -->
<script>
  let query = '';
  let results = [];
  let loading = false;
  let debounceTimer;
  
  $: {
    // 问题：无法直接返回清理函数
    // 问题：无法处理异步操作
    if (query.trim()) {
      loading = true;
      fetch(`/api/search?q=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(data => {
          results = data;
          loading = false;
        });
    }
  }
</script>

$effect 的清理函数机制是一个重大改进。在上面的例子中，当 query 变化时，Svelte 会先调用上一个 effect 的清理函数（controller.abort()），再执行新的 effect。这避免了竞态条件（race condition），是 Svelte 4 完全无法优雅解决的问题。

2.2.4 $props —— 组件参数

<script>
  // 使用 $props 解构组件属性
  let { name, age = 18, onSave } = $props();
  
  // 支持重命名和默认值
  let { 
    'data-id': id = '', 
    items = [], 
    onSelect = () => {} 
  } = $props();
</script>

<div>
  <h2>{name} ({age}岁)</h2>
  <button onclick={() => onSave({ id, name, age })}>保存</button>
</div>

对比 Svelte 4：

<!-- Svelte 4 等效代码 -->
<script>
  export let name;
  export let age = 18;
  export let onSave;
</script>

$props 的优势在于统一的语法——无论组件内部还是外部，都使用解构语法获取参数，API 更一致。

2.2.5 $bindable —— 双向绑定

<script>
  let { value = $bindable() } = $props();
</script>

<input bind:value />

$bindable() 明确标记了一个 props 可以被父组件双向绑定，这是 Svelte 5 对组件间状态同步能力的增强。

三、Svelte 5 与竞品的深度对比

3.1 对比 React Hooks

React Hooks（2019年发布）是 Svelte 4 最大的竞争对手。两者的核心区别在于：

一个典型的 React vs Svelte 5 对比：

// React
import { useState, useMemo, useEffect } from 'react';

function ProductList({ category }) {
  const [products, setProducts] = useState([]);
  const [filter, setFilter] = useState('');
  const [sortBy, setSortBy] = useState('name');
  
  // 手动追踪依赖
  const filtered = useMemo(() => {
    return products
      .filter(p => p.name.includes(filter))
      .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
  }, [products, filter, sortBy]);
  
  // 手动追踪依赖
  useEffect(() => {
    fetch(`/api/products?category=${category}`)
      .then(r => r.json())
      .then(setProducts);
  }, [category]);
  
  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <select value={sortBy} onChange={e => setSortBy(e.target.value)}>
        <option value="name">名称</option>
        <option value="price">价格</option>
      </select>
      {filtered.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

<!-- Svelte 5 -->
<script>
  let { category } = $props();
  let products = $state([]);
  let filter = $state('');
  let sortBy = $state('name');
  
  let filtered = $derived.by(() => {
    return products
      .filter(p => p.name.includes(filter))
      .sort((a, b) => a[sortBy].localeCompare(b[sortBy]));
  });
  
  $effect(() => {
    fetch(`/api/products?category=${category}`)
      .then(r => r.json())
      .then(data => products = data);
  });
</script>

<input bind:value={filter} />
<select bind:value={sortBy}>
  <option value="name">名称</option>
  <option value="price">价格</option>
</select>

{#each filtered as product (product.id)}
  <ProductCard {product} />
{/each}

两者代码行数相近，但关键区别在于：

1. 依赖声明：React 需要在 useMemo 和 useEffect 的依赖数组中手动声明，Svelte 5 由编译器自动分析
2. 包体积：Svelte 5 编译后几乎没有运行时开销
3. 心智负担：React 开发者需要记住 Hooks 规则（只能在顶层调用、不能在条件语句中调用等），Svelte 5 无此限制

3.2 对比 Vue 3 Composition API

Vue 3 的 Composition API（2020年发布）是另一个强敌。两者设计思路非常接近，都借鉴了 React Hooks 的函数式组合思想。

// Vue 3 Composition API
import { ref, computed, watch } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const doubled = computed(() => count.value * 2);
  
  function increment() {
    count.value++;
  }
  
  watch(count, (newVal) => {
    console.log(`Count changed to ${newVal}`);
  });
  
  return { count, doubled, increment };
}

// Svelte 5 Runes（等效逻辑）
export function useCounter(initial = 0) {
  let count = $state(initial);
  let doubled = $derived(count * 2);
  
  $effect(() => {
    console.log(`Count changed to ${count}`);
  });
  
  function increment() {
    count++;
  }
  
  return { count, doubled, increment };
}

两者关键差异：

Vue 3 的 ref vs reactive 双系统是学习曲线的一个摩擦点。Svelte 5 通过 $state 统一了这一切——在任何地方，$state 创建的值都直接使用，不需要 .value 访问器：

<script>
  // Vue 3: ref 需要 .value
  const count = ref(0);
  console.log(count.value); // 需要 .value
  
  // Svelte 5: $state 直接使用
  let count = $state(0);
  console.log(count); // 直接使用
</script>

四、生产级代码实战：构建一个任务管理系统

4.1 项目结构

src/
├── lib/
│   ├── stores/
│   │   └── tasks.svelte.js    # 任务状态管理
│   ├── components/
│   │   ├── TaskList.svelte
│   │   ├── TaskItem.svelte
│   │   ├── TaskFilter.svelte
│   │   └── TaskStats.svelte
│   └── utils/
│       └── priority.js
├── routes/
│   └── +page.svelte
└── app.css

4.2 状态管理：tasks.svelte.js

// lib/stores/tasks.svelte.js

// 状态导出函数 - Svelte 5 支持在 .svelte.js 文件中使用 Runes
export function createTaskStore() {
  // 任务列表
  let tasks = $state([
    {
      id: 1,
      title: '完成 Svelte 5 迁移',
      description: '将项目从 Svelte 4 升级到 Svelte 5，使用新的 Runes 语法',
      priority: 'high',
      status: 'in-progress',
      dueDate: '2026-06-20',
      tags: ['svelte', 'migration'],
      createdAt: new Date('2026-06-10')
    },
    {
      id: 2,
      title: '性能优化：减少首屏加载时间',
      description: '分析 bundle 体积，移除未使用的依赖',
      priority: 'medium',
      status: 'pending',
      dueDate: '2026-06-25',
      tags: ['performance', 'optimization'],
      createdAt: new Date('2026-06-12')
    }
  ]);
  
  // 筛选状态
  let filterStatus = $state('all');
  let filterPriority = $state('all');
  let searchQuery = $state('');
  
  // 排序状态
  let sortBy = $state('dueDate');
  let sortOrder = $state('asc');
  
  // 统计派生数据
  let stats = $derived.by(() => {
    const total = tasks.length;
    const completed = tasks.filter(t => t.status === 'completed').length;
    const inProgress = tasks.filter(t => t.status === 'in-progress').length;
    const pending = tasks.filter(t => t.status === 'pending').length;
    const overdue = tasks.filter(t => {
      if (t.status === 'completed') return false;
      return new Date(t.dueDate) < new Date();
    }).length;
    
    return {
      total,
      completed,
      inProgress,
      pending,
      overdue,
      completionRate: total > 0 ? Math.round(completed / total * 100) : 0
    };
  });
  
  // 筛选和排序后的任务列表
  let filteredTasks = $derived.by(() => {
    let result = tasks.filter(task => {
      // 状态筛选
      if (filterStatus !== 'all' && task.status !== filterStatus) return false;
      // 优先级筛选
      if (filterPriority !== 'all' && task.priority !== filterPriority) return false;
      // 搜索筛选
      if (searchQuery.trim()) {
        const query = searchQuery.toLowerCase();
        const matchTitle = task.title.toLowerCase().includes(query);
        const matchDesc = task.description.toLowerCase().includes(query);
        const matchTags = task.tags.some(tag => tag.toLowerCase().includes(query));
        if (!matchTitle && !matchDesc && !matchTags) return false;
      }
      return true;
    });
    
    // 排序
    result.sort((a, b) => {
      let valA, valB;
      
      switch (sortBy) {
        case 'dueDate':
          valA = new Date(a.dueDate);
          valB = new Date(b.dueDate);
          break;
        case 'priority':
          const priorityOrder = { high: 3, medium: 2, low: 1 };
          valA = priorityOrder[a.priority];
          valB = priorityOrder[b.priority];
          break;
        case 'title':
          valA = a.title.toLowerCase();
          valB = b.title.toLowerCase();
          break;
        case 'createdAt':
          valA = new Date(a.createdAt);
          valB = new Date(b.createdAt);
          break;
        default:
          valA = a.id;
          valB = b.id;
      }
      
      if (sortOrder === 'asc') {
        return valA > valB ? 1 : valA < valB ? -1 : 0;
      } else {
        return valA < valB ? 1 : valA > valB ? -1 : 0;
      }
    });
    
    return result;
  });
  
  // CRUD 操作
  function addTask(taskData) {
    const newTask = {
      id: Math.max(...tasks.map(t => t.id), 0) + 1,
      createdAt: new Date(),
      status: 'pending',
      ...taskData
    };
    tasks.push(newTask);
    return newTask;
  }
  
  function updateTask(id, updates) {
    const index = tasks.findIndex(t => t.id === id);
    if (index !== -1) {
      tasks[index] = { ...tasks[index], ...updates };
    }
  }
  
  function deleteTask(id) {
    const index = tasks.findIndex(t => t.id === id);
    if (index !== -1) {
      tasks.splice(index, 1);
    }
  }
  
  function toggleComplete(id) {
    const task = tasks.find(t => t.id === id);
    if (task) {
      task.status = task.status === 'completed' ? 'pending' : 'completed';
    }
  }
  
  function clearCompleted() {
    tasks = tasks.filter(t => t.status !== 'completed');
  }
  
  return {
    // 状态（只读访问）
    get tasks() { return tasks; },
    get filterStatus() { return filterStatus; },
    get filterPriority() { return filterPriority; },
    get searchQuery() { return searchQuery; },
    get sortBy() { return sortBy; },
    get sortOrder() { return sortOrder; },
    // 派生数据
    get stats() { return stats; },
    get filteredTasks() { return filteredTasks; },
    // 操作
    addTask,
    updateTask,
    deleteTask,
    toggleComplete,
    clearCompleted,
    // 筛选器 setter
    setFilterStatus: (status) => { filterStatus = status; },
    setFilterPriority: (priority) => { filterPriority = priority; },
    setSearchQuery: (query) => { searchQuery = query; },
    setSortBy: (field) => { sortBy = field; },
    setSortOrder: (order) => { sortOrder = order; }
  };
}

4.3 统计组件：TaskStats.svelte

<script>
  let { stats } = $props();
  
  const statusColors = {
    completed: 'bg-green-100 text-green-800',
    'in-progress': 'bg-blue-100 text-blue-800',
    pending: 'bg-gray-100 text-gray-800',
    overdue: 'bg-red-100 text-red-800'
  };
</script>

<div class="task-stats">
  <div class="stats-grid">
    <div class="stat-card">
      <span class="stat-value">{stats.total}</span>
      <span class="stat-label">总任务</span>
    </div>
    
    <div class="stat-card stat-card--green">
      <span class="stat-value">{stats.completed}</span>
      <span class="stat-label">已完成</span>
    </div>
    
    <div class="stat-card stat-card--blue">
      <span class="stat-value">{stats.inProgress}</span>
      <span class="stat-label">进行中</span>
    </div>
    
    <div class="stat-card stat-card--gray">
      <span class="stat-value">{stats.pending}</span>
      <span class="stat-label">待处理</span>
    </div>
    
    {#if stats.overdue > 0}
      <div class="stat-card stat-card--red">
        <span class="stat-value">{stats.overdue}</span>
        <span class="stat-label">已逾期</span>
      </div>
    {/if}
  </div>
  
  <div class="completion-bar">
    <div class="completion-bar__label">
      <span>完成进度</span>
      <span>{stats.completionRate}%</span>
    </div>
    <div class="completion-bar__track">
      <div 
        class="completion-bar__fill" 
        style="width: {stats.completionRate}%"
      ></div>
    </div>
  </div>
</div>

<style>
  .task-stats {
    padding: 1rem;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .stat-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
  }
  
  .stat-card--green { border-left: 3px solid #22c55e; }
  .stat-card--blue { border-left: 3px solid #3b82f6; }
  .stat-card--gray { border-left: 3px solid #9ca3af; }
  .stat-card--red { border-left: 3px solid #ef4444; }
  
  .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
  }
  
  .stat-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
  }
  
  .completion-bar__label {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0.5rem;
  }
  
  .completion-bar__track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .completion-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px;
    transition: width 0.3s ease;
  }
</style>

4.4 任务列表组件：TaskList.svelte

<script>
  import TaskItem from './TaskItem.svelte';
  import TaskFilter from './TaskFilter.svelte';
  
  let { store } = $props();
</script>

<div class="task-list">
  <TaskFilter {store} />
  
  {#if store.filteredTasks.length === 0}
    <div class="empty-state">
      <div class="empty-icon">📋</div>
      <p class="empty-title">没有找到任务</p>
      <p class="empty-desc">
        {#if store.searchQuery}
          尝试调整搜索关键词
        {:else if store.filterStatus !== 'all'}
          尝试调整状态筛选
        {:else if store.filterPriority !== 'all'}
          尝试调整优先级筛选
        {:else}
          点击上方按钮添加你的第一个任务
        {/if}
      </p>
    </div>
  {:else}
    <ul class="task-items">
      {#each store.filteredTasks as task (task.id)}
        <TaskItem {task} {store} />
      {/each}
    </ul>
  {/if}
</div>

<style>
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .task-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
  }
  
  .empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  
  .empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem;
  }
  
  .empty-desc {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
  }
</style>

五、性能优化：Runes 背后的编译魔法

5.1 编译时优化的威力

Svelte 5 的性能优势主要来自编译时优化。让我们看一个具体例子：

<!-- 源码 -->
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<p>Count: {count}</p>
<p>Doubled: {doubled}</p>
<button onclick={() => count++}>Increment</button>

Svelte 5 编译后的核心部分大约等价于：

// 编译后的 JavaScript（简化版）
let count = 0;
let doubled = 0;
let $dirty = new Set();

function update() {
  // 只更新变化的部分
  if ($dirty.has('count') || $dirty.has('doubled')) {
    p_doubled_text.data = `Doubled: ${doubled}`;
  }
  if ($dirty.has('count')) {
    p_count_text.data = `Count: ${count}`;
  }
  $dirty.clear();
}

function increment() {
  count++;
  doubled = count * 2;
  $dirty.add('count');
  $dirty.add('doubled');
  update();
}

关键优化点：

1. 精确更新：只有 count 改变时，p_count_text 才会更新；如果 doubled 的依赖没有变，就不更新 p_doubled_text
2. 无虚拟 DOM：直接操作 DOM 节点，没有 Diffing 开销
3. 依赖自动追踪：$derived 的依赖由编译器分析，无需运行时计算

5.2 批量更新与微任务调度

Svelte 5 引入了一个重要的优化：批量更新（batched updates）。

<script>
  let count = $state(0);
  let name = $state('');
  let email = $state('');
</script>

<!-- 连续修改只会触发一次 DOM 更新 -->
<input bind:value={name} oninput={() => {
  // 模拟快速连续输入
  name = 'Alice';
  count++; // 改变一个状态
  name = 'Alice Bob'; // 再改一次
  email = 'alice@example.com'; // 又改一个
}} />

在 Svelte 5 中，多次状态修改会在同一个微任务（microtask）中批量合并，只触发一次 DOM 更新。这大幅减少了重排（reflow）和重绘（repaint）。

5.3 性能基准测试

根据社区基准测试数据（来源：js-framework-benchmark，2026年最新）：

Svelte 5 在所有基准测试中均领先，尤其在更新和包体积方面优势明显。

5.4 性能优化实践

实践一：避免不必要的派生计算

<script>
  let items = $state([]);
  
  // ❌ 不好：每次渲染都重新计算
  let expensiveResult = $derived.by(() => {
    return heavyComputation(items);
  });
  
  // ✅ 好：使用 $effect + 结果状态
  let cachedResult = $state(null);
  $effect(() => {
    // 只在 items 实际改变时重新计算
    cachedResult = heavyComputation(items);
  });
</script>

实践二：使用 $effect.pre 处理前置依赖

<script>
  let width = $state(100);
  let height = $state(100);
  let area = $state(10000);
  
  // ✅ 使用 $effect.pre 在依赖改变前更新
  $effect.pre(() => {
    area = width * height;
  });
  
  // ❌ 普通 $effect 可能在 area 更新后触发，造成循环
  $effect(() => {
    area = width * height;
  });
</script>

实践三：组件懒加载

// 使用 SvelteKit 的延迟加载
import { lazy } from 'svelte';
const HeavyChart = lazy(() => import('./HeavyChart.svelte'));

六、生产环境避坑指南

6.1 常见陷阱与解决方案

陷阱一：对象解构丢失响应式

<script>
  let user = $state({ name: 'Alice', age: 28 });
  
  // ❌ 不好：解构会丢失响应式
  let { name, age } = user;
  
  // ✅ 好：使用 $derived 解构
  let name = $derived(user.name);
  let age = $derived(user.age);
  
  // ✅ 或者直接使用原对象
</script>

<p>{user.name}</p>

陷阱二：异步操作中的状态泄漏

<script>
  let data = $state(null);
  let loading = $state(false);
  let error = $state(null);
  
  // ❌ 不好：组件卸载后可能设置已卸载组件的状态
  $effect(() => {
    loading = true;
    fetchData().then(d => { data = d; }).catch(e => { error = e; }).finally(() => { loading = false; });
  });
  
  // ✅ 好：使用 AbortController 或 cleanup
  $effect(() => {
    loading = true;
    const controller = new AbortController();
    
    fetchData({ signal: controller.signal })
      .then(d => { data = d; })
      .catch(e => { if (e.name !== 'AbortError') error = e; })
      .finally(() => { loading = false; });
    
    return () => controller.abort();
  });
</script>

陷阱三：在 Runes 中使用 this

<script>
  let count = $state(0);
  
  // ❌ 不好
  const handler = function() {
    this.count++; // this 在 Runes 中没有意义
  };
  
  // ✅ 好
  function handler() {
    count++;
  }
</script>

6.2 Svelte 4 到 Svelte 5 的迁移策略

对于已有项目，迁移建议分三步：

第一步：增量迁移，不破坏现有功能

Svelte 5 兼容 Svelte 4 的语法。可以在同一个组件中混合使用新旧语法：

<script>
  // Svelte 4 语法（仍然工作）
  export let title;
  let count = 0;
  $: doubled = count * 2;
  
  // Svelte 5 Runes（新增）
  let items = $state([]);
  let filtered = $derived(items.filter(i => i.active));
</script>

第二步：将 store 迁移到 $state

// Before: stores/counter.js
import { writable } from 'svelte/store';
export const counter = writable(0);

// After: stores/counter.svelte.js
export function createCounter() {
  let count = $state(0);
  let doubled = $derived(count * 2);
  
  function increment() { count++; }
  function reset() { count = 0; }
  
  return { get count() { return count; }, get doubled() { return doubled; }, increment, reset };
}

第三步：全面重构，使用新的 Runes 语法

6.3 SSR（服务端渲染）注意事项

使用 SvelteKit 进行 SSR 时，需要注意：

<script>
  // ❌ 不好：在 SSR 时访问 window/document
  let width = $state(window.innerWidth);
  
  // ✅ 好：使用 $effect 在客户端初始化
  let width = $state(0);
  $effect(() => {
    width = window.innerWidth;
    const handler = () => { width = window.innerWidth; };
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  });
  
  // ✅ 更好的方案：使用 onMount（SSR 安全）
  import { onMount } from 'svelte';
  let width = $state(0);
  onMount(() => {
    width = window.innerWidth;
  });
</script>

七、深度进阶：Runes 的编译原理

7.1 编译器架构

Svelte 5 的编译器架构分为三个阶段：

源码 (Svelte) → AST 解析 → 转换阶段 → 输出代码

阶段一：解析（Parsing）

// 将源码解析为 AST
const ast = parse(source);
// {
//   kind: 'Script',
//   content: {
//     body: [
//       { kind: 'LetStatement', name: 'count', init: { kind: 'CallExpression', callee: { name: '$state' }, arguments: [...] }},
//       ...
//     ]
//   }
// }

阶段二：转换（Transform）

编译器分析 AST，识别 Rune 调用，建立依赖图：

// $state(count) 被标记为响应式状态
// $derived(doubled) 依赖 count
// 编译器生成如下元数据：
const metadata = {
  state: ['count'],
  derived: [{ name: 'doubled', deps: ['count'] }],
  effects: [],
  props: []
};

阶段三：代码生成（Code Generation）

根据元数据生成优化后的 JavaScript 代码：

// 输出简化的响应式更新函数
function $$update() {
  if ($$dirty.doubled) {
    p_doubled_text.data = `Doubled: ${doubled}`;
  }
}

7.2 Proxy 响应式的实现

$state 的深层响应式通过 JavaScript Proxy 实现：

function create_reactive_object(target, scope) {
  return new Proxy(target, {
    get(obj, key, receiver) {
      // 通知编译器记录依赖
      if (scope) scope.deps.add(key);
      
      const value = Reflect.get(obj, key, receiver);
      // 对嵌套对象继续代理，实现深层响应式
      if (value !== null && typeof value === 'object') {
        return create_reactive_object(value, scope);
      }
      return value;
    },
    
    set(obj, key, value, receiver) {
      const oldValue = obj[key];
      const result = Reflect.set(obj, key, value, receiver);
      
      // 通知编译器触发更新
      if (result && oldValue !== value) {
        scope.markDirty(key);
        queue_update(scope);
      }
      
      return result;
    },
    
    deleteProperty(obj, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(obj, key);
      const result = Reflect.deleteProperty(obj, key);
      
      if (hadKey && result) {
        scope.markDirty(key);
        queue_update(scope);
      }
      
      return result;
    }
  });
}

7.3 依赖图的构建与更新

编译器在编译阶段分析 $derived 和 $effect 的依赖关系，构建一个有向无环图（DAG）：

<script>
  let a = $state(1);
  let b = $derived(a * 2);     // 依赖: a
  let c = $derived(a + b);     // 依赖: a, b
  let d = $derived(c * 3);     // 依赖: c
  let e = $derived(b + d);     // 依赖: b, d
</script>

<!-- 编译器构建的 DAG:
     a → b → c → d
           ↘   ↗     ↘
                   e
-->

当 a 改变时，Svelte 的调度器会：

1. 标记 a 为脏节点
2. 按拓扑排序顺序执行：先更新 b，再更新 c，再更新 d，最后更新 e
3. 每个节点的计算结果被缓存，只有脏节点重新计算
4. DOM 更新在所有计算完成后一次性执行

八、总结与展望

8.1 Svelte 5 的核心价值

经过一周的深度研究和实践，我认为 Svelte 5 的 Runes 系统代表了前端响应式设计的一个新方向：

1. 编译时优化的极致：将响应式的开销从运行时搬到编译时，消除了虚拟 DOM 和 Hooks 的运行时开销
2. 开发者体验的提升：统一的 $state 语法消除了 ref/reactive 的心智负担，自动依赖追踪解放了双手
3. 生产就绪的完善：cleanup 函数、SSR 安全、批量更新等机制使 Svelte 5 真正适合大型应用

8.2 适用场景建议

推荐使用 Svelte 5 的场景：

• 对性能敏感的应用（移动端、低配设备）
• 需要极致包体积优化的项目（小程序、H5活动页）
• 大量列表渲染和频繁状态更新的应用（数据看板、实时协作工具）
• 中小型团队，渴望减少框架学习曲线的项目

谨慎使用的场景：

• 需要大量使用第三方 React 生态组件库的项目
• 团队成员对 Svelte 完全不熟悉且项目周期紧张
• 需要深度 SSR 定制化的大型应用（虽然 SvelteKit 已做得很好）

8.3 前端框架的未来

Svelte 5 的 Runes 系统正在影响整个前端生态。Vue 的 Vapor 模式、SolidJS 的精细化响应式，都在向同一个方向演进——让编译器更聪明，让运行时更轻量。

2026年的前端框架竞争，不再是"谁的功能多"，而是"谁的抽象成本低"。Svelte 5 用 Runes 给出了一个有力的答案。

参考资源：

• Svelte 5 官方文档：https://svelte.dev/docs/svelte/v5-migration-guide
• Svelte 源码仓库：https://github.com/sveltejs/svelte
• js-framework-benchmark：https://github.com/krausest/js-framework-benchmark

相关阅读：

• 如果你对 Runes 的编译细节感兴趣，建议阅读 Svelte 源码中 packages/svelte/src/compiler 目录
• 如果你计划从 Vue 迁移到 Svelte 5，推荐先通读 Svelte 5 的迁移指南

本文首发于程序员茄子（chenxutan.com），如需转载，请注明出处。