不知不觉，Svelte即将发布第5个版本了，而这个版本，即将带来翻天覆地的变化。
首先，Svelte 5 引入了符文（runes）和片段（snippets）的概念。
🚀 符文（runes）
💎 $state
// 以前的写法
// let count = 0
let count = $state(0);
count++}>
clicks: {count}
$state的引入，本质上是对响应式的加强。早期版本的响应式只能存在于组件的顶层，函数内部是无法返回响应式的数据的，但是现在，我们可以像下面一样通过函数返回响应式的数据了
export function createCounter() {
let count = $state(0);
function increment() {
count += 1;
}
return {
get count() {
return count;
},
increment
};
}
import { createCounter } from './counter.svelte.js';
const counter = createCounter();
clicks: {counter.count}
请注意，我们在返回的对象中使用get属性，因此它始终引用当前值而不是调用函数counter.count时的值。
💎$derived
如果说和react的useState一样，那么$derived就和useMemo一样，它们都是声明一个派生状态
let count = $state(0);
// 以前是这样写的
// $: double = count * 2
let double = $derived(count * 2);
count++}>
{double}
{count} doubled is {doubled}
和非符文模式相比，$: double = count * 2只能在dom更新后更新double值，但是在符文模式下，count变化，立马更新double的值。
$effect
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');
};
});
count++}>
{double}
{count} doubled is {doubled}
$effect最大的好处是可以返回一个组件销毁时的回调函数了
💎$effect.pre
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);
});
}
});
{#each messages as message}
{message}
{/each}
这种方法取代了beforeUpdate方法。
💎$props
要声明组件道具，请使用$props符文：
let { optionalProp = 42, requiredProp } = $props();
let { a, b, c, ...everythingElse } = $props();$props保留了children属性，所以记得不要覆盖该属性
🚀Snippets
片段的引入极大的提高了开发效率，以前我们可能会这样写：
{#each images as image}
{#if image.href}
{image.caption}
{:else}
{image.caption}
{/if}
{/each}但是现在，我们可以使用片段的功能复用代码
{#snippet figure(image)}
{image.caption}
{/snippet}
{#each images as image}
{#if image.href}
{@render figure(image)}
{:else}
{@render figure(image)}
{/if}
{/each}当然，你可以这样带入参数
{#snippet figure({ src, caption, width, height })}
![{caption}]()
{caption}
{/snippet}另外，你还可以将片段传递给组件
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 }
];
{#snippet header()}
fruit
qty
price
total
{/snippet}
{#snippet row(d)}
{d.name}
{d.qty}
{d.price}
{d.qty * d.price}
{/snippet}
片段的功能呢和插槽的功能十分相似，但是它又比插槽方便，所以新版本即将弃用插槽的功能。
🚀 事件处理程序
💎 放弃on:，采用onclick
let count = $state(0);
count++}>
clicks: {count}
💎事件修饰符的逻辑被修改
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);
};
}
...这样的好处是onclick能与现代事件处理程序一起使用了。
三个修饰符 - capture、passive和nonpassive- 不能表示为包装函数，因为它们需要在事件处理程序绑定时应用，而不是在事件处理程序运行时应用。
...❞
🚀 组件不在是类了
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;🚀总结
总的来说Svelte5的重写，降低了学习曲线，同时优化了内部逻辑，可以更灵活的控制响应式的精度和层级。
