Svelte是编译时工具链，将代码转译为无框架依赖的原生JS；它无需虚拟DOM，通过编译期分析状态依赖生成细粒度更新逻辑，消除运行时开销。

它不是运行时框架，而是一个编译时工具链——Svelte 代码在构建阶段就被转译成高效、无框架依赖的原生 JavaScript。

为什么 Svelte 不需要虚拟 DOM

传统框架（如 React、Vue）靠虚拟 DOM 做 diff 和 patch，运行时持续消耗 CPU；Svelte 在编译期就分析好状态依赖关系，直接生成细粒度的响应式更新代码。

• $: count = a + b 这类反应式声明，会被编译成对 a 和 b 的显式赋值监听，不走通用 diff 算法
• 组件实例化后，没有 render() 函数调用栈，也没有 VirtualNode 对象创建开销
• DOM 更新是直接操作 element.textContent 或 element.className，无中间抽象层

bind: 指令和 store 的底层行为差异

像 bind:value={name} 看似简单，实际编译后会注入事件监听 + 赋值逻辑；而 $count 订阅 store，则展开为 count.subscribe(...) 调用——但关键在于：这些都不是运行时解析的字符串，而是 AST 阶段确定的静态绑定。

• 所有 bind: 指令都对应到具体 DOM 属性和事件（如 input 事件 + value 属性），不会动态查找或映射
• import { writable } from 'svelte/store' 创建的 store，其 subscribe 方法在编译时已知类型，可内联优化
• 没有“指令解析器”或“模板编译器”在浏览器里运行——那些逻辑全在 svelte/compiler 里完成

打包体积和运行时行为对比

一个空 Svelte 组件编译后，可能只输出几十行原生 JS；而同等功能的 React 组件必须带上 react 和 react-dom（约 40KB+ gzip）。

• 你写的 编译后就是 button.addEventListener('click', handle)，无封装
• 没有全局 React.createElement 调用，也不依赖 document.createElement 的统一包装
• SSR 输出是纯 HTML 字符串，不带 hydration 标记逻辑（除非启用 hydratable: true）

/* 编译前（Svelte） */

Count: {count}
/ 编译后（简化示意） /
function create_fragment(ctx) {
let button;
let t0;
let t1;
return {
    c() {
        button = element("button");
        t0 = text("Count: ");
        t1 = text(/*count*/ ctx[0]);
    },
    m(target, anchor) {
        insert(target, button, anchor);
        append(button, t0);
        append(button, t1);
        button.addEventListener("click", /*increment*/ ctx[1]);
    },
    p(ctx, [dirty]) {
        if (dirty & /*count*/ 1) set_data(t1, /*count*/ ctx[0]);
    },
    d(detaching) {
        if (detaching) detach(button);
        button.removeEventListener("click", /*increment*/ ctx[1]);
    }
};
}
真正难的是写对响应式逻辑边界——比如嵌套对象属性变化不会自动触发更新，$: 块里不能有副作用函数调用，这些约束不是运行时报错兜底，而是靠开发者理解编译规则来规避。