Svelte 编译时框架：无虚拟 DOM 的响应式

什么是 Svelte？

Svelte 是一个用于构建用户界面的现代前端框架，与传统框架（如 React、Vue）最大的不同在于它的编译时特性。它不是依靠运行时将虚拟 DOM 转换为真实 DOM，而是在构建阶段就将组件编译为高效、纯净的 JavaScript 代码，直接操作真实 DOM。这种设计让 Svelte 应用拥有更小的体积和更快的运行速度。

编译时框架 vs. 运行时框架

Svelte 将 “响应式” 和 “DOM 更新策略” 在编译时确定下来，省略了中间的抽象层。

无虚拟 DOM 的优点

• 更快的初始渲染：没有虚拟 DOM 的创建和比对过程，直接生成针对真实 DOM 的操作。
• 更小的代码体积：无需引入虚拟 DOM 的 diff 算法和调度库，最终产出的 JS 文件体积显著减小。
• 更低的内存占用：不再维护一份与真实 DOM 对应的虚拟节点树，内存消耗更少。
• 明确的更新路径：编译时就知道哪些变量变化会影响哪些 DOM，不会进行全量比对。

响应式声明：让数据与视图自动同步

在 Svelte 中，一个普通的 let 变量就是响应式的。任何对变量的重新赋值都会自动触发组件更新。更强大的响应式声明通过 $: 标记实现，它会跟踪依赖并自动重算。

<script>
  let count = 0;
  // 响应式声明：只要 count 变化，doubled 自动重新计算
  $: doubled = count * 2;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  点击次数: {count}
</button>
<p>双倍值: {doubled}</p>

$: 也可以执行任意语句，例如：

$: {
  console.log(`count 变为 ${count}`);
}

组件基础

Svelte 组件文件以 .svelte 结尾，包含 <script>、<style> 和模板三部分。

<script>
  export let name = '世界';
  let visible = true;
</script>

<style>
  h1 {
    color: purple;
  }
  .hidden {
    display: none;
  }
</style>

<h1>你好，{name}！</h1>
<button on:click={() => visible = !visible}>
  {visible ? '隐藏' : '显示'}内容
</button>
<p class: hidden="{!visible}">可以控制显示隐藏的段落。</p>

• 通过 export let 定义组件属性（父组件传入的值）。
• 使用 on:click 等事件监听器绑定原生事件。
• 使用 class: 指令动态切换类名，样式自动作用域隔离。

深入响应式与状态管理

Svelte 的响应式基于赋值触发。数组和对象的变更必须通过赋值操作（如 arr = [...arr, newValue]）才会被 Svelte 检测到。为了处理复杂状态，可以使用 Store。

Store 是一种跨组件共享状态的简洁方式：

// stores.js
import { writable } from 'svelte/store';

export const count = writable(0);

在组件中使用 store：

<script>
  import { count } from './stores.js';
  // 自动订阅前缀 $
  function add() {
    $count += 1;
  }
</script>

<button on:click={add}>当前计数：{$count}</button>

只需在 store 名称前加 $，组件便会自动订阅和取消订阅，当 store 值变化时自动更新视图。

编译时优化的魔法

Svelte 编译器会分析模板中的依赖关系，生成粒度极细的更新代码。例如：

模板中有 <p>{a}</p>，编译器只会为变量 a 生成更新函数。当 a 改变时，直接调用 p.textContent = a;，不会触碰其他 DOM 节点。这种 “直接外科手术式” 的更新是 Svelte 高性能的根源。

实战 Tips

1. 用 {#if} 代替 display:none：条件块会真正销毁和重建 DOM 节点，适合频繁切换的场景以优化内存。
2. 过渡动画：Svelte 内置 transition、in、out 等指令，可以轻松添加原生动画，无需额外库。
3. 响应式陷阱：记住必须通过赋值触发更新；如果使用 push、splice 等数组方法，后续必须加上 arr = arr 来重新赋值。

let items = [1,2,3];
function addItem() {
  items.push(items.length + 1);
  items = items; // 触发响应
}

总结

Svelte 将响应式工作从运行时转移到编译时，抛弃虚拟 DOM，获得了极致性能与开发体验。它简洁的语法、自动的响应式绑定和强大的编译优化，让开发者可以更专注于业务逻辑，同时交付更轻、更快的 web 应用。无论你是初学者还是资深开发者，Svelte 都值得一试。