Svelte框架学习初探

1.Svelte是什么？

Svelte是一款新颖的前端框架，和Vue、React类似，都是属于MVVM框架。

Svelte作者是Rich Harris，同时也是 Rollup 的作者，他设计 Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。

从数据上来看，Svelte是仅次于React、Angular和Vue的第四大前端框架：

截止至2023年3月底，Svelte的GitHub仓库已有66.5k的star。

2.Svelte有哪些优势/特点？

简洁的API和语法

必须要夸赞一下Svelte提供的简洁而漂亮的语法。Svelte的语法接近原生JS，相当于为原生JS添加了响应式功能。Svelte没有其它框架中类似于Hook、setState或ref这样的概念，而是用非常自然的、和原生JS完全相同的语法就能实现响应式。

例如，下面是一段合规的Svelte代码，实现了一个每秒递增的计数器：

<h1>{count}</h1>

<script>
  let count = 1

  setTimeout(() => {
    count = count + 1
  }, 1000)
</script>

这段代码几乎和原生JS+HTML没有区别，根本感受不到框架的存在。仿佛Svelte变得“透明”了一样！因此，与其说Svelte是一个框架，不如说Svelte是一个“神奇”的JS编译器。

无虚拟DOM

在React和Vue纷纷引入虚拟DOM的情况下，Svelte另辟蹊径，不采用虚拟DOM！Svelte会直接操作DOM，而不需要经过虚拟DOM的diff/patch算法。因此，从理论上来说，无虚拟DOM的性能会更好，可以达到接近原生的性能。

关于为什么Svelte要采用无虚拟DOM，官方博客里给出了更详细的解释：Virtual DOM is pure overhead

静态编译和Web Component

Svelte的组件是静态编译的，也就是说不需要结合runtime就能运行。因此，你可以如同原生JS一般使用Svelte组件。甚至，你可以将Svelte编译为Web Component，从而可以在其它框架中使用Svelte组件。

优雅的动画、状态管理

与追求纯粹的React.js不同，Svelte不仅仅提供了MVVM，还包含了动画、过渡、状态管理等系列模块。Svelte在框架语法层面支持动画和状态管理，因此在Svelte中实现一个动画或者store是非常优雅的，很多操作都有现成的库或者语法糖供使用。

3.我该如何学习Svelte？

Svelte官方提供了一个交互式的教程，毫无疑问这是最合适的入门Svelte的途径。教程链接在这里。

 在官方教程中，不仅有Svelte基本知识、响应式语法、属性与绑定、逻辑语句和生命周期的教程，而且还包含了状态管理、运动过渡、动画和Action等Svelte特色的内容。

4.如何开启一个Svelte项目？

Svelte官方推荐初学者的创建项目的方法是使用`npx degit sveltejs/template my-svelte-project`，但实际上一般会用SvelteKit或svelte-add创建。

使用svelte-add创建一个SvelteKit项目的指令如下，

npm create @svelte-add/kit@latest

参考svelte-add的仓库地址：https://github.com/svelte-add/svelte-add

使用svelte-add可以开箱即用地为Svelte添加Tailwindcss、Tauri、SCSS等依赖，而免去相关的配置。以下是svelte-add官方支持的依赖：

5.Svelte有哪些UI生态？

Svelte还在发展中，目前的UI生态不如Vue和React发达。以下推荐几个用的顺手的Svelte UI库：

Svelte Material UI

Material UI的Svelte版本，是一个包含众多实用组件的UI库。

官网地址在http://sveltematerialui.com/

daisyUI

基于Tailwindcss的UI库。本身并没有支持Svelte，但是由于是基于HTML的，因此与Svelte相性很好。daisyUI也是svelte-add默认支持的UI库之一，只需在用svelte-add创建项目时选择使用PostCSS->使用Taiwindcss->使用daisyUI，就能为Svelte项目添加daisyUI和Tailwindcss。

官网地址在https://daisyui.com/

IconPark

IconPark是一个图标库。同样，IconPark本身没有支持Svelte，但是可以通过SVG的形式在Svelte中使用它。以下是在Svelte中简单使用IconPark的方法。

<script>
    import {Down} from "@icon-park/svg";
</script>
<div>
    {@html Down({theme: 'outline'})}
</div>

官网地址在https://iconpark.oceanengine.com/official

Svelte Use

Svelte版的VueUse，提供了很多常见的功能和逻辑实现。

官网地址在https://svelte-use.vercel.app/

6.如何部署一个Svelte项目？

以下介绍如何基于SvelteKit部署Svelte项目。

SvelteKit支持多种部署方案，例如部署为静态网页、Netlify、Vercel，甚至是Tauri桌面应用程序，只需要通过设置svelte配置文件中的adapter就能完成。

关于如何设置SvelteKit的部署方案，可以参考SvelteKit的官方文档https://kit.svelte.dev/docs/building-your-app