前言:
此刻咱们对“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 比较