Svelte 5 重寫之后即將帶來的巨大變化

作者：萌萌噠草頭將軍 2023-11-26 18:00:00

總的來說Svelte5的重寫，降低了學習曲線，同時優化了內部邏輯，可以更靈活的控制響應式的精度和層級。

不知不覺，Svelte即將發布第5個版本了，而這個版本，即將帶來翻天覆地的變化。

首先，Svelte 5 引入了符文（runes）和片段（snippets）的概念。

?? 符文（runes）

?? $state

<script>
    // 以前的寫法
    // let count = 0
    let count = $state(0);
</script>

<button on:click={() => count++}>
    clicks: {count}
</button>

$state的引入，本質上是對響應式的加強。早期版本的響應式只能存在于組件的頂層，函數內部是無法返回響應式的數據的，但是現在，我們可以像下面一樣通過函數返回響應式的數據了。

export function createCounter() {
    let count = $state(0);
    function increment() {
        count += 1; 
    }
    return { 
        get count() {
            return count;  
        },  
        increment 
    };
}

<script>
    import { createCounter } from './counter.svelte.js';
    const counter = createCounter();
</script>

<button on:click={counter.increment}>
    clicks: {counter.count}
</button>

請注意，我們在返回的對象中使用get屬性，因此它始終引用當前值而不是調用函數counter.count時的值。

??$derived

如果說和react的useState一樣，那么$derived就和useMemo一樣，它們都是聲明一個派生狀態。

<script>
    let count = $state(0);
    // 以前是這樣寫的
    // $: double = count * 2
    let double = $derived(count * 2);
</script>

<button on:click={() => count++}>
    {double}
</button>

<p>{count} doubled is {doubled}</p>

和非符文模式相比，$: double = count * 2只能在dom更新后更新double值，但是在符文模式下，count變化，立馬更新double的值。

$effect

<script>
    let count = $state(0);
    let double = $derived(count * 2);
    
    // 這是以前的寫法
    // $: {
    //    console.log({ count, double });
    // }
    $effect(() => {
        // mounted、updated的時候觸發
        console.log({ count, double });

        return () => {
            // idestroyed時觸發
            console.log('cleanup');
        };
    });
</script>

<button on:click={() => count++}>
    {double}
</button>

<p>{count} doubled is {doubled}</p>

$effect最大的好處是可以返回一個組件銷毀時的回調函數了。

??$effect.pre

<script>
    import { tick } from 'svelte';

    let div;
    let messages = [];

    $effect.pre(() => {
        if (!div) return; // not yet mounted

        // reference `messages` so that this code re-runs whenever it changes
        messages;

        // autoscroll when new messages are added
        if (
            div.offsetHeight + div.scrollTop >
            div.scrollHeight - 20
        ) {
            tick().then(() => {
                div.scrollTo(0, div.scrollHeight);
            });
        }
    });
</script>

<div bind:this={div}>
    {#each messages as message}
        <p>{message}</p>
    {/each}
</div>

這種方法取代了beforeUpdate方法。

??$props

要聲明組件道具，請使用$props符文：

let { optionalProp = 42, requiredProp } = $props();
let { a, b, c, ...everythingElse } = $props<MyProps>();

$props保留了children屬性，所以記得不要覆蓋該屬性。

??Snippets

片段的引入極大的提高了開發效率，以前我們可能會這樣寫：

{#each images as image}
    {#if image.href}
        <a href={image.href}>
            <figure>
                <img
                    src={image.src}
                    alt={image.caption}
                    width={image.width}
                    height={image.height}
                />
                <figcaption>{image.caption}</figcaption>
            </figure>
        </a>
    {:else}
        <figure>
            <img
                src={image.src}
                alt={image.caption}
                width={image.width}
                height={image.height}
            />
            <figcaption>{image.caption}</figcaption>
        </figure>
    {/if}
{/each}

但是現在，我們可以使用片段的功能復用代碼。

{#snippet figure(image)}
    <figure>
        <img
            src={image.src}
            alt={image.caption}
            width={image.width}
            height={image.height}
        />
        <figcaption>{image.caption}</figcaption>
    </figure>
{/snippet}

{#each images as image}
    {#if image.href}
        <a href={image.href}>
            {@render figure(image)}
        </a>
    {:else}
        {@render figure(image)}
    {/if}
{/each}

當然，你可以這樣帶入參數。

{#snippet figure({ src, caption, width, height })}
    <figure>
        <img alt={caption} {src} {width} {height} />
        <figcaption>{caption}</figcaption>
    </figure>
{/snippet}

另外，你還可以將片段傳遞給組件。

<script>
    import Table from './Table.svelte';

    const fruits = [
        { name: 'apples', qty: 5, price: 2 },
        { name: 'bananas', qty: 10, price: 1 },
        { name: 'cherries', qty: 20, price: 0.5 }
    ];
</script>

{#snippet header()}
    <th>fruit</th>
    <th>qty</th>
    <th>price</th>
    <th>total</th>
{/snippet}

{#snippet row(d)}
    <td>{d.name}</td>
    <td>{d.qty}</td>
    <td>{d.price}</td>
    <td>{d.qty * d.price}</td>
{/snippet}

<Table data={fruits} {header} {row} />

片段的功能呢和插槽的功能十分相似，但是它又比插槽方便，所以新版本即將棄用插槽的功能。

?? 事件處理程序

?? 放棄on:，采用onclick

<script>
    let count = $state(0);
</script>

<!-- <button on:click={() => count++} -->
<button onclick={() => count++}>
    clicks: {count}
</button>

??事件修飾符的邏輯被修改

<script>
    function once(fn) {
        return function (event) {
            if (fn) fn.call(this, event);
            fn = null;
        };
    }

    function preventDefault(fn) {
        return function (event) {
            event.preventDefault();
            fn.call(this, event);
        };
    }
</script>

<!--<button on:click|once|preventDefault={handler}>...</button>-->
<button onclick={once(preventDefault(handler))}>...</button>

這樣的好處是onclick能與現代事件處理程序一起使用了。

三個修飾符 - capture、passive和nonpassive- 不能表示為包裝函數，因為它們需要在事件處理程序綁定時應用，而不是在事件處理程序運行時應用。

<button onclickcapture={...}>...</button>?

?? 組件不在是類了

import { mount } from 'svelte';
import App from './App.svelte'
// 以前的寫法
// const app = new App({ target: document.getElementById("app") });
const app = mount(App, { target: document.getElementById("app") });

export default app;

??總結