什么是 Svelte，以及它为何采用编译方式
了解 Svelte 的编译器优先方案，以及它与 React 和 Vue 的区别。
什么是 Svelte，以及它为何采用编译方式 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
欢迎使用 Svelte
Svelte 是一个<強>?
没有虚拟 DOM
React 会在运行时对虚拟 DOM 进行差异比较。而 Svelte 会将您的组件编译成高度优化的原生 JavaScript，直接更新 DOM。
发布更少代码
由于 Svelte 发布的是编译后的输出，通常只需向浏览器发送更少的 JavaScript。构建包体积非常小。
组件文件格式
Svelte 组件位于一个 .svelte 文件中，其中包含三个可选部分：脚本、标记和样式。
<script>
let name = "world";
</script>
<h1>Hello {name}!</h1>通过赋值实现响应式
在 Svelte 中，只需为变量赋予新值，就会触发界面更新。不需要调用 setState。
<script>
let count = 0;
function inc() { count = count + 1; }
</script>
<button on:click={inc}>{count}</button>单文件组件
标记、逻辑和作用域样式都位于同一个文件中。这种集中组织方式让组件更容易理解和重构。
默认使用作用域样式
您编写的任何 <style> 都只作用于当前组件。不再有跨页面的 CSS 冲突。
<style>
p { color: tomato; }
</style>
<p>I am tomato</p>性能优势
由于没有运行时框架开销，在低端设备上，Svelte 应用通常比功能相当的 React 或 Vue 应用更快。
SvelteKit，这个元框架
SvelteKit 构建于 Svelte 之上，并增加了路由、SSR 和数据加载功能。大多数用于生产环境的 Svelte 应用都会使用 SvelteKit。
Svelte 的优势场景
Svelte 非常适合营销网站、控制面板、适合移动设备的应用，以及任何重视构建包体积和 DX 的场景。
对比回顾
React、Vue 和 Angular 都会发布运行时；Svelte 则会在编译时将其移除。结果是更小的构建包和更简单的心智模型。
快速检查
测试您的理解。
回顾
现在您已经了解，Svelte 会编译组件、发布更少的 JS、使用作用域样式，并通过 SvelteKit 支持完整应用。接下来：创建您的第一个项目。
常见问题解答
「什么是 Svelte，以及它为何采用编译方式」课时是免费的吗？
是的 — 「什么是 Svelte，以及它为何采用编译方式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「什么是 Svelte，以及它为何采用编译方式」这节课中我会学到什么？
了解 Svelte 的编译器优先方案，以及它与 React 和 Vue 的区别。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「什么是 Svelte，以及它为何采用编译方式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 什么是 Svelte，以及它为何采用编译方式
- 使用 npm create svelte 创建项目
- 项目结构：src、routes、static
- 开发服务器与热模块替换