核心特点

• 编译时框架：与传统的运行时框架（如 React、Vue）不同，Svelte 是编译时框架。在构建过程中，它会将组件代码编译成高效的 JavaScript 代码，直接操作 DOM，无需在运行时额外的虚拟 DOM 差异比较，减少了运行时开销，使应用加载更快、性能更优。
• 响应式编程：Svelte 采用简洁直观的方式实现响应式。在变量赋值时，框架能自动追踪依赖关系，当变量值改变，与之绑定的 DOM 元素会自动更新。例如：

<script>
    let count = 0;
    function increment() {
        count += 1;
    }
</script>

<button on:click={increment}>
    Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

• 简洁语法：Svelte 的语法简洁，与 HTML、CSS 和 JavaScript 紧密结合，降低了学习成本，开发者能快速上手。组件文件通常包含<script>（编写逻辑）、<style>（定义样式）和 HTML 模板三部分，结构清晰。

优势

• 性能卓越：由于编译时优化和直接操作 DOM，Svelte 应用通常具有出色的性能表现，尤其在处理复杂交互和大数据量时，能提供流畅的用户体验。
• 代码量少：简洁的语法和编译优化，使生成的代码量相对较少，减少了浏览器的加载时间和资源占用。
• 学习曲线平缓：对有 HTML、CSS 和 JavaScript 基础的开发者来说，容易理解和掌握，能快速开发出功能完善的应用。

应用场景

• 小型项目：借助简洁的语法和高效的性能，能快速搭建小型网站或 Web 应用。
• 对性能要求高的项目：如实时数据展示、游戏等场景，Svelte 的高性能可满足这些项目对响应速度和流畅度的要求。

组件系统

<!-- Parent.svelte -->
<script>
    import Child from './Child.svelte';
    let message = 'Hello from parent';
</script>

<Child {message} />

<!-- Child.svelte -->
<script>
    export let message;
</script>

<p>{message}</p>