在JavaScript世界中，反应主导。感觉就像您在地图上的位置一样，React就在那里，您真的无法逃脱，到处都可以遇到它。不过，这是有道理的，因为它是最革命性的，而且许多人采用了它，甚至使前端听起来像您在说反应！

我认为是时候继续前进了。是的是，我知道，您不必将所有代码库重构为Svelte，但是您应该考虑尝试一下。不过，我必须警告您，一旦您经历了它的美丽和简单性，您可能会很想将整个公司的代码库重构为Svelte。

在本文中，我想与您分享Svelte所提供的一些酷事。在我们跳进去之前的最后一件事，当您意识到自己经历太多只是为了设置简单的东西时，您应该不会感到难过。相信我，我能感觉到你的痛苦。

内置的一切

认真地说，使用Svelte，您有更少的事情需要担心，并且无需为基本内容安装不必要的软件包。默认情况下，Svelte已经照顾了许多简单的事情。与REACT相比，您可以为基本任务安装许多软件包。进口的行为很多，这就是阅读您的代码的任何人的混乱开始的地方。

要在框架中内置大部分的酷物品真的很棒，您不必担心集成问题，并且很难弄乱或错误地使用它们。

总体更好的设计

每个人都可以同意，Svelte对建筑组件的总体设计进行了更好的设计。您会注意到一些与其他框架（例如React或Vue）不同的关键概念和模式。这就是美，适应设计非常容易。样式是在伟大的Svelte组件中示范的，因为您不必在CSS文件和组件之间跳跃。组件需要的一切都与之捆绑在一起！

一个苗条的组件通常包含其模板，逻辑和样式。这种方法使管理和维护组件变得更容易。

对我来说，另一件令人着迷>以及您熟悉的许多其他小事情会以一种或另一种方式改变。

示例

<script>
// all of your js functions, imports and stuff
</script>

<div>
<!--  your component html -->
</div>

<style>
/* all of your styling goes here */
</style>

国家管理

老实说，Svelte中的国家管理非常酷，并且更容易设置。简单性是Svelte的杰出特征之一。 Svelte的国家管理方法旨在直观且直接。

与其他框架不同，设置 共享状态 与其他框架不同，根本不是很棘手，也不需要您安装外部软件包。 内置所有内容

Svelte提供了商店的概念。商店是可以在组件之间共享的数据的反应性容器。 Svelte包括writable和readable之类的内置商店，您还可以创建自定义商店。

示例

// index.js
import {writable} from 'svelte/stores'

export let logged_in = writable(false)

您可以像这样阅读组件中的商店：

<!--Signin.svelte-->
<script>
    import { logged_in } from '$lib/index.js'
</script>

<div>
    {#if $logged_in}
        <button> Log Out </button>
    {:else}
        <button> Log In </button>
    {/if}
</div>

路线（Sveltekit）

在Svelte中完成路线的方式更加舒适和容易，不仅是创建它们的容易，而且还可以与它们合作。 Svelte中的路由可以具有单独的文件，可以处理页面获取数据的单独文件，该文件可以在服务器和客户端侧面或仅服务器端运行。

语法非常整洁，您会被吹走。 Sveltekit使用基于文件系统的路由，这意味着您的应用程序的路由'，换句话说，在src/routes中的文件夹或子文件夹中的每个+page.svelte file 3在您的应用程序中创建页面。

示例

• 路线

  • +pag.svelte- root

  • 大约

    • +pag.svelte

  • 博客

    • +pag.svelte

    • 新闻通讯

      • +pag.svelte

这些路线的渲染与此处的出现一样。例如，新闻通讯页面将看起来像这样的/blog/newsletter

在路由之间导航并不能完全重新加载页面，而是像单页应用程序一样更新页面的内容。这使得几乎瞬间在页面之间导航，从而获得了更好的用户体验。

小甜蜜的东西

1.反应性

要使任何变量在Svelte中做出任何变量，您需要做的就是在其背后添加一个金钱标志和一个冒号。

示例

<script>
    $: reactive = "this variable can react to changes"
</script>

2.切换类

svelte具有一个内置解决方案，用于根据特定状态切换类，也许您想更改背景颜色，如果特定状态更改，或者如果特定变量设置为true，则svelte允许您覆盖您，并且这非常容易做。

<script>
    let toggle = false
</script>

<button class="background-red" class:background-orange={toggle}>
    Click me
</button>

我们刚刚添加的内容将基于 toggle 变量为true/false的“背景橙色”。

3.过渡

Svelte对动画和过渡有内置的支持，使其成为创造流畅且具有视觉吸引力的UI效果的舒适之旅。老实说，在我在网络开发和CSS方面的整个经验中，我从未尝试过自己制作一个简单的动画，但是它们在我构建的网站中无处不在。

4.绑定

这个只是点亮ð¥。您可以使用简单的语法将事件侦听器直接绑定到DOM元素。

此示例显示了如何轻松将变量绑定到输入字段的值。

<script>
    let inputText
</script>

<input bind:value={inputText}/>

Svelte提供了事件修饰符，使得​​可以轻松处理常见场景。例如，您可以使用preventDefault修饰符来防止事件的默认行为。

<form on:submit|preventDefault={handleSubmit}>
  <input type="text" />
  <button type="submit">Submit</button>
</form>

结论

Svelte设计理念强调了开发人员的生产力，高效的运行时性能和令人愉悦的用户体验，这使其成为构建小型项目和大规模应用程序的令人信服的选择。

有些人认为Svelte不公平，考虑到它具有编译器，但是，嘿，为什么其他人也不创建一个编译器来使他们的框架变得有趣且易于使用？

svelte是一个非常强大的框架，但是它提供的简单性只是将其与包装区分开。这件事实际上可以将您变成向导ð©，我的意思是，您可以用这件事表演Magik！

快乐的编码！