都快1202 年了，你还不知道 svelte？

目录结构

• 说在前面
• 关于虚拟DOM
• 业内大牛如何看待 svelte
• 关于UI
• svelte 与其他框架
  • 开始打包
  • 对比大小
  • 性能考核
  • 对比性能
• 使用svelte 模板
• 下载依赖
• 启动项目
• 打开页面
• 安装ui
• 简单了解语法
  • 绑定数据
  • 条件渲染
  • 循环渲染
  • 事件绑定
  • 组件
    • 传值
  • 动画
  • 生命周期
• 案例
• 注解
• 参考文献

说在前面

svelte 不知道大家有没有了解过，最近一次偶然刷文章，看到一篇《都快2020年，你还没听说过SvelteJS?》 [0] 的文章，看了svelte与其他框架的对比

svelte 中文 doc [1]

对比各框架开发的项目的尺寸

[图片上传失败...(image-7a421c-1607179090667)]

对比各项目的 Lighthouse 性能评分

[图片上传失败...(image-b5004c-1607179090667)]

说实话属实有点惊讶到我。 ** 真的假的？

于是我抱着试试就试试的心态来做个评测人

关于虚拟DOM

svelte 的作者 Rich Harris 在一篇名为《虚拟DOM纯粹是开销》 [2] 的文章中指出，为什么不使用虚拟dom

虚拟dom的三个步骤

1. 两个快照都包含一个元素。在两种情况下都是
   ，这意味着我们可以保留相同的DOM节点
2. 我们列举了新旧属性上的所有属性，
   以查看是否需要更改，添加或删除任何属性。在这两种情况下，我们都有一个属性-aclassName的值为"greeting"
3. 下降到元素中，我们看到文本已更改，因此我们需要更新真实的DOM

而 svelte 直接跳过前面两步，直接执行第三步

if (changed.name) {
  text.data = name;
}

这几乎就是Svelte生成的更新代码。与传统的UI框架不同，Svelte是一种编译器，它在构建时就知道应用程序中的情况如何变化，而不必等着在运行时进行工作。

业内大牛如何看待 svelte

vue 的作者尤雨溪，在知乎回答了个 《如何看待 svelte 这个前端框架？》 [3] 问题

image

“svelte 的核心思想在于 通过静态编译来减少框架运行时的代码”

关于 UI

我觉着这两个ui还是比较不错的

Material UI

https://sveltematerialui.com/

https://github.com/hperrin/svelte-material-ui

SVELTESTRAP

https://sveltestrap.js.org/

https://github.com/bestguy/sveltestrap

svelte 与其他框架

老严闲来的时候找到了 一个叫做 Realworld 存储库中有24种conduit实现As ，也就是用来对比性能的以及大小的；

今天一起来对比一下 vue/react/svelte 这三个框架的

• 项目打包后压缩包大小
• 项目网页性能分析对比

vue：https://github.com/gothinkster/vue-realworld-example-app

react：https://github.com/gothinkster/react-redux-realworld-example-app

svelte：https://github.com/sveltejs/realworld

感兴趣的同学也可以看看其他框架 https://github.com/gothinkster/realworld

image

开始打包

这三个项目，打包顺序基本上在同一时间执行 npm run build，svelte 直接在我我眨眼的一瞬间打完包 ，啪 很快啊 （有点夸张~几秒钟）

静静的等待vue和react同时打包完之后，我开始进行统一压缩静态文件，压缩格式为zip

对比大小

排名如下

1. svelte — 89.9 KB
2. vue — 483 KB
3. react — 490 KB

果然差距还是确实如传说一样恐怖

性能考核

严老湿本次使用 Chrome 的 Lighthouse （谷歌网页性能分析工具） 来对比性能评分

全局安装 lighthouse

npm install -g lighthouse

执行 （直接使用的对应的线上地址）

lighthouse https://realworld.svelte.dev/

这是我在下面所测试的截屏

vue

image

react

image

svelte

image

对比性能

性能得分排名如下：

1. svelte — 83
2. react — 52
3. vue — 32

svelte 也是不负众望 稳居第一

使用 svelte 模板

看到上面，天天被逼着做性能优化的同学，激动起来了 ~ 那我们一起来简单学习一下这个性能强悍的 svelte 吧

svelte 模板 [4] ，我们直接使用一个模板来开工

git clone https://github.com/sveltejs/template
&
cd template-master

下载依赖

yarn install 
or 
npm install

下载完成之后，我们看看目录。老严的评价就是 简洁

image

启动项目

yarn dev
or
npm run dev

启动完成之后

  Your application is ready~! �

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

打开页面

地址栏输入 http://localhost:5000

image-20201130113222571

我们可以看到这样的一个页面 hello world

安装ui

这里我们使用 sveltestrap

npm install --save sveltestrap 
npm install --save bootstrap

在 main.js 中引入

import 'bootstrap/dist/css/bootstrap.min.css';

在页面中引入组件

Do Not Press

image

简单了解语法

在学习之前我觉得有必要简单了解一下其语法

绑定数据

在 vue 中我们的变量需要写在 data 中 ，而 svelte 语法更加贴合原生

data() {
    return {
        name: 'hhh',
    };
}

{{name}}

svelte 绑定数据 ，svelte 动态绑定需要加上 {}

{name}

image

条件渲染

vue 中有条件渲染 v-if v-else-if v-else ,svelte 也有

{#if condition == 2}
    
悲
{:else if condition == 1}
    
伤 
{:else if condition == 0}
    
日
{:else}
    
记
{/if}

image

循环渲染

循环渲染列表

    
    {#each news as {title}}
        

            
                {title}
            
        
    {/each}

image

咋感觉有点像 ejs 循环渲染呢 [5]呢?

事件绑定

在 svelte 中方法直接写函数定义函数即可使用

{name}
{title}

image

组件

组件是框架必不可少的一个功能

来看看 svelte 中如何创建一个组件吧

app.svelte

    {name}
    

创建一个 child.svelte 页面

{title}

image-20201205140934477

那么组件有了，我们来看看组件传值吧！

传值

app.svelte

    {name}
    

child.svelte

爹给我取的名字是 {childName}

image

刚刚我们是简单的单一传值

接下来我们传一个对象试试

app.svelte

    {name}
    
    

child.svelte

我取的名字是 {name}
我取的年龄是 {age}
我取的性别是 {gender}

image

那这多费劲呐？还需要一个个接收。有一话叫存在即合理

动画

在官方 api 中提到 svelte 提供了一些动画效果出来给大家使用

image

我们直接使用官方示例 淡入淡出动画

    
    visible


{#if visible}
    

        Fades in and out
    
{/if}

image

生命周期

在 svelte 中的生命周期有onMount 、beforeUpdate 、afterUpdate 、afterUpdate 下面老严依次给大家伙列出来

• onMount （挂载后）

该onMount函数作为将component挂载到DOM后立即执行的回调。它必须在component初始化期间被调用（但不必位于component内部；可以从外部模块调用它）。

如果需要onMount返回一个函数，则在卸载 component 时调用该函数。

• beforeUpdate （更新前）

beforeUpdate任何状态更改后组件更新之前，回调函数会立即运行。第一次回调运行将在初始onMount之前.

• afterUpdate （更新后)

afterUpdate在组件更新后立即运行回调

• onDestroy（销毁后）

在组件卸载后运行回调。在onMount、beforeUpdate、afterUpdate和onDestroy中，这是唯一一个在服务器端组件中运行的组件。4

案例

老严逛着逛着 正好看到一个 官方示例的 to do list 本来还想着说带大家做，那既然有现成的，将就一下

没有什么框架是写一个 todolist 还学不会的 ，老严在代码里面也加了一些代码注释

因为样式代码 太多,我们先上效果图再看代码

image

    
     e.which === 13 && add(e.target)}
    >
    
    

        
todo
        {#each todos.filter(t => !t.done) as todo (todo.id)}
            
                
                 mark(todo, true)}>
                {todo.description}
                
                remove
            
        {/each}
    
    
    

        
done
        {#each todos.filter(t => t.done) as todo (todo.id)}
            
                
                 mark(todo, false)}>
                {todo.description}
                
                remove
            
        {/each}
    

当你可以手动写出这个todolist的时候，你就已经出师了，因为老严也就这点能耐 哈哈

最后代码，我提交到了git 有需要的同学可以去下载噢

git clone [email protected]:CrazyMrYan/study-svelte.git

注解

[0] https://zhuanlan.zhihu.com/p/97825481

[1] https://www.firecat.run/

[2] https://svelte.dev/blog/virtual-dom-is-pure-overhead

[3] https://www.zhihu.com/question/53150351

[4] https://github.com/sveltejs/template

[5] https://ejs.bootcss.com/#docs

参考文献

• https://www.firecat.run/docs
• https://zhuanlan.zhihu.com/p/97825481
• https://iiong.com/sveltejs-study-notes/