因为我之前的工作主要使用Vue，偶尔也会接触到一些React项目，但完全没遇到过使用Svelte的项。
直到Vite的出现，我才开始开始重视Svelte。
能让祖师爷也重视的框架，不简单不简单~
这是我觉得入门比较舒服且方便日后搜索的学习方式。
本文的目的是把Svelte的学习流程梳理出来，让第一次接触Svelte的工友能顺利上手。
本文适合人群：有HTML、CSS、JS基础，知道并已经安装了Node。
如果你是打算从0开始学习前端，那本文暂时还不适合你阅读。
传统框架如React和Vue在浏览器中需要做大量的工作，而Svelte将这些工作放到构建应用程序的编译阶段来处理。
需要注意，Svelte是一款编译器。它可以将按照规定语法编写的代码打包成浏览器能运行的项目。
和其他前端框架一样，同样也是使用HTML、CSS和JavaScript进行开发。
在学习Svelte之前先了解一下它的父亲（作者）。
关于RichHarris的介绍还有很多，我搜到的资料上这样介绍到：
Svelte翻译成中文就是“苗条”的意思，侧面表明它打包出来的包非常小。
Svelte主要优势有以下几点。
Svelte是一种全新的构建用户界面的方法。传统框架如React和Vue在浏览器中需要做大量的工作，而Svelte将这些工作放到构建应用程序的编译阶段来处理。
Svelte组件需要在.svelte后缀的文件中编写，Svelte会将编写好的代码翻编译JS和CSS代码。
Svelte在打包会将引用到的代码打包起来，而没引用过的代码将会被过滤掉，打包时不会加入进来。
在经过gzip压缩后生成的包大小，从报告中可以看出，Svelte打包出来的体积甩开Vue、React和Angular几条街。
这是因为经过Svelte编译的代码，仅保留引用到的部分。
VirtualDOM就是虚拟DOM，是用JS对象描述DOM节点的数据，由React团队推广出来的。
虚拟DOM是前端的网红，因此也有很多开发者开始研究和搞辩论赛。
网上有一张图对比了Svelte和React在数据驱动视图的流程
其实主要对比了使用虚拟DOM和直接操作真实DOM的区别。
在React中实现数据驱动视图大概流程是这样的：
数据发生变化->通过diff算法判断要更新哪些节点->找到要更新的节点->更新真实DOMVue的数据更新原理其实也差不多，只是实现方式和使用语法会有所不同。
diff算法会根据数据更新前和更新后生成的虚拟DOM进行对比，只有两个版本的虚拟DOM存在差异时，才会更新对应的真实DOM。
使用虚拟DOM对比的方式会比直接对比真实DOM的效率高。
而且真实DOM身上挂载的属性和方法非常多，使用虚拟DOM的方式去描述DOM节点树会显得更轻便。
而Svelte在未使用虚拟DOM的情况下实现了响应式设计。
我以粗暴的方式理解：Svelte会监听顶层组件所有变量，一旦某个变量发生变化，就更新使用过该变量的组件。这就仅仅只需更新受影响的那部分DOM元素，而不需要整个组件更新。
综上所述，在我的理解力，虚拟DOM的思想很优秀，也是顺应时代的产物，但虚拟DOM并不是最快的，JS直接操作DOM才是最快。
这也是我刚接触Svelte时立刻喜欢上的理由。
这里说的响应式设计是只关于数据的响应，而不是像Bootstrap的响应式布局。
现在流行的前端框架基本都使用数据驱动视图这个概念，像Vue和React这些框架，都有响应式数据的概念。
但Vue和React在数据响应方面还是有点“不那么自然”，我简单举几个例子：
上面这几种情况，感觉多少都添加了点东西才能实现响应式数据功能（至少在普通开发者开发时是这样）。
在Svelte的理念中，响应式应该给开发者一种无感体验，比如在Excel中，当我规定C1单元格的值是A1+B1的和，设置好规则后，用户只需要修改A1和B1即可，C1会自动响应，而不需再做其他操作。
在这方面，Svelte我认为在现阶段是做得最自然的。
从代码就能看出，在使用Svelte开发项目时，开发者一般无需使用额外的方法就能做到和Vue、React的响应式效果。
在使用Svelte开发时会自动对无障碍访问方面的体验进行检测，比如img元素没有添加alt属性，Svelte会向你发出一条警告。无障碍体验对特殊人事来说是很有帮助的，比如当你在img标签中设置好alt属性值，使用有声浏览器会把alt的内容读出来。
在此我还要推荐2本关于设计体验的书。
它们的封面长分别这个样子
Sapper是构建在Svelte上的框架，Sapper提供了页面路由、布局模板、SSR等功能。
有点类似于ReactNative和Weex之类的东西。
虽然现在github上的Star还不是很多，但也可以写些demo玩玩。
使用Svelte前，必须有一个开发环境。
创建或使用开发环境有以下几种方式：
本文使用的是Vite创建项目，但上面列出的所有方式我都会逐一说说。
REPL是read(读取)、evaluate(执行)、print(打印)和loop(循环)这几个单词的缩写。
如果你只是想尝试Svelte的某些功能或者测试小型代码，可以使用这款线上工具。
REPL还提供了多组件开发，按左上角的+号可以创建新组件。组件的内容稍后会说到。
界面右侧，顶部有3个选项：
在REPL界面右上角还有一个下载按钮。
当你在线上环境写好代码，可以点击下载按钮把项目保存到本地，下载的文件是一个zip，需要自己手动解压。
然后使用以下命令初始化项目并运行即可。
Svelte官方也提供了一个命令，可以下载Svelte项目到本地。
命令最后需要输入你的项目名称。
这是官方提供的创建项目方式，这个项目是使用Rollup打包的。
如果你不想使用Rollup打包项目，可以尝试使用Webpack。
本文接下来所有例子都是使用Vite创建Svelte项目进行开发的。
使用Vite创建项目的原因是：快！
本文使用Vite创建项目，目录结构和Rollup版创建出来的项目结构稍微有点不同，但开发逻辑是一样的。
index.html、src/main.js和src/App.svelte这三个是最主要的文件。
index.html是项目运行的入口文件，它里面引用了src/main.js文件。
src/main.js里引入了src/App.svelte组件，并使用以下代码将src/App.svelte的内容渲染到#app元素里。
constapp=newApp({target:document.getElementById('app')})target指明目标元素。
我们大部分代码都是写在.svelte后缀的文件里。
.svelte文件主要保安多个HTML元素、1个script元素和1个style元素。这3类元素都是可选的。
我们主要的工作目录是src目录。
为了减轻学习难度，我们先做这几步操作。
如果你使用Rollup版创建项目，不需要做这一步。
在使用Vite创建的Svelte项目中，找到src/app.css文件，并把里面的内容清空掉。
将src/App.svelte文件改成以下内容
上面的代码其实和Vue有点像。
只需写以上代码，Svelte就会自动帮我们做数据响应的操作。一旦数据发生改变，视图也会自动改变。
是不是非常简单！
Svelte的模板语法其实和Vue是有点像的。如果你之前已经使用过Vue，那本节学起来就非常简单。
在“起步章节”已经使用过插值了。在Svelte中，使用{}大括号将script里的数据绑定到HTML中。
这种语法和Vue是有点像的，Vue使用双大括号的方式{{}}绑定数据。Svelte就少一对括号。
在HTML中除了可以绑定变量外，还可以绑定表达式。
在Vue中有v-html方法，它可以将HTML标签渲染出来。在Svelte中也有这个方法，在插值前面使用@html标记一下即可。
在日常开发中，给HTML标签设置样式主要通过行内style和class属性。
基础的HTML写法和原生的一样，这里不过多讲解。
下面主要讲动态设置样式，也就是将JS里的变量或者表达式绑定到style或者class里。
语法是class:xxx={state}，当state为true时，这个样式就会被激活使用。
使用{#if}开头，{/if}结尾。
{#if条件判断}...{/if}举个例子
{#if条件判断}...{:else}...{/if}举个例子
如果你有一堆数据需要展示出来，可以使用#each方法。
使用{#each}开头，{/each}结尾。
{#eachexpressionasname}...{/each}举个例子
Vue的方式是：
语法：
on:事件类型={事件名}举个例子，点击按钮时在控制台输出“雷猴”。
如果你只希望某些事件只执行一次，或者取消默认行为，或者阻止冒泡等，可以使用事件修饰符。
on:事件类型|修饰符={事件名}举个例子，我希望点击事件只能执行一次，之后再点击都无效，可以使用官方提供的once修饰符。
除了once之外，还有以下这些修饰符可以用：
修饰符还可以串联起来使用，比如on:click|once|capture={...}
所以使用了once和preventDefault修饰符。
但实际上并非如此。上面的代码意思是once设定了只执行一次toLearn事件，并且只有一次preventDefault是有效的。
数据绑定通常会和表单元素结合使用。
bind可以做到双向数据绑定的效果。我觉得Svelte里的bind有点像Vue的v-model。
此时就需要使用bind了。
上面这段解释是官方文档的解释。
$:在文档中称为Reactivity，中文文档成它为反应性能力。
但我使用$:时，觉得这个功能有点像Vue的computed。
$:可以监听表达式内部的变化从而做出响应。
这样看来，真的和Vue的computed的作用有那么一点像。
Svelte提供异步渲染标签，可以提升用户体验。
{#awaitexpression}...{:thenname}...{:catchname}...{/await}以#await开始，以/await结束。
:then代表成功结果，:catch代表失败结果。
expression是判断体，要求返回一个Promise。
其实用法和#if...:elseif.../if有那么一丢丢像。
举个例子
在Svelte中，创建组件只需要创建一个.svelte为后缀的文件即可。
通过import引入子组件。
比如，在src目录下有App.svelte和Phone.svelte两个组件。
App.svelte是父级，想要引入Phone.svelte并在HTML中使用。
App.svelte
比如上面的例子，手机号希望从App.svelte组件往Phone.svelte里传。
App.svelte就可以使用对应的属性把值传入。
如果想在子组件中修改父组件的内容，需要把修改的方法定义在父组件中，并把该方法传给子组件调用。
同时需要在子组件中引入createEventDispatcher方法。
和Vue一样，Svelte也有组件插槽。
Svelte中主要有以下几个生命周期：
以上生命周期都是需要从svelte里引入的。
用onMount举个例子
tick是比较特殊的，tick和Vue的nextTick差不多。
在Svelte中，tick的使用语法如下：
import{tick}from'svelte'awaittick()//其他操作总结本文主要讲解了Svelte的基础用法，但Svelte的内容和API远不止此。它还有很多高级的用法以及提供了过渡动画功能等，这些都会放在高级篇讲解。
Svelte是一个Web应用的构建工具，它打包出来的项目体积比较小，性能强，不使用虚拟DOM。