Web框架层出不穷，作为主流Web框架之一的Svelte，有着独特的优势。它不仅可以构建完整的Web应用程序，还可以创建自定义元素，并在其他框架实现的已有Web应用程序中使用。本文将对Svelte进行详细的介绍，并带领读者了解使用Svelte从头开始构建Web应用程序所需的基础知识。

Svelte是什么？

Svelte是React、Vue和Angular等Web框架的替代方案。与其同类产品一样，Svelte可用于构建完整的Web应用程序。它还能用来创建自定义元素，这些自定义元素可以在使用其他框架实现的已有Web应用程序中使用。

Svelte由Rich Harris开发，Rich Harris曾在《卫报》工作，目前任职于《纽约时报》。Harris先前创建的Ractive Web框架被《卫报》采用，并成为Vue的一部分功能的灵感来源。Harris还创建了Rollup模块打包器，它是Webpack和Parcel的替代品。

Svelte尚未得到应有的重视。人们提到它时往往更关注它生成打包代码的能力，它打包出来的代码明显比竞争对手更小。但除此之外Svelte还简化了许多工作，包括定义组件、管理组件状态、管理应用程序状态以及添加动画等。

本文对Svelte做了详尽的介绍，并带读者了解用它从头开始构建Web应用程序所需的基础知识。

为什么要用Svelte？

与其他Web框架创建的应用程序相比，Svelte应用程序的包体积较小。它将应用程序代码编译到一个只包含少量框架代码的优化过的JavaScript文件来做到了这一点。

Svelte是用TypeScript实现的Web应用程序编译器。它不是运行时库。

例如，稍后介绍的Todo应用程序的包体积只有等效React应用程序的13％。这两款应用程序的链接在这里和这里。

这个网站统计了现实世界中Web应用使用多种Web框架构建的相关数据。根据统计，使用一些流行框架的应用经过gzip压缩后的大小（KB）分别为：

Angular + ngrx：134
React + Redux：193
Vue：41.8
Svelte：9.7

某些Web框架（包括React和Vue）使用虚拟DOM来优化渲染更改。重新渲染组件时，框架会在内存中构建DOM的新版本，然后将其与以前的版本做对比，不一样的部分才会被应用到实际的DOM上。

尽管这比更新实际DOM中的所有内容要快，但构建虚拟DOM并将其与前一个DOM进行比较是需要花时间的。

Svelte无需使用虚拟DOM就可以提供反应性。为了做到这一点，它会跟踪影响各个组件渲染的顶级组件变量的更改，并仅在检测到更改时才重新渲染DOM的这些部分。这样就能获得良好的性能表现。

Svelte大大简化了组件和应用程序状态管理。相关功能包括上下文、存储和模块上下文，稍后将逐一详细介绍。

Svelte为可访问性问题提供了运行时警告。例如，没有alt属性的<img>元素会被标记出来。

Svelte当前不支持TypeScript，但正在推进相关工作。

Svelte Native支持开发移动应用程序。它基于NativeScript。

Svelte会消失吗？

有人说一旦应用程序构建完毕，Svelte就会消失。

Svelte库主要由node_modules/svelte目录中的.js文件定义。主要函数在internal.js中定义，目前大约有1400行代码。

其他库文件则针对特定功能，具体包括：

easing.js
motion.js
register.js
store.js
transition.js

输入npm run build会在public目录中生成文件，包括bundle.js。应用程序使用的Svelte库函数将复制到bundle.js的顶部。后文展示的Todo应用程序中，这里大约是500行代码。

因此Svelte库代码不会消失；只是它与其他Web框架相比体积很小。

重要资源

下面是学习Svelte时需要查看的重要资源列表：

重新思考反应性

这是Rich Harris在You Gotta Love Frontend（YGLF）Code Camp 2019上的演讲。它解释了Svelte 3背后的动力，并提供了一些简要介绍。

想要尝试编写少量Svelte代码的话这个网站很有用。它还可以显示生成的代码并保存代码，以供分享和提交问题。

Svelte博客
Discord聊天室
Svelte GitHub存储库

入门

下面我们来一步步创建并运行一个Svelte应用程序。

从https://nodejs.org安装Node.js。

这将安装node、npm和npx命令。

npx degit sveltejs/template app-name

Rich Harris创建了degit工具来简化项目框架。它会下载一个git仓库，默认为master分支。本例中“sveltejs”是用户名，“template”是存储库。第二个参数是要创建的目录名称。

cd app-name
npm install
npm run dev

这将启动本地HTTP服务器并提供实时重载，这与npm run start是不一样的，后者忽略了实时重载。语法错误是在运行该命令的窗口中，而不是在浏览器中报告的。这是因为如果出现了错误，Svelte不会生成该应用程序的新版本。

浏览localhost:5000

这一步会输出紫色的“Hello world!”。

现在你可以开始修改应用程序了。

初探package.json文件会发现两件事。首先是Svelte默认使用Rollup来打包模块。需要的话，可以将其更改为使用Webpack或Parcel。其次是Svelte应用程序没有必需的运行时依赖项，只有devDependencies。

最重要的起始文件包括：

public/index.html
src/main.js
src/App.svelte

这些文件使用tab缩进，但需要的话可以将tab替换为空格。

文件 public/index.html包含以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width" />
    <title>Svelte app</title>
    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="stylesheet" href="global.css" />
    <link rel="stylesheet" href="bundle.css" />
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

请注意这里提取了两个CSS文件和一个JavaScript文件。

global.css包含可以影响任何组件的CSS。
bundle.css由每个组件中的CSS生成。
bundle.js是由每个组件中的JavaScript和HTML，以及应用程序中其他所有的JavaScript生成的。

文件src/main.js包含以下内容：

import App from './App.svelte';
 
const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});
 
export default app;

这里会渲染App组件。target属性指定应在何处渲染组件。对于大多数应用程序来说，这就是文档的主体。

name prop会传递给App组件。

通常来说最顶层的组件不需要props，此处的props属性可以删除。

文件src/App.svelte包含以下内容：

<script>
   export let name;
</script>
 
<style>
  h1 {
    color: purple;
  }
</style>
 
<h1> Hello {name}! </h1>

可以在使用该组件的文件中将导出的变量设置为props。

大括号用于输出JavaScript表达式的值。这里称为插值。稍后我们将看到，大括号也用于动态属性值。

定义组件

流行的Web框架使用多种JavaScript容器来定义组件。

Angular使用类。
React使用函数或类。
Vue使用对象字面量。

Svelte不使用任何JavaScript容器。

Svelte组件由包含JavaScript代码、CSS和HTML的.svelte文件定义。它们组合在一起形成组件定义，该定义将自动成为默认导出。

.svelte文件可以在src目录下的任何位置。它们包含以下三部分，这三部分都是可选的。

<script>
  // 确定范围的JavaScript在这里。
</script>
 
<style>
  /* 确定范围的CSS规则在这里。*/
</style>
 
<!-- 要渲染的HTML在这里。-->

请注意，每个部分都可以使用不同的注释语法。

组件名称

Svelte组件定义未指定组件名称。其他框架中组件名称是在源文件中由类名称、函数名称或属性值提供的，这里不是这样；导入.svelte文件时组件名称会被关联，并且必须以大写字母开头。

小写名称保留给预定义元素，例如HTML和SVG提供的元素。

例如：

// 有些令人困惑
import AnyNameIWant from './some-name.svelte';
 
// 较清晰的写法
import SameName from './SameName.svelte';

共享数据

在Svelte组件之间共享数据有四种方法。

Props

它们将数据从父组件传递到子组件。

上下文

祖先组件可以用它们来使数据可用于后代组件。

存储

它们将数据存储在所有组件外，并使其对所有组件可用。

模块范围

它们将数据存储在组件模块中，并使数据可用于组件的所有实例。

这些内置方法非常有用，实际上你都不需要状态管理库。

Props

组件可以通过props接受输入。它们被指定为父组件渲染的组件元素上的属性。

例如，父组件可以执行以下操作：

<script>
  import Hello from './Hello.svelte';
</script>
 
<Hello name="Mark" />

这里name prop的值是字面量字符串。

作为JavaScript表达式或非字符串字面量的prop值必须用大括号括起来，不能用引号。

src/Hello.svelte中定义的子组件可以这样做：

<script>
  export let name = 'World';
</script>
 
<div>
  Hello, {name}!
</div>

这里使用export关键字在组件的<script>部分中声明props。这里用Svelte特有的方式使用了有效的JavaScript语法。

由于父元素可以更改值，因此必须使用let关键字而不是const。

为props分配默认值是可选的。

目前Svelte没有像React、Vue和Angular那样（通过TypeScript）进行prop类型检查的功能。

属性

元素的属性值可以用JavaScript表达式提供。

其语法为：

<element-name attribute-name =“ expression” />

表达式也可以嵌入到字符串值中。

例如：

<Person fullName="{firstName} {middleInitial}. {lastName}" />

当属性值位于与该属性同名的变量中时，可以使用简写语法。

例如：

<Person {fullName} />

如果多个属性位于一个对象中，则可以使用散布运算符插入多个属性，其中键是属性名称，值是它们的值。

例如：

<script>
  let score = 0;
  const inputAttrs = {
    type: 'number',
    max: 10,
    min: 0,
    value: score
  };
</script>
 
<input {...inputAttrs} bind:value={score} />

上面的示例使用bind模拟双向数据绑定。这将在后文详细说明。

样式

.svelte文件的<style>标记中的样式将自动确定组件的范围。

Svelte将生成的相同的CSS类名称（svelte-hash）添加到可能受这些CSS规则影响的组件的每个渲染元素中，从而实现了作用域。

全局样式应在public/global.css中定义。

与标准CSS一样，样式标记中的注释必须使用/ * * /注释定界符。

"svelte3"ESLint插件会对未使用的CSS选择器发出警告。

可以有条件地将CSS类添加到元素。在以下示例中，仅当status大于零时才添加CSS类error。

<div class:error={status > 0}>{result}</div>

导入组件

组件可以在其<script>标记内导入其他组件。

例如：

import Other from './Other.svelte';

可以在组件的HTML部分中使用导入的组件。

插入HTML

要渲染一个值为HTML字符串的JavaScript表达式，请使用语法{@html expression}。

假设markup是一个包含HTML字符串的变量。下面的代码将渲染它：

<p>{@html markup}</p>

为了避免跨站点脚本，请escape不受信任来源中的HTML。

反应性

插值中引用的顶级变量的更改会自动导致这些插值被重新计算。

例如：

<script>
  let count = 0;
  const increment = () => count++;
</script>
 
<div>count = {count}</div>
<button on:click={increment}>+</button>

必须分配一个新值以触发此操作。将新元素推送到数组上不会触发它。

可以使用以下方法：

myArr = myArr.concat(newValue);
 
// 另一种技巧
myArr.push(newValue);
myArr = myArr;

响应式声明

在JavaScript语句开头写一个名称，后面跟一个冒号，就会创建一个标签语句。标签语句可以用作break和continue语句的目标。

有趣的是，在同一范围的多个语句中使用相同的标签名称在JavaScript中不是错误。

当这个语法用在顶层语句（未嵌套在函数或块中）上且名称为美元符号时，Svelte会将顶层语句视为响应式声明。

这是Svelte编译器以特殊方式处理有效的JavaScript语法的另一个例子。当这类语句引用的任何变量的值更改时，它们自己就会重复。这有点像Vue中的计算属性。

例如：

// average的值一开始就被计算
// 如果total或count的值更改就重新计算。
$: average = total/count;
 
// count的值输出在devtools控制面板中
// 当这个语句执行和每次更改时。
// 这方便了调试工作！
$: console.log('count =', count);

将$:应用于未声明变量的赋值时（比如上面的average赋值），不允许使用let关键字。

$:可以应用于一个块。

例如：

$: {
  // 这里是要重复的语句
}

这也可以应用于多行语句，比如if语句。

例如：

$: if (someCondition) {
  // 主体语句
}

如果条件或主体中引用的任何变量发生更改，上面的示例就会执行；但当然只有在条件为true时主体才执行。

例如，如果条件包括对函数的调用，则如果主体中的任何引用发生更改就会调用它们。

Markup中的逻辑

在markup中添加条件逻辑和迭代逻辑有三种常见方法。

React使用JSX，其中逻辑由大括号中的JavaScript代码实现。
Angular和Vue支持特定于框架的逻辑属性。例如，Angular支持ngIf和ngFor，而Vue支持v-if和v-for。
Svelte支持包装元素的类似Mustache的自定义语法。例如{#if}和{#each}。

IF语句

Svelte的条件逻辑以{#if condition}开始。开头的#表示块的起始标记。

用{/ if}标记结尾。开头的/表示块的结束标记。

有条件渲染的markup位于这两者之间。

它们之间可以包含的其他块标记有{:else if condition}和{:else}。开头的:表示块的继续标记。

例如：

{#if color === 'yellow'}
  <div>Nice color!</div>
{:else if color === 'orange'}
  <div>That's okay too.</div>
{:else}
  <div>Questionable choice.</div>
{/if}

虽说这里的语法乍看起来似乎很奇怪，但它确实能有条件地渲染多个元素。Angular/Vue中向元素添加特殊属性的方法需要指定一个公共父元素。

Each语句

Svelte的迭代从{#each iterable as element}开始。

用{/each}标记结尾。

每个元素要渲染的markup放在两者之间。

一般来说可迭代的是数组，但任何可迭代的值都能用。

{:else}之后的内容在可迭代内容为空时渲染。

例如，假设变量colors设置为[‘red’, ‘green’, ‘blue’]：

<!-- 分开行来使用color输出每种颜色。-->
{#each colors as color}
  <div style="color: {color}">{color}</div>
{/each}
 
<!-- 在单独的行上输出每种颜色，并在其前面
     从1开始的位置后跟括号。-->
{#each colors as color, index}
  <div>{index + 1}) {color}</div>
{/each}
 
<!-- 这里使用解构来在"people"的对象中获取特定的属性。-->
{#each people as {name, age}}
  <div>{name} is {age} years old.</div>
{:else}
  <div>There are no people.</div>
{/each}

如果要添加、删除或修改列表中的项目，则应为每个元素提供唯一的标识符。这类似React和Vue中所需的key prop。

在Svelte中，唯一标识符是#each语法的一部分，而不属于元素prop。在以下示例中，每个person的唯一标识符是对应的id属性。

{#each people as person (person.id)}
  <div>{person.name} is {person.age} years old.</div>
{/each}

Promise

Svelte提供了markup语法来等待promise解析或拒绝。它可以根据promise的未完成、已解析或已拒绝的状态提供不同的输出。

以下示例假定组件具有返回Promise的getData函数。在:then和:catch之后可以使用任何变量名来接收解析或拒绝的值。

{#await getData()}
  <div>Waiting for data ...</div>
{:then result}
  <div>result = {result}</div>
{:catch error}
  <div class="error">Error: {error.message}</div>
{/await}

下一个示例在等待Promise解析时省略了要渲染的markup。:catch部分也可以省略。

{#await getData() then result}
  <div>result = {result}</div>
{:catch error}
  <div class="error">Error: {error.message}</div>
{/await}

插槽

插槽允许子内容传递到组件。接收组件可以决定是否渲染它，在何处渲染。

请注意，空格算作子内容。

接收组件可以标记使用渲染所有子内容的位置。这称为默认插槽。

它还可以为没有向插槽提供内容的父元素提供默认内容来渲染。例如，<slot>Thanks for nothing!</slot>。

命名插槽允许父元素提供多组内容，接收组件可以针对这些内容决定是否渲染以及在何处渲染。父元素使用slot属性标识它们。子元素则定义它们在何处用带有匹配的name属性的slot元素来渲染。

下面是来自父元素的HTML示例，该HTML元素的目标是子元素ShippingLabel中的多个命名槽：

<ShippingLabel>
  <div slot="address">
    123 Some Street,<br />
    Somewhere, Some State 12345
  </div>
  <div slot="name">Mark Volkmann</div>
</ShippingLabel>

这是ShippingLabel.svelte：

<style>
  label {
    display: block;
    font-weight: bold;
  }
</style>
 
<div>
  <label>Ship To:</label>
  <slot name="name">unknown</slot>
  <slot name="address" />
</div>

绑定表单元素

像<input>、<textarea>和<select>这样的表单元素可以绑定到变量上。这将模拟双向数据绑定。

除了提供当前值之外，双向数据绑定还提供事件处理，以便在用户更改表单元素值时更新变量。

对于类型为number或range的<input>元素，双向数据绑定会自动将值从字符串强制转换为数字。

例如，考虑以下HTML表单：

这是使用单个Svelte组件的实现。注意在多处使用了bind:。

<script>
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
  const flavors = ['vanilla', 'chocolate', 'strawberry'];
  const seasons = ['Spring', 'Summer', 'Fall', 'Winter'];
  let favoriteColor = '';
  let favoriteFlavors = [];
  let favoriteSeason = '';
  let happy = true;
  let name = '';
  let story = '';
</script>
 
<style>
  div {
    margin-bottom: 10px;
  }
 
  input,
  select {
    border: solid gray 1px;
    border-radius: 4px;
    padding: 4px;
  }
 
  input[type='checkbox'],
  input[type='radio'] {
    margin-left: 5px;
  }
 
  label {
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
    vertical-align: top;
  }
</style>
 
<div class="form">
  <div>
    <label>Name</label>
    <input type="text" bind:value={name} />
  </div>
  <div>
    <label>Happy?</label>
    <!-- 对于checkbox, 要绑定到"checked"属性而非"value"上。 -->
    <input type="checkbox" bind:checked={happy} />
  </div>
  <div>
    <label>Favorite Flavors</label>
    {#each flavors as flavor}
    <label>
      <!-- 使用"bind:group"和一组相关的checkbox
           使值成为一组字符串。 -->
      <input type="checkbox" value={flavor} bind:group={favoriteFlavors} />
      {flavor}
    </label>
    {/each}
  </div>
  <div>
    <label>Favorite Season</label>
    {#each seasons as season}
    <label>
      <!-- 使用"bind:group"和一组相关的radio按钮
           使值成为单个字符串。 -->
      <input type="radio" value={season} bind:group={favoriteSeason} />
      {season}
    </label>
    {/each}
  </div>
  <div>
    <label>Favorite Color</label>
    <!-- 要将选项更改为可滚动列表以启用多重选项，添加
         "multiple"属性。 -->
    <select bind:value={favoriteColor}>
      <option />
      {#each colors as color}
      <!-- <option> 元素可以有一个"value"属性
           其值可以是字符串、数字或对象。-->
      <option>{color}</option>
      {/each}
    </select>
  </div>
  <div>
    <label>Life Story</label>
    <textarea bind:value={story} />
  </div>
 
  <!-- 这里报告了绑定设置的变量值，但前提是name有值。 -->
  {#if name}
  <div>
    {name} likes {favoriteColor}, {favoriteSeason},
    and is {happy ? 'happy' : 'unhappy'}.
  </div>
  <div>{name}'s favorite flavors are {favoriteFlavors}.</div>
  <div>Story: {story}</div>
  {/if}
</div>

除了绑定到基本变量之外，表单元素还可以绑定到对象属性。然后用户输入会使这些对象发生突变。

绑定定制props

Svelte可以将子组件prop绑定到父组件中的变量。这将允许子组件更改父组件变量的值。

例如，这是父组件：

<script>
  import Child from './Child.svelte';
  let pValue = 1;
</script>
 
<div>pValue = {pValue}</div>
<Child bind:cValue={pValue} />

这是子组件：

<script>
  export let cValue = '';
  const double = () => (cValue *= 2);
</script>
 
<div>cValue = {cValue}</div>
<button on:click={double}>Double</button>

按下Child组件中的按钮时，cValue会加倍，并且加倍的值由于绑定到cValue而成为pValue的新值。

事件处理

事件处理由on:event-name属性指定，该属性的值是调度事件时要调用的函数。事件名称可以是标准DOM事件或自定义事件的名称。事件对象将传递给给定的函数。

例如：

<!-- 函数 "handleClick" 必须在上面的<script>部分中定义。-->
<button on:click={handleClick}>Press Me</button>
 
<!-- 这里用匿名函数展示了内联事件处理。它为按钮设置了变量"clicked"到DOM元素。-->
<button on:click={event => clicked = event.target}>Press Me</button>

可以为同一个事件指定多个事件处理函数，并且在分派事件时将分别调用每个函数。

例如：

<button on:click={doOneThing} on:click={doAnother}>Press Me</button>

事件处理程序可以使用修饰符名称前面的竖线指定任意数量的事件修饰符。

例如：

<button on:click|once|preventDefault={handleClick}>Press Me</button>

支持的修饰符有：
capture
它导致处理程序函数仅在捕获阶段，而不是默认的冒泡阶段被调用。

once
它将在第一次发生事件后删除处理程序。

passive
它可以提高滚动性能。更多信息参阅这里。

preventDefault
它可以防止事件的默认操作发生。例如，它可以停止表单提交。

stopPropagtion
它可以防止捕获/冒泡流程中的后续处理程序被调用。

从on:属性中省略事件处理函数可以快速将事件转发到父组件。

例如，假设组件结构的一部分是A> B> C，并且C发出事件“foo”。B可以使用<C on:foo/>将其转发到A。

请注意，on:属性没有值。

此方法也可以用于转发DOM事件。

组件可以调度事件。

例如：

<script>
  import {createEventDispatcher} from 'svelte';
 
  // 组件实例化时必须调用,
  // 可选或稍后调用都不行。
  const dispatch = createEventDispatcher();
 
  function sendEvent() {
    // 事件关联的数据可以是一个原语或对象。
    // 事件名称不应包含横线。
    dispatch('someEventName', optionalData);
  }
</script>

这些事件仅转到父组件。它们不会自动在组件结构中冒泡。

父组件使用on:侦听子组件的事件。

例如，如果父组件定义了函数handleEvent，则它可以在Child组件分派具有给定名称的事件时注册要调用的函数。

<Child on:someEventName = {handleEvent} />

生命周期函数

Svelte支持在组件实例的生命周期中发生四个特定事件时调用注册函数。这些事件包括：

已挂载时
更新前
更新后
被销毁时

术语“已挂载”表示已将组件实例添加到DOM。

术语“被销毁”表示该组件实例已从DOM中删除。

要为这些事件注册函数，请从svelte包中导入所提供的生命周期函数。

import {afterUpdate, beforeUpdate, onDestroy, onMount} from 'svelte';

然后调用这些函数，并在事件发生时向它们传递要调用的函数。

最常用的生命周期函数是onMount。一种用法是将焦点移至给定的表单元素。另一种用途是从REST服务检索组件所需的数据。

下面是一个移动焦点的示例。

<script>
  import {onMount} from 'svelte';
  let name = '';
  let nameInput;
  onMount(() => nameInput.focus());
</script>
 
<input bind:this={nameInput} bind:value={name} />

属性bind:this会将指定为其值的变量设置为对input的DOM元素的引用。这在传递给onMount的函数中使用，以将焦点移至input。

从DOM中删除组件实例时，使用onDestroy注册要调用的函数的另一种方法是从通过onMount注册的函数返回该函数。这种方法有点像React中的useEffect hook，不同之处在于Svelte中传递给useEffect的函数在挂载和更新时都运行。

生命周期函数可以从辅助函数中调用。这些可以在单独的.js文件中定义，从而导入它们并用于多个组件。这很像定义自定义的React hooks。

建议以“on”开头命名这些辅助函数，就像React hook名称以“use”开头那样。

动作

将特定元素添加到DOM时，动作（Action）会注册要调用的函数。

动作是在具有属性use:fnName = {args}的元素上指定的。已注册的函数将传递DOM元素和参数（如果存在）。如果不需要除元素以外的其他参数，则省略= {args}。

这在某种程度上与onMount生命周期函数有关，该函数注册了将组件的每个实例添加到DOM时要调用的函数。将组件中的特定元素添加到DOM时，就将调用动作。

例如：

<script>
  let name = '';
  const focus = element => element.focus();
</script>
 
<!-- 输入元素添加到DOM时调用焦点函数。-->
<input bind:value={name} use:focus />

动作函数可以选择返回具有update和destroy属性（也就是函数）的对象。这个功能不常用。

每当参数值更改时都会调用update函数。如果没有参数当然是不行的。

从DOM中删除元素时将调用destroy函数。

上下文

上下文（Context）提供了一种替代方法，可以使用props和存储（接下来介绍）来使组件中的数据在其他组件中可用。上下文数据只能在后代组件中访问。

要在组件中定义上下文，请导入setContext函数并调用它，并提供上下文键和值。

例如：

import {setContext} from 'svelte';
 
// Must be called during component instantiation.
setContext('favorites', {color: 'yellow', number: 19});

要在后代组件中使用上下文，请导入getContext函数并调用它，并提供上下文键。这将从已使用该键定义上下文的最近的祖先组件获取上下文值。

例如：

import {getContext} from 'svelte';
 
// 组件实例化时必须调用。
const favorites = getContext('favorites');

上下文键可以是任何类型的值，不只是字符串。

上下文值可以是任何类型的值，包括具有后代组件可以调用的方法的对象和函数。

如果创建了上下文的组件再使用相同的键和不同的值调用setContext，则后代组件将不会接收到更新。它们只能看到组件初始化期间可用的内容。

与props和存储不同，上下文不是响应式的。

下面是一个使用上下文使数据在后代组件中可用的示例。

<!-- In A.svelte -->
<script>
  import {setContext} from 'svelte';
  import B from './B.svelte';
  setContext('favorites', {color: 'yellow', number: 19});
</script>
 
<div>
  This is in A.
  <b ></b>
</div>

<!-- In B.svelte -->
<script>
  import C from './C.svelte';
</script>
 
<div>
  This is in B.
  <C />
</div>

<!-- In C.svelte -->
<script>
  import {getContext} from 'svelte';
  const {color, number} = getContext('favorites');
</script>
 
<div>
  This is in C.
  <div>favorite color is {color}</div>
  <div>favorite number is {number}</div>
</div>

这将渲染以下内容：

This is in A.
This is in B.
This is in C.
favorite color is yellow
favorite number is 19

原文链接：
https://objectcomputing.com/resources/publications/sett/july-2019-web-dev-simplified-with-svelte

创作场景

被称为“三大框架”替代方案，Svelte 如何简化 Web 开发工作（上）