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 的优势不在语法炫技，而在构建阶段把框架逻辑“蒸发”掉，让最终运行的是你写的逻辑，而不是框架调度的逻辑。
