本文档说明了 Svelte 在编译器和运行时如何处理元素属性和数据绑定。它涵盖了 Svelte 在编译过程中如何处理属性，在运行时如何将它们设置在 DOM 元素上，以及如何处理组件状态和 DOM 之间的双向数据绑定。有关事件和事件处理的信息，请参阅 Events and Event Handling。
在 Svelte 中，属性和绑定提供了 DOM 操作和数据同步的主要机制。
来源
Svelte 中的属性包括标准的 HTML 属性、DOM 属性、类名、样式以及特殊的 Svelte 指令。
Svelte 处理多种类型的属性
| 类型 | 示例 | 实现 | 目的 |
|---|---|---|---|
| 标准 HTML 属性 | <div id="main"> | set_attribute | 设置为 DOM 属性 |
| DOM 属性 | <input value="text"> | 直接属性访问 | 设置为 JavaScript 属性 |
| 类 | <div class="foo"> | set_class | 优化的类名处理 |
| 风格 | <div style="color: red"> | set_style | 优化的样式处理 |
| 展开属性 | <div {...props}> | set_attributes | 应用多个属性 |
| 布尔属性 | <button disabled> | 特殊处理 | 正确的布尔属性处理 |
| 自定义元素数据 | <custom-element prop={value}> | set_custom_element_data | 用于 Web Components |
来源
来源
设置单个属性的主要函数是 set_attribute。
来源
对于展开属性和多个属性，Svelte 使用 set_attributes，它能一次高效地处理多个属性。
来源
绑定支持组件状态和 DOM 元素之间的双向数据流，允许用户输入自动更新组件状态。
Svelte 为不同元素支持多种绑定类型。
| 类别 | 示例 | 实现函数 |
|---|---|---|
| 输入元素 | bind:value、bind:checked | bind_value、bind_checked |
| 分组任务 | bind:group | bind_group |
| 内容 | bind:innerHTML、bind:textContent | bind_content_editable |
| 媒体 | bind:currentTime、bind:volume | bind_current_time、bind_volume |
| 尺寸 | bind:clientWidth、bind:offsetHeight | 窗口大小观察者绑定 |
| 组件引用 | bind:this | bind_this |
| 特殊元素 | bind:scrollY、bind:online | 窗口/文档绑定 |
来源
来源
让我们以输入元素的 bind:value 为例，看看典型的绑定实现。
来源
在编译 Svelte 组件时，属性和绑定会被转换为高效的 JavaScript，以便在运行时执行。
对于静态属性，Svelte 会直接将它们包含在模板字符串中。
对于动态属性，Svelte 会生成 JavaScript 代码来更新它们。
来源
Svelte 会分析绑定表达式并生成相应的绑定代码。
来源
Svelte 对需要独特行为的某些属性情况进行了特殊处理。
类名和样式有专门的处理函数。
来源
某些元素对 value 属性有特殊处理。
| 元素 | 特殊行为 |
|---|---|
<option> | 同时设置 value 和 __value 属性。 |
<select> | 需要 select_option 函数来正确更新选中的选项。 |
<input> | 根据输入类型（数字、复选框等）有不同的处理方式。 |
<textarea> | 需要处理子内容与 value 属性之间的关系。 |
来源
Svelte 支持多种元素类型的绑定。
来源
来源
来源
Svelte 包含一系列用于高效处理属性和绑定的优化措施
来源
在水合过程中（当客户端 JavaScript 接管服务器渲染的 HTML 时），会特别注意避免不必要的 DOM 操作
来源
Svelte 的属性和绑定系统提供了一种强大而高效的方式来管理 DOM 更新和数据同步。编译器会分析组件模板，并将属性和绑定转换为优化的 JavaScript，从而最大限度地减少 DOM 操作，同时保持响应性。
运行时函数协同工作，确保组件状态与 DOM 保持同步，从而轻松地用最少的样板代码构建交互式用户界面。