17370845950

Svelte 是编译时前端框架，将 .svelte 组件直接编译为高效原生 JS，无虚拟 DOM 和运行时依赖；响应式通过 $: 编译生成更新逻辑；样式默认局部作用域；单文件结构融合模板、逻辑与样式。

Svelte 是一种构建用户界面的前端 JavaScript 框架，但它不是运行时框架——它在构建时就把组件编译成高效、无框架依赖的原生 JavaScript 代码，直接操作 DOM。

核心差异：编译时 vs 运行时

传统框架（如 React、Vue、Angular）需要在浏览器中运行运行时库，负责虚拟 DOM 对比、响应式追踪、模板解析等。Svelte 则在构建阶段完成这些工作：

• 把 .svelte 文件编译为精简的 JS，没有虚拟 DOM 层，也没有运行时响应式系统开销
• 状态更新直接触发对应 DOM 修改，不经过中间抽象层
• 打包产物中不包含 Svelte 运行时，体积更小，启动更快

响应式机制更贴近直觉

Svelte 的响应式不是靠 Proxy 或 Object.defineProperty 拦截，而是通过编译器识别 $: 声明和赋值语句，自动生成更新逻辑：

• $: doubled = count * 2 —— 编译器自动插入监听逻辑，当 count 变化时重算
• 无需 useState、ref 或 computed 等 API，状态更新写法接近普通 JS
• 没有“响应式陷阱”，比如解构后的属性默认不响应，Svelte 在编译期就规避了这类问题

样式与作用域天然隔离

Svelte 组件中的 默认是局部作用域：

• 编译时自动为选择器添加唯一哈希（如 .title.svelte-abc123），避免 CSS 冲突
• 支持 :global(...) 显式穿透，也支持 :deep() 和 ::slotted 处理子组件样式
• 不需要额外的 CSS-in-JS 库或模块方案，开箱即用

语法简洁，学习曲线平缓

一个 Svelte 组件是单文件（.svelte），融合模板、逻辑、样式，结构清晰：

• 模板使用类似 HTML 的语法，支持 {#if}、{#each}、on:click 等指令
• 脚本块中直接写 JS，导出变量即为 props，无需 export default 配置对象
• 事件绑定、生命周期（onMount、beforeUpdate）都以函数形式按需引入，不强制封装

不复杂但容易忽略：Svelte 的优势不在语法炫技，而在构建阶段把框架逻辑“蒸发”掉，让最终运行的是你写的逻辑，而不是框架调度的逻辑。