Svelte框架入门与实战

Svelte框架入门与实战

Svelte是一个新兴的前端框架，它的核心理念是将框架的工作从运行时转移到编译时。与React、Vue不同，Svelte不使用虚拟DOM，而是在构建时生成高效的原生DOM操作代码，这使得应用体积更小、运行更快。

一、组件基础

<!-- App.svelte -->
<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  点击了 {count} 次
</button>

<style>
  button {
    padding: 8px 16px;
    background: #4a2;
    color: white;
    border: none;
    border-radius: 4px;
  }
</style>

二、响应式声明

<script>
  let numbers = [1, 2, 3, 4, 5];
  
  // 响应式声明 - 自动计算
  let sum = numbers.reduce((a, b) => a + b, 0);
  
  // 响应式语句
  $: {
    console.log("数字变化了:", numbers);
    console.log("总和:", sum);
  }
  
  function addNumber() {
    numbers = [...numbers, numbers.length + 1];
  }
</script>

<p>数字: {numbers.join(", ")}</p>
<p>总和: {sum}</p>
<button on:click={addNumber}>添加数字</button>

三、组件通信

<!-- Child.svelte -->
<script>
  // 声明props
  export let title = "默认标题";
  export let items = [];
  
  // 派发事件
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
  
  function handleClick(item) {
    dispatch("select", item);
  }
</script>

<h2>{title}</h2>
{#each items as item}
  <button on:click={() => handleClick(item)}>{item.name}</button>
{/each}

<!-- Parent.svelte -->
<script>
  import Child from "./Child.svelte";
  
  function onSelect(event) {
    console.log("选中:", event.detail);
  }
</script>

<Child title="请选择" items={dataList} on:select={onSelect} />

四、生命周期

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";
  
  let data = null;
  
  onMount(async () => {
    data = await fetchData();
    
    // 返回清理函数
    return () => {
      cleanup();
    };
  });
  
  beforeUpdate(() => {
    console.log("DOM更新前");
  });
  
  afterUpdate(() => {
    console.log("DOM更新后");
  });
</script>

Svelte的编译时方案让代码更简洁、性能更好，特别适合对包体积和性能敏感的项目。虽然生态还不如React和Vue成熟，但SvelteKit的全栈方案使其成为非常有竞争力的选择。