彻底搞懂全新的Svelte5

最新推荐文章于 2025-04-03 09:22:24 发布

刺头拾年

最新推荐文章于 2025-04-03 09:22:24 发布

阅读量1.8k

点赞数 18

分类专栏： Svelte 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_44186810/article/details/140125708

版权

Svelte 专栏收录该内容

1 篇文章

订阅专栏

Svelte5的Runes

1.$state

声明响应式状态
可以在类中使用
只有普通的对象和数组可以深度响应性

2.$state.frozen

声明的变量不能被修改；只能重新赋值。
优点：提高对大型数组和对象的性能，避免为它们设置可响应状态的成本。
原理：使用 Object.freeze() 对其进行浅层冻结

3.$state.snapshot

对声明响应式状态$state 代理进行静态快照
当您需要将状态传递给外部库或API时，这非常方便，而这些外部库或API并不期望使用代理，例如 structuredClone。
注意：当移除响应性时， $state.snapshot 会克隆数据。如果传递的值不是 $state 代理，则会原样返回

4.$state.is

当其中一个是响应式状态时可以用这个比较两个值
检查一个深层嵌套的响应性对象/数组中的对象是否存在，这非常方便。

5.$derived

计算某个响应变量的值
标记内的表达式应无副作用

6.$derived.by

接受一个函数作为其参数
简而言之， $derived(e) 与 $derived.by(() => e) 是等价的。

7.$effect

在组件被挂载到DOM上以及值发生变化时，使用 $effect 函数来执行副作用
传递给 $effect 的函数将在组件加载时运行，并在读取到的值（通过 $state 或 $derived 声明）发生任何更改（包括通过 $props 传递的值）后重新运行。重新运行是批量处理的（即在同一时刻更改两个变量，不会导致两次单独的运行），并在DOM更新完成后执行。
以异步方式读取的值（例如在 await 或 setTimeout 内部读取的值）将不会被跟踪。
只有当读取它的对象发生变化时，效果才会重新运行，而不是当它内部的某个属性发生变化时。
可以在 $effect 中返回一个函数，该函数将在效果重新运行之前立即执行，并在效果被销毁之前执行
$effect 最好被看作是一种逃生通道，它对于分析和直接操作DOM（文档对象模型）等任务非常有用，而不是一种应该频繁使用的工具。特别是，要避免使用它来同步状态。

8.$effect.pre

在DOM更新之前运行代码，使用 $effect.pre

9.$effect.tracking

是一个高级功能，它可以告诉您代码是否在跟踪上下文中运行
可以通过将订阅等内容放入子效果中，避免造成内存泄露等问题

10.$effect.root

是一个高级功能，它可以创建一个非跟踪的不受自动清理影响的范围。这对于需要手动控制的嵌套效果非常有用。

11.$props

声明组件属性
需要重命名 props，可以使用熟悉的解构赋值语法
要获取所有属性，请使用 REST 语法
可以声明属性类型
默认情况下，props被视为只读的，这意味着重分配不会向上传播，在开发模式下对mutable props的修改会引发一个警告。在父组件中尝试将只读prop赋值为null时，还会引发一个运行时错误。要声明props为可绑定的，请使用 $bindable() 。

12.$bindable

要将 props 声明为可绑定的，请使用 $bindable()` ”。除了作为常规 props 使用外，父组件还可以（可以，但不是必须）对它们进行操作（操作，即访问或修改 props 的值）。
可以向 $bindable() 传递一个参数。当属性为 undefined 时，该参数将用作默认值。
**注意：**如果父对象试图将 undefined 传递给一个具有默认值的属性，那么该属性将不会接受该值。

13.$inspect

$inspect 符文大致相当于 console.log ，但有一个例外，即每当其参数发生变化时，它会重新运行。 $inspect 可以跟踪对象或数组的深层反应状态，这意味着在对象或数组中使用细粒度的反应更新会导致其重新触发。
有一个with属性，可以用回调函数来调用它
它仅在开发期间起作用。

14.$hos

获取包含此组件的自定义元素的 this 引用。
仅在自定义元素组件中可用，仅在客户端可用。

Svelte5的Snippets

是一种在组件内部创建可重用的标记块的方法
参数可以解构
可以在组件的任何位置声明
可以引用外部声明的值
对同一词法范围（即同级元素及其子元素）内的所有元素都是可见的
直接在组件内部声明的代码片段会自动成为组件的 props

Svelte5的Event handlers

废弃 createEventDispatcher 和 on: 指令，转而采用回调属性和普通元素属性
弃用 on:click 指令，使用onclick
过时createEventDispatcher函数，使用$props()
事件处理程序只是函数，可以根据需要创建自己的封装程序
元素上的重复属性/属性（现在包括事件处理程序）是不允许的

Svelte5的API

Imports

Svelte 5还引入了一些新的可导入组件，其中包括现有的组件括现有的组件，如 getContext 、 setContext 和 tick

svelte

1.flushSync flush

强制立即应用任何待处理的效果（包括DOM更新），而不是在未来。

2.mount

实例化一个组件并将其安装到指定的目标上

3.hydrate

与 mount 类似，但会重用 Svelte 的 SSR 输出（来自 render 函数）中的 HTML 并在目标中使其具有交互性。

4.unmount

卸载使用 mount 或 hydrate 创建的组件

5.untrack

为了防止某个组件被视为 $effect / $derived 类型的依赖项

svelte/reactivity

提供了响应式组件 SvelteMap 、 SvelteSet 、 SvelteDate 和 SvelteURL 。这些组件可以从 svelte/reactivity 中导入并像原生组件一样使用。

svelte/events

委托的事件处理程序在其他事件处理程序之后运行。

委托的事件处理程序在其他事件处理程序之后运行。换句话说，使用 addEventListener 在代码中添加的处理程序将在使用 onclick 在声明性代码中添加的处理程序之前运行，无论它们在DOM中的相对位置如何。

这也意味着在声明性处理程序（例如，在动作中创建的处理程序）中调用 event.stopPropagation() 不会阻止在代码中添加的处理程序（例如，在动作中创建的处理程序）运行。

为了保持相对顺序，请使用 on 而不是 addEventListener ，它还接受一个可选的第四个参数，该参数与 addEventListener 的选项参数匹配

svelte/server

render

仅在服务器端可用，并且在使用 server 选项编译时。它接收一个组件，并返回一个带有 body 和 head 属性的对象，您可以在服务器渲染应用程序时使用这些属性来填充 HTML。

svelte/elements

Svelte提供了内置的DOM类型。DOM类型的常见用法是将props传递给HTML元素。

Svelte 会尽最大努力提供所有存在的 HTML DOM 类型。如果在我们的类型定义中缺少某个属性，欢迎您提交问题报告和/或补丁来修复它。对于实验性属性，您可以通过创建一个名为 .d.ts 的文件来在本地扩展现有的类型。