为什么你应该尝试 Svelte！

2025-06-09

为什么你应该尝试 Svelte！

Svelte 简介

最近，我在观看2019 年 StateofJS 大会时再次遇到了 Svelte 。他们获得了“预测奖”，这意味着他们“被授予了一项可能接管……或者不会接管的新兴技术”。

去年我读过关于 Svelte 的文章，但没什么特别的，所以就忘了。不过 2019 年的 StateofJS 大会引起了我的兴趣，所以我访问了该网站。

如果您喜欢这篇文章，请微笑一下，分享它，关注我，查看我的 RSS 提要并订阅我的时事通讯。

我的第一印象还不错。
它是：

构建用户界面的全新方法......

和 Svelte

编写代码，当应用程序状态发生变化时精确更新 DOM。

好的，不错……听起来不错！我当时还不知道该不该推荐 Svelte 做你的下一个应用，但它引起了我的注意。我玩 ReactJS 和 Angular 已经很多年了，我觉得这些前端框架已经足够深入了。我看了看 VueJS，也很喜欢，但从来没在项目中用过。

回到 Svelte！他们鼓励你阅读他们的“入门博客文章”，所以我继续往下读。故事就从这里开始了。你们都应该看看 Rich Harris在You Gotta Love Frontend Code Camp上关于“重新思考响应式”的视频。即使你对学习 Svelte 不感兴趣，如果你只喜欢 ReactJs、Vue 或其他原因，这个演讲也非常有趣。🚀

太长不看

查看您在 Svelte 中的第一个组件需要了解的内容，并从编译器框架中了解版本 3 的主要优势。

我最初在我的博客上发布了这篇文章。

目录

  1. 什么是 Svelte？
  2. 为什么你应该尝试 Svelte？
  3. 在哪里可以尝试？
  4. 如何开始您的第一个组件？
  1. 下一步是什么？

1.什么是 Svelte？

那么它是什么？Svelte 是一个组件框架。你可以定义组件，并在你的 Web 应用、网站或任何正在实现的项目中复用它们。就像 ReactJS、VueJS 或任何其他框架一样。但它们之间有什么区别呢？主要区别之一是它在构建时运行。

但这是什么意思呢？它在构建时运行？这意味着 Svelte 更像是一个编译器，而不是一个运行时组件框架。它不需要浏览器中的任何抽象层来运行你的代码。Svelte 会将你实现的组件编译成纯 JavaScript 代码。

所有浏览器都喜欢纯 JavaScript 或 Vanilla JavaScript，因为这种高效的代码比其他任何代码都能更快地解析和执行。由于它是纯 JavaScript，您的代码可以直接更改 DOM。Svelte 不需要虚拟 DOM 来模拟快速更新给用户。

2. 为什么你应该尝试 Svelte

...框架主要是用来组织你的思想的工具，而不是你的代码。（里奇·哈里斯）

Svelte 是一个框架。React 也是一个，我们也可以考虑使用 VueJs。使用 Svelte 的主要理由是什么？

  1. 部署后，您将获得在浏览器中运行的原生 JS 。快速且简单的 JavaScript

  2. 使用 Svelte 开发的应用兼容性极佳。例如，如果您在 Svelte 中开发了一个计时器，则可以在任何其他框架中使用其编译后的版本。为什么？看看排名第一的 VanillaJS。

  3. 没有了运行时框架的抽象层，你向浏览器提供的代码就更少了。代码拆分的价值会更大。你只需要提供你自己的代码，而无需框架代码。

  4. Svelte 的维护者可以自由选择他们想要添加到框架中的功能。由于 Svelte 本身并不包含在编译后的 JavaScript 输出中，因此他们可以添加功能，而无需担心运行时用户的性能问题。他们可以添加大量的功能，而且我们这些开发人员不会因为包大小而受到任何不利影响。

  5. 关注这些优秀的方法总是有益的。从性能和用户体验的角度来看，我认为像 GatsbyJs 这样的 JAMStack 应用是不可或缺的。

剧透：Svelte 还开发了Sapper——Web 开发中的下一个小奇迹

“令人震撼的动图” 令人震撼的动图

3. 在哪里可以尝试？

最简单的方法是使用他们的REPL。REPL 是一个在线编辑器，你可以在浏览器中查看框架的功能。我建议你也完成教程。它们彼此之间构建得很好，但如果你只是想在功能之间切换，它们仍然是独立的。

Web 性能检查表

4. 如何开始您的第一个组件？

如果要在本地计算机上构建应用程序，请确保安装了 Node.js。否则，您可以使用 REPL。

在这种情况下，我们使用 Node 进行安装，并使用npx命令在本地机器上安装开发环境。

npx degit sveltejs/template svelte-tutorial

cd svelte-tutorial

这些命令为我们下载了所有必要的文件，我们需要完成该设置以npm install安装我们列出的所有依赖项package.json。

运行npm run dev开始并在浏览器中访问端口 5000 上的 localhost。

现在我们准备实现我们的第一个组件。

显示开发服务器启动的终端

访问 localhost:5000 上的浏览​​器并检查页面是否正在运行。

在 localhost:5000 上运行开发服务器

在开始编码之前，让我们快速了解一下组件基础知识：

零部件

Svelte 组件在文件中声明.svelte，包含三个主要部分。

  1. 标记

你在每个组件文件中编写 HTML 代码。我的 HTML 代码放在文件底部。例如，一个没有样式和 JavaScript 的简单组件如下所示。

SimpleHeadline.svelte

<h1>Hello world!</h1>
  1. 样式

组件样式包裹在<style>标签之间，包含组件的 HTML 文件。我们在上面的标题中添加了一些样式，然后重命名了文件。

StyledHeadline.svelte

<style>
  h1 {
    font-size: 42px;
  }
</style>

<h1>Hello world!</h1>
  1. JavaScript

<script>我们在文件中添加标签。脚本块包含 JavaScript 逻辑。为了演示，我创建了另一个名为 的文件DynamicStyledHeadline.svelte。

<script>
  let name = 'Nora';
</script>

<style>
  h1 {
    font-size: 42px;
  }
</style>

<h1>Hello {name}!</h1>

看看我如何在 HTML 代码中将相同的变量添加到花括号中{VARIABLE}。这就是使变量可供模板访问的方法。

<script>
  import SimpleHeadline from './components/SimpleHeadline.svelte';
  import StyledHeadline from './components/StyledHeadline.svelte';
  import DynamicStyledHeadline from './components/DynamicStyledHeadline.svelte';
</script>

<style>
  main {
    /* ... */
  }
</style>

<main>
  <SimpleHeadline />
  <StyledHeadline />
  <DynamicStyledHeadline />
  <!-- ... -->
</main>

如果您像上面一样将组件导入到您的应用程序中，您就可以DynamicStyledHeadline在本地页面上看到它。

该图展示了三个不同的标题，以说明 Svelte 组件的功能

⚠️ 标记清理 ⚠️如果您想在变量中插入标记，可以使用类似注解的语法。{@html string}不会清理您的标记。您应该手动对其进行转义。

<script>
  let string = 'this string contains some <strong>HTML!!!</strong>';
</script>
<p>
  {@html string}
</p>

Svelte 警告

我喜欢 Svelte 提供的警告功能。在下面的示例中，出现了一条警告，提示未找到 alt 属性。您可以在本地开发环境或 REPL 中查看该通知。

<script>
  let src = 'tutorial/image.gif';
</script>

<img src="{src}" />
<img {src} />
<!-- shorthand -->

<!-- svelete expects this line with the alt attribute: <img {src} alt="A man dances."> -->

组件逻辑和条件渲染

If/else 语句

在大多数应用程序中，您需要根据应用程序或组件状态来渲染标记。在 Svelte 中，您可以使用if/else语句来实现这一点。如果您在任何项目中使用过 Handlebars，那么它们可能看起来很熟悉。任何条件块都以 开头#，以 结尾/。如果您需要else块，请使用:如下所示的字符。else 块可以是普通的，也可以包含另一个 if 语句。

<script>
  let name = 'Nora';
</script>

{#if name === 'Nora'}
<p>{name} - What a beautiful name.</p>
{/if} {#if name === 'Nora'}
<p>{name} - What a beautiful name.</p>
{:else if name === 'Linda'}
<p>{name} - I like that name</p>
{:else}
<p>{name} - The name is also beautiful.</p>
{/if}

Svelte 中的循环

在现实世界中，我们需要循环遍历数据。就像 if 语句一样，代码块以 开始#，以 结束/。只要对象具有length属性，就可以循环遍历它。您可以使用 循环遍历泛型可迭代对象each [...iterable]。在我们的例子中，我们循环遍历names数组，并借助as关键字访问当前名称。此外，我们将当前索引作为第二个参数。

你也可以使用解构语法。在本例中，使用each names as { name }。

<script>
  let names = [{ name: 'Nora' }, { name: 'Linda' }, { name: 'Helga' }];
</script>

<h1>Beautiful names</h1>

<ul>
  {#each names as currentName, index}
  <li>
    <a
      target="_blank"
      href="https://en.wikipedia.org/wiki/{currentName.name}_(name)"
    >
      {currentName.name}
    </a>
  </li>
  {/each}
</ul>

等待数据

由于我们在 Web 开发中都必须处理异步操作，因此也必须等待它。JavaScript 语言特性（例如await关键字）可以帮助我们实现这一点。在 Svelte 中，我们有一个便捷的语法来等待 Promise 完成解析：#await🚀。

<script>
  let promise = getRandomNumber();

  async function getRandomNumber() {
    const res = await fetch(`tutorial/random-number`);
    const text = await res.text();

    if (res.ok) {
      return text;
    } else {
      throw new Error(text);
    }
  }

  function handleClick() {
    promise = getRandomNumber();
  }
</script>

<button on:click="{handleClick}">
  generate random number
</button>

{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

5. 下一步是什么？

您可以在GitHub上找到本文的所有资源。欢迎随时查看、尝试或 fork。

现在你应该已经准备好开始学习你的第一个组件了。如果你想深入了解，我建议你花一两个小时的时间学习一下官方教程。👨‍🏫

如果您喜欢这篇文章，请微笑一下，分享它，关注我，查看我的 RSS 提要并订阅我的时事通讯。

干杯，马克

鏂囩珷鏉ユ簮锛�https://dev.to/marcradziwill/why-you-should-try-svelte-54k3
Devto 翻译
PREV
软技能已过时。这里有一个更好的模型
NEXT
我分析了一年的代码审查最佳实践。以下是我学到的。