看到Svelte 5的reactivity，vue笑了

2023年9月20日，svelte官方发布了一篇介绍runes的博客，这是下一个大版本的Svelte 5将要引入的新特性，那这是个什么东西呢，又会为Svelte带来多大的革新呢，下面围绕博客内容做些介绍。

什么是runes

根据作者的介绍，runs就是A letter or mark used as a mystical or magic symbol，其实就是一组特殊符号，它可以影响Svelte compiler，这为Svelte带来更加强大的功能，先看个例子吧：

<script>
    let count = $state(0);
    function increment() {
            count+=1;
    }
    let doubleCount = $derived(count * 2);
    $effect(() => {
        console.log('doubleCount changed', doubleCount);
    });
</script>

<h1>{count}</h1>
<h1>{dobuleCount}</h1>
<button on:click={increment}>add</button>

有过vue/react/solid开发经验的人，应该很好理解吧，runes引入$state,$effect,$derived等语法，赋予Svelte Runtime reactivity的特性，很多人应该想到了另一个词signals，是的，看到这里vue笑了：

新旧对比

我自己本身对Svelte不是很了解，因此特意去看了一下目前正式版本对于上述例子的实现：

<script>
    let count = 0;
    function increment() {
        count++;
    }
    $: doubleCount = count * 2;
    $: {
        console.log('doubleCount changed', doubleCount);
    }
</script>

<h1>{count}</h1>
<h1>{doubleCount}</h1>
<button on:click={increment}>add</button>

根据作者的描述，目前Svelte3/4版本通过let, =,  export 关键字 和 $:标签实现的功能，而runes采用函数语法，不仅能实现相同的功能，还可以更强大，当然通过上面两个例子，其实不足以体现runes的优势，看完文档，我觉得有两个优势：

1.组件之外，更容易使用

通过js/ts定义的store，使用runes相比于store那一套，更加的简单，也更容易理解。

2. 运行时响应性

目前版本的Svelte3/4，是在编译阶段判断赋值语句(=)来生成保存响应的函数集，但是对于有些计算类型，作者提供了一个有bug的例子：

const multiplyByHeight = (width) => width * height;
$: area = multiplyByHeight(width);

area只会在width改变的时候有响应性，但是height改变却没有，Svelte5通过$derived 和 $effect runes解决这个问题：

<script>
	let { width, height } = $props(); // instead of `export let`

	const area = $derived(width * height);

	$effect(() => {
		console.log(area);
	});
</script>

作者还提到，使用runes在大型复杂应用里会更有优势，具体描述大家可以看原文体会。

最后

虽然才刚刚推出，社区有喜欢的，自然就有不喜欢的，不管怎样，各个框架大都殊途同归，Knockout在十几年前引入的signals概念已经成为了前端框架的基石。