适合初学者的 Svelte：简易指南
什么是 Svelte？
Svelte 是一个现代 Web 框架，可让您编写更少的代码并构建高效的 Web 应用程序。Svelte 提供了一个开创性的框架，该框架以其有效性和易用性而著称。Svelte 通过将大部分精力转移到编译时间，保证应用程序比使用传统框架创建的应用程序更轻、更快。它的编译器在构建时将您的代码编译成高度优化的 vanilla JavaScript。这意味着不需要虚拟 DOM，这使得 Svelte 应用程序比 React 和 Vue 等其他框架更快、更高效。在本文中，我们将为初学者探索 svelte 并更进一步。
为什么选择 Svelte？
Svelte 提供了几个优势，使其成为 Web 开发的有吸引力的选择：
-
更快的加载时间：得益于编译时优化，Svelte 显著减小了最终捆绑包的大小。这会导致更快的加载时间，这是增强用户体验和提高 SEO 排名的关键因素。
-
轻松的反应性：Svelte 的响应性模型既简单又强大。开发人员可以轻松定义响应式语句，确保 UI 与应用程序状态保持同步，而不会产生虚拟 DOM 差异的开销。
-
简单易学：Svelte 的语法与标准 HTML、CSS 和 JavaScript 非常相似，开发人员非常容易上手，尤其是那些已经熟悉 Web 开发基础知识的人。
-
内置状态管理：与其他通常需要外部库进行状态管理的框架不同，Svelte 的内置存储功能提供了简单的解决方案，简化了跨组件的状态管理。
面向初学者的 Svelte 入门
要开始使用 Svelte，您可以使用官方 Svelte 模板创建一个新项目。首先，确保您的系统上已安装 Node.js。然后，您可以使用以下命令创建新的 Svelte 项目：
npm create svelte@latest my-svelte-app系统将提示您提出一系列问题以配置您的项目。在这个例子中，我们将使用一个从头开始的骨架项目，我们将使用 typescript。创建项目后，您可以导航到项目目录并通过运行 来安装所有依赖项。然后，您可以通过运行 来启动开发服务器。npm installnpm run dev
我使用以下配置进行项目设置：
编写您的第一个 Svelte 组件
Svelte 组件使用文件扩展名定义。让我们创建一个显示问候消息的简单组件。在 directory 中创建一个名为 new file 并添加以下代码：.svelteHelloWorld.sveltesrc/components
let name = 'world';
Hello {name}!
h1 {
color: royalblue;
}
现在，我们需要将此组件导入到我们的文件中。按如下方式更新文件：routes/+page.svelte+page.svelte
import HelloWorld from "../components/HelloWorld.svelte";
此处文件名中的符号是 SvelteKit 用来表示页面路由的约定。++page.svelte
您现在应该会看到页面上显示的问候消息。这是一个简单的示例，说明了如何在 Svelte 中创建和使用组件。
Svelte 中的反应性
Svelte 的响应式模型允许你定义反应式语句，当底层数据发生变化时，这些语句会自动更新 UI。让我们修改我们的组件，包括一个递增变量的按钮：HelloWorld.sveltenum
let name = 'world';
let num = 0;
function increment() {
num += 1;
}
Hello {name}!
Number: {num}
/* styles here */
您应该看到如下内容：
这个例子展示了 Svelte 如何毫不费力地处理反应性。系统会自动监控变量的更改，并且 DOM 无需额外的代码或库即可更新 DOM。num
创建新路由
应用程序的路由（即用户可以访问的 URL 路径）由代码库中的目录定义：
src/routes是根路由src/routes/about创建 /about 路由src/routes/blog/[slug]使用参数 slug 创建路由，该参数可用于在用户请求 /blog/hello-world 等页面时动态加载数据
内置过渡 😁
Svelte 提供了内置的过渡效果，可让您轻松为元素添加动画效果。让我们创建一个路由来演示 Svelte 中的过渡。在目录中创建一个名为 的新文件夹，并使用以下代码添加一个文件：/fadefadesrc/routes+page.svelte
import { fade } from 'svelte/transition';
let visible = true;
{#if visible}
Fade me in and out
{/if}
/* styles here */
现在，您可以在浏览器中导航到路线，并在单击按钮时看到淡入和淡出效果。这只是 Svelte 中可用的众多内置过渡的一个例子。/fade
组件生命周期
Svelte 组件的生命周期包括创建、更新和销毁等各个阶段。您可以使用生命周期函数在组件生命周期的特定阶段执行作。以下是 Svelte 中可用的一些生命周期函数：
-
onMount：安排回调在组件挂载到 DOM 后立即运行。 -
beforeUpdate：安排回调在任何状态更改后，在组件更新之前立即运行。 -
afterUpdate：安排回调在组件更新后立即运行。 -
onDestroy：安排在卸载组件之前立即运行回调。
您可以使用这些函数来执行诸如获取数据、设置订阅或在创建、更新或销毁组件时清理资源等任务。
我们可以向组件添加一个简单的示例来演示 and 生命周期函数：HelloWorld.svelteonMountonDestroy
// ...
import { onMount, onDestroy } from 'svelte';
onMount(() => {
console.log('Component has been mounted');
});
onDestroy(() => {
console.log('Component is being destroyed');
});
// ...
条件语句和循环
Svelte 为条件语句和循环提供了一种简单直观的语法。你可以使用 and 块有条件地渲染元素或迭代数组。这是在 Svelte 中使用条件语句和循环的示例。ifeach
让我们创建一个路由来演示条件语句和循环。在目录中创建一个名为 的新文件夹，并使用以下代码添加一个文件：/conditionalsconditionalssrc/routes+page.svelte
import { slide } from 'svelte/transition';
let show = true;
let items = ['Apple', 'Banana', 'Cherry'];
Hello Svelte!
{#if show}
{#each items as item}
- {item}
{/each}
{/if}
/* styles here */
在本文的前面，我们使用 Block 有条件地渲染 fade 效果。在这个例子中，我们使用 Block 遍历一个项目数组，并渲染一个列表和该 Block 来切换列表的可见性。ifeachif
如果您在浏览器中前往路线，您应该会看到以滑入效果呈现的项目列表。单击该按钮将切换列表的可见性。/conditionals
结论
Svelte 是一个功能强大的 Web 框架，它提供了一种构建 Web 应用程序的新方法。它的简单性、反应模型和内置功能使其成为希望创建高效且可维护应用程序的开发人员的绝佳选择。这份面向初学者的 Svelte 指南很好地理解了如何开始使用 Svelte 并构建您的第一个组件、路由和过渡。您可以在 Svelte 官方网站上阅读有关 Svelte 的更多信息。