携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
新系列《这些前端新技术你很难再忽视了》，包括：SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势，很有必要了解。
咱们将采用 5W1H 分析法，即 What（何事）、Why（何因）、Where（何地）、When（何时）、何人（Who）、How（何法）6 个维度来解析这些“新玩意儿”。
本篇带来 —— Svelte，或许很多工友已经很熟悉了，还不认识的工友赶快来学、卷起来~
闲话少说，冲了~
- 点赞收藏关注，今晚一夜暴富 👍👍👍
🤔What
什么是 Svelte？
答：Svelte 是一个构建 web 应用程序的工具。
Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，关键区别有 3 点：
- 编译时间不一样；
- 无虚拟 Dom；
- 响应式原理不一样；
哈~ React、Vue、Svelte、SolidJS 到底是什么关系？
答：用 LOL 英雄来打个比方吧~
Vue 像 LOL 中的 寒冰射手·艾希，上手简单明快，小白萌新只会平A的也可以上手，要玩的好那必须要有一定的意识，上限是有天花板的，而且最好是带上一个辅助配合—— Vuex，Vue-router等。
Svelte 像 LOL 中的 暗夜猎手·薇恩，虽然身板也很脆弱，但异常灵活 ，能有很大的秀的空间、门槛偏高，适合高手。
React 像 LOL 中的 皮城女警·凯瑟琳，看起来好玩，其实对操作者的要求挺高的，会玩的能玩出天际，不会的基本就是不会，萌新想要玩的动，需要比较多时间的练习；用起来还比较吃队友（社区插件）
SolidJS 像 LOL 的 皮城执法官·蔚，和皮城女警是 couple，还有个说法：“目前 React、Vue、Svelte 没人能接住 SolidJS 这一拳”，蔚就是拳师，“先打一拳，再把问题问个遍。”
可以粗暴简单这样记忆，Svelte 和 Vue 是一对，SolidJS 和 React 是一对。书写风格 Svelte 和 Vue 很像；而 SolidJS 和 React 很像；
🧐Why
总在说预编译，为什么要预编译？
答：Svelte 的核心思想在于 通过静态编译减少框架运行时的代码量。打包出来的项目就几乎是原生JS代码，不会再像 React、Vue 那样在代码运行的时候再执行 虚拟 dom 那些。
那咱好不容易学会了虚拟 Dom，现在又跟我说取消虚拟 Dom，为什么？
答：Svelte 的编译策略决定了它跟 Virtual DOM 绝缘。它将 HTML 直接编译成 JavaScript；
举个栗子：
// 编译前
<a>{{ msg }}</a>
// 编译后
function renderMainFragment ( root, component, target ) {
var a = document.createElement( 'a' );
var text = document.createTextNode( root.msg );
a.appendChild( text );
target.appendChild( a )
return {
update: function ( changed, root ) {
text.data = root.msg;
},
teardown: function ( detach ) {
if ( detach ) a.parentNode.removeChild( a );
}
};
}
Svelte 将
<a>{{ msg }}</a>这个模板片段 AOT 编译成很精简的一段 JavaScript 模块，这个模块主要的操作有四个部分：create、mount、update、unmount。create 顾名思义就是创建 HTML 片段，把模板中的各个用 HTML 元素用 Vanilla API 创建出来，然后 mount 就可以将这个片段添加到页面的 DOM 中。比较重要的就是 update，它是将新数据绑定到视图的操作。如果用 React.js 来实现的话，先渲染成 element 然后与 V-Dom 做 diff 操作，然后 patch，bla bla bla，中间还要经过几个 event loop，是不是很多余？
所以这就是 Svelte 的精髓，用最少的操作（代码、CPU Cycle）去实现我们的目标，所以它生成的代码又小运行起来又快。
🤫Where
官方文档地址？还是看文档更准确。
左边是文档解释、右边是在线运行的代码，学起来真方便！！
🙄When
Svelte 什么时候诞生的？
答：2016年。
那回想这几个框架的诞生时间线先后是：
- Angular（2009 年）
- React （2013 年 3 月）
- Vue （2014 年 2 月）
- Svelte（2016 年）
- SolidJS（2018 年）
再分享几个有意思的数据：Svelte 在 2020 前端框架满意度排行榜中超越了react，跃升到了第一位，但在 2021 又被 solidJS 给超越了。
在开发者兴趣度方面，连续 3 年 Svelte 位列第一。
😄Who
Svelte 作者 Rich Harris 是个什么级别的人物？
答：Rich Harris，也就是 Ractive, Rollup 和 Buble 的作者，堪称前端界的轮子哥。
😁How
怎么使用？
答：来看一段 Svelte 代码片段，感受感受~
<!-- App.svelte -->
<script lang="ts">
import { onMount } from 'svelte';
// 1：变量、双向绑定、事件处理
let name = 'world';
const onClick = () => name = 'Rex';
// 2：`if` 块、Watch
let x = 0;
const incX = () => x++;
// 这就像 Vue 中的 `watch` 功能
// 语法很奇怪，但是是合法的
$: doubleX = x * 2;
// 3：`each` 块
let characters = [
{ name: 'Aroma White' },
{ name: 'Neko Asakura' },
{ name: 'ROBO Head' }
];
const append = (name: string) => {
if (!characters.find(t => t.name === name)) {
characters = [...characters, { name }];
}
};
// 生命周期
onMount(async () => {
const res = await fetch(`/photos`);
const photos = await res.json();
console.log(photos);
});
</script>
<main>
<section class="my-section-1">
<h1>Hello {name}!</h1>
<input bind:value={name}>
<button on:click={onClick}>I'm Rex</button>
</section>
<section class="my-section-2">
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if x < 5}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}
<p>Double x is {doubleX}</p>
<button on:click={incX}>x++</button>
</section>
<section class="my-section-3">
<button on:click={() => append('Simon Jackson')}>
Add Simon
</button>
<ul>
{#each characters as c, i}
<li>{i + 1}: {c.name}</li>
{/each}
</ul>
</section>
</main>
<style>
main {
font-size: 18px;
}
</style>
每个 .svelte 文件就是一个组件，并且也完整支持 Props、Context、Slot；
有完整的生命周期：onMount、onDestroy、beforeUpdate、afterUpdate。
小结：先学 Svelte ，再学 SolidJS，紧跟趋势，太卷了吧？！
OK，以上便是本篇分享。点赞关注评论，为好文助力👍
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏
