Svelte 5 重写之后即将带来的巨大变化

不知不觉，Svelte即将发布第5个版本了，而这个版本，即将带来翻天覆地的变化。

首先，Svelte 5 引入了符文（runes）和片段（snippets）的概念。

符文（runes）

$state

$state的引入，本质上是对响应式的加强。早期版本的响应式只能存在于组件的顶层，函数内部是无法返回响应式的数据的，但是现在，我们可以像下面一样通过函数返回响应式的数据了。

export function createCounter() {
    let count = $state(0);
    function increment() {
        count += 1; 
    }
    return { 
        get count() {
            return count;  
        },  
        increment 
    };
}

请注意，我们在返回的对象中使用get属性，因此它始终引用当前值而不是调用函数counter.count时的值。

$derived

如果说和react的useState一样，那么$derived就和useMemo一样，它们都是声明一个派生状态。






{count} doubled is {doubled}

和非符文模式相比，$: double = count * 2只能在dom更新后更新double值，但是在符文模式下，count变化，立马更新double的值。

$effect






{count} doubled is {doubled}

$effect最大的好处是可以返回一个组件销毁时的回调函数了。

$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

片段的引入极大的提高了开发效率，以前我们可能会这样写：

{#each images as image}
    {#if image.href}
        
            

                {image.caption}
                
{image.caption}

            

        
    {:else}
        

            {image.caption}
            
{image.caption}

        

    {/if}
{/each}

但是现在，我们可以使用片段的功能复用代码。

{#snippet figure(image)}
    

        {image.caption}
        
{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}

另外，你还可以将片段传递给组件。



{#snippet header()}
    fruit
    qty
    price
    total
{/snippet}

{#snippet row(d)}
    {d.name}
    {d.qty}
    {d.price}
    {d.qty * d.price}
{/snippet}


片段的功能呢和插槽的功能十分相似，但是它又比插槽方便，所以新版本即将弃用插槽的功能。
 事件处理程序
 放弃on:，采用onclick




事件修饰符的逻辑被修改




这样的好处是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的重写，降低了学习曲线，同时优化了内部逻辑，可以更灵活的控制响应式的精度和层级。

                当前标题：Svelte 5 重写之后即将带来的巨大变化
                

                网站路径：http://www.shufengxianlan.com/qtweb/news46/339846.html
            

                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                

                广告
                
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联
            

            
猜你还喜欢下面的内容

            
        

        

            
外贸网站建设知识

            
        

        

            
同城分类信息

            
        

    

    

        企业手机网站建设　　 　九针服饰　　 　宜宾网站设计　　 　内江做网站　　 　彭州网站建设　　 　消防维保　　 　成都400电话申请　　 　成都微信小程序开发　　 　微博营销　　 　成都网站推广　　 　建站定制开发　　 　雅安服务器托管　　 　高端网站策划　　 　重庆电商网站建设　　 　成都口碑营销公司　　 　简阳做网站　　 　成都网络推广　　 　商城网站建设　　 　成都移动服务器托管　　 　网络推广外包