Svelte 初体验：不一样的思路

用惯了 React 和 Vue，第一次接触 Svelte 的时候确实有种新鲜感。最直观的感受：代码量少了很多。

Runes 语法

Svelte 5 引入了 runes 语法，让响应式声明更显式：

• $state — 声明响应式变量，替代了之前靠赋值触发响应式的隐式规则。
• $derived — 衍生值，类似 Vue 的 computed。
• $effect — 副作用，自动追踪依赖并在变化时执行。

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log(`count is now ${count}`);
  });
</script>

逻辑清晰，没有 useEffect 的依赖数组心智负担。

编译时魔法

Svelte 的核心理念：没有虚拟 DOM，编译器在构建时直接把组件转成高效的 DOM 操作代码。打包体积小得惊人，一个简单的组件可能只有几百字节。对移动端场景尤其友好。

SvelteKit

SvelteKit 是 Svelte 的全栈框架，文件路由设计简洁。约定优于配置——新建一个 src/routes/about/+page.svelte，就自动有了 /about 路由。内置 SSR、SSG、CSR 多种渲染模式，服务器端数据加载用 load 函数，类型安全做得不错。

总结

Svelte 适合想要减少样板代码、追求小打包体积的项目。React 和 Vue 的生态更成熟，但 Svelte 的思路值得关注。下一步打算用 SvelteKit 重写个人博客试试看。