后端开发教程 - Java、Spring Boot 实战 - msg200.com
我喜欢 Svelte 的 5 个理由
最后的想法
我决定写这篇文章来谈谈我第一次尝试 Svelte 后学到的一些事情。
如果你不知道 Svelte 是什么，请查看以下链接：https://svelte.dev/blog/svelte-3-rethinking-reactivity
TL;DR
- React 和 Vue 等传统框架的大部分工作都是在浏览器中完成的
- Svelte 将该工作转移到构建应用程序时发生的编译步骤。
- Svelte 不使用虚拟 DOM 差异等技术，而是编写代码，在应用程序状态发生变化时精确更新 DOM。
这太酷了，但我发现还有其他一些事情值得一提：
1- 无障碍优先
Svelte 特别注重可访问性，如果你编写了无法访问的标记，它会发出警告
2-传播道具
如果您有一个属性对象，您可以将其“传播”到组件上，而不是像这样指定每个属性：
<script>
import UserInfo from './UserInfo.svelte';
const info = {
firstName: 'Mauro',
lastName: 'Garcia',
country: 'Argentina',
website: 'https://maurogarcia.dev'
};
</script>
<UserInfo {...info}/>
3-无需虚拟元素
您不需要在视图中为条件和循环创建虚拟元素
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if}
<ul>
{#each articles as article}
<li><span>{article.title}</span></li>
{/each}
</ul>
4- 标记中的 await 承诺
使用异步数据？看看如何轻松定义在获取数据时和获取数据后渲染的内容：
{#await user}
<p>...waiting</p>
{:then data}
<p>Welcome, {data.firstName} + {data.lastName}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
5-商店
商店只是一个具有订阅方法的对象，它允许感兴趣的各方在商店值发生变化时收到通知。
在以下示例中，Incrementer组件将更新计数存储，然后，我在 App.Svelte 组件中使用自动订阅，以便在计数存储值发生变化时收到通知（您可以通过在存储名称前加上 $ 来引用存储值）
// stores.js
import { writable } from 'svelte/store';
export const count = writable(0);
<!-- App.Svelte -->
<script>
import { count } from './stores.js';
import Incrementer from './Incrementer.svelte';
</script>
<!-- Prefix count with $ to use auto-subscription -->
<h1>The count is {$count}</h1>
<Incrementer/>
<!-- Incrementer.Svelte -->
<script>
import { count } from './stores.js';
function increment() {
count.update(n => n + 1);
}
</script>
<button on:click={increment}>
+
</button>
最后的想法
几年前，我决定将注意力集中在 Angular 上，成功地抵制了尝试 React 或 Vue 等其他酷炫框架的诱惑。这个决定主要有两个目的：
- 通过尽可能多地重复使用代码来提高我的生产力。
- 精通某个特定的框架。就我而言，是 Angular。
但在使用 Angular 多年之后，我决定看看其他框架👀。就在那时，Svelte 立刻吸引了我的注意。
我非常喜欢 Svelte 专注于代码简洁和简洁性，从而大幅减少了 bug。
虽然我还没有考虑在所有项目中都使用 Svelte，但这是一个非常大的改变，我会密切关注它的开发，并继续与大家分享一些实验。
我期待的主要功能之一是 TypeScript 支持。在从事类型检查多年之后，我认为这个功能对于我全面转型来说是必不可少的。