龙空技术网

看到Svelte 5的reactivity,vue笑了

爱摸鱼的程序员 170

前言:

此刻咱们对“svelte vue 比较”大致比较关切,大家都需要知道一些“svelte vue 比较”的相关知识。那么小编同时在网摘上网罗了一些关于“svelte 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概念已经成为了前端框架的基石。

作者:putao

链接:

标签: #svelte vue 比较