建站
咨詢
售后
建站咨詢
新聞中心
不知不覺，Svelte即將發(fā)布第5個版本了，而這個版本，即將帶來翻天覆地的變化。
首先，Svelte 5 引入了符文（runes）和片段（snippets）的概念。
符文（runes）
$state
$state的引入，本質(zhì)上是對響應(yīng)式的加強(qiáng)。早期版本的響應(yīng)式只能存在于組件的頂層，函數(shù)內(nèi)部是無法返回響應(yīng)式的數(shù)據(jù)的，但是現(xiàn)在，我們可以像下面一樣通過函數(shù)返回響應(yīng)式的數(shù)據(jù)了。
export function createCounter() {
let count = $state(0);
function increment() {
count += 1;
}
return {
get count() {
return count;
},
increment
};
}
請注意，我們在返回的對象中使用get屬性，因此它始終引用當(dāng)前值而不是調(diào)用函數(shù)counter.count時的值。
$derived
如果說和react的useState一樣，那么$derived就和useMemo一樣，它們都是聲明一個派生狀態(tài)。
{count} doubled is {doubled}
和非符文模式相比，$: double = count * 2只能在dom更新后更新double值，但是在符文模式下，count變化，立馬更新double的值。
$effect
{count} doubled is {doubled}
$effect最大的好處是可以返回一個組件銷毀時的回調(diào)函數(shù)了。
$effect.pre
{#each messages as message}
{message}
{/each}
這種方法取代了beforeUpdate方法。
$props
要聲明組件道具，請使用$props符文：
let { optionalProp = 42, requiredProp } = $props();
let { a, b, c, ...everythingElse } = $props(); $props保留了children屬性，所以記得不要覆蓋該屬性。
Snippets
片段的引入極大的提高了開發(fā)效率，以前我們可能會這樣寫：
{#each images as image}
{#if image.href}
{image.caption}
{:else}
{image.caption}
{/if}
{/each}但是現(xiàn)在，我們可以使用片段的功能復(fù)用代碼。
{#snippet figure(image)}
{image.caption}
{/snippet}
{#each images as image}
{#if image.href}
{@render figure(image)}
{:else}
{@render figure(image)}
{/if}
{/each}當(dāng)然，你可以這樣帶入?yún)?shù)。
{#snippet figure({ src, caption, width, height })}
![{caption}]()
{caption}
{/snippet}另外，你還可以將片段傳遞給組件。
{#snippet header()}
fruit
qty
price
total
{/snippet}
{#snippet row(d)}
{d.name}
{d.qty}
{d.price}
{d.qty * d.price}
{/snippet}
片段的功能呢和插槽的功能十分相似，但是它又比插槽方便，所以新版本即將棄用插槽的功能。
事件處理程序
放棄on:，采用onclick
事件修飾符的邏輯被修改
這樣的好處是onclick能與現(xiàn)代事件處理程序一起使用了。
三個修飾符 - capture、passive和nonpassive- 不能表示為包裝函數(shù)，因?yàn)樗鼈冃枰谑录幚沓绦蚪壎〞r應(yīng)用，而不是在事件處理程序運(yùn)行時應(yīng)用。
組件不在是類了
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;總結(jié)
總的來說Svelte5的重寫，降低了學(xué)習(xí)曲線，同時優(yōu)化了內(nèi)部邏輯，可以更靈活的控制響應(yīng)式的精度和層級。
文章題目：Svelte 5 重寫之后即將帶來的巨大變化
文章分享：http://m.fisionsoft.com.cn/article/dpsspgj.html
