Svelte 的底层气质和 React/Vue 很不一样。
很多框架是在浏览器里放一套比较重的运行时,靠运行时去观察变化、比较变化、协调变化。
Svelte 的思路更像:
把很多反应式工作提前在编译阶段做好
最后给浏览器更直接的 JavaScript所以你在写组件时,经常会觉得它很“贴近语言本身”,而不是一直在和框架仪式打交道。
Svelte 5 的当前主流写法里,常见的反应式心智是这样的:
<script lang="ts">
let selectedSeat = $state('A12');
let price = $derived(selectedSeat.startsWith('VIP') ? 299 : 99);
function upgrade() {
selectedSeat = 'VIP-01';
}
</script>
<p>当前座位:{selectedSeat}</p>
<p>票价:{price} 元</p>
<button onclick={upgrade}>升级到 VIP</button>这里的关键不是语法细节,而是你要感受到:
Svelte 组件 = 真正的舞台零件
SvelteKit = 让这些零件进入“可上线剧场体系”的那一层也就是说:
- Svelte 负责“这个场景怎么演”
- SvelteKit 负责“观众如何进入、后台何时备场、表单怎么提交、服务端怎么接应、剧团怎么巡演”