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 组件中的 默认是局部作用域:
技术上面应用了三层结构,AJAX框架,URL重写等基础的开发。并用了动软的代码生成器及数据访问类,加进了一些自己用到的小功能,算是整理了一些自己的操作类。系统设计上面说不出用什么模式,大体设计是后台分两级分类,设置好一级之后,再设置二级并选择栏目类型,如内容,列表,上传文件,新窗口等。这样就可以生成无限多个二级分类,也就是网站栏目。对于扩展性来说,如果有新的需求可以直接加一个栏目类型并新加功能操作
立即学习“Java免费学习笔记(深入)”;
- 编译时自动为选择器添加唯一哈希(如
.title.svelte-abc123),避免 CSS 冲突 - 支持
:global(...)显式穿透,也支持:deep()和::slotted处理子组件样式 - 不需要额外的 CSS-in-JS 库或模块方案,开箱即用
语法简洁,学习曲线平缓
一个 Svelte 组件是单文件(.svelte),融合模板、逻辑、样式,结构清晰:
- 模板使用类似 HTML 的语法,支持
{#if}、{#each}、on:click等指令 - 脚本块中直接写 JS,导出变量即为 props,无需
export default配置对象 - 事件绑定、生命周期(
onMount、beforeUpdate)都以函数形式按需引入,不强制封装
不复杂但容易忽略:Svelte 的优势不在语法炫技,而在构建阶段把框架逻辑“蒸发”掉,让最终运行的是你写的逻辑,而不是框架调度的逻辑。










