目录结构
- 说在前面
- 关于虚拟DOM
- 业内大牛如何看待 svelte
- 关于UI
svelte 与其他框架
- 开始打包
- 对比大小
- 性能考核
- 对比性能
- 使用svelte 模板
- 下载依赖
- 启动项目
- 打开页面
- 安装ui
简单了解语法
- 绑定数据
- 条件渲染
- 循环渲染
- 事件绑定
组件
- 传值
- 动画
- 生命周期
- 案例
- 注解
- 参考文献
说在前面
svelte 不知道大家有没有了解过，最近一次偶然刷文章，看到一篇《都快2020年，你还没听说过SvelteJS?》 [0] 的文章，看了svelte与其他框架的对比
svelte 中文 doc [1]
对比各框架开发的项目的尺寸
对比各项目的 Lighthouse 性能评分
说实话属实有点惊讶到我。 ** 真的假的？
于是我抱着试试就试试的心态来做个评测人
关于虚拟DOM
svelte 的作者 Rich Harris 在一篇名为《虚拟DOM纯粹是开销》 [2] 的文章中指出，为什么不使用虚拟dom
虚拟dom的三个步骤
- 两个快照都包含一个元素。在两种情况下都是，这意味着我们可以保留相同的DOM节点
- 我们列举了新旧属性上的所有属性，
以查看是否需要更改，添加或删除任何属性。在这两种情况下，我们都有一个属性-aclassName的值为"greeting"- 下降到元素中，我们看到文本已更改，因此我们需要更新真实的DOM
而 svelte 直接跳过前面两步，直接执行第三步
if (changed.name) { text.data = name; }这几乎就是Svelte生成的更新代码。与传统的UI框架不同，Svelte是一种编译器，它在构建时就知道应用程序中的情况如何变化，而不必等着在运行时进行工作。
业内大牛如何看待 svelte
vue 的作者尤雨溪，在知乎回答了个 《如何看待 svelte 这个前端框架？》 [3] 问题
“svelte 的核心思想在于 通过静态编译来减少框架运行时的代码”
关于 UI
我觉着这两个ui还是比较不错的
Material UI
https://github.com/hperrin/sv...
SVELTESTRAP
https://github.com/bestguy/sv...
svelte 与其他框架
老严闲来的时候找到了 一个叫做
Realworld存储库中有24种conduit实现As ，也就是用来对比性能的以及大小的；今天一起来对比一下 vue/react/svelte 这三个框架的
- 项目打包后压缩包大小
- 项目网页性能分析对比
vue：https://github.com/gothinkste...
react：https://github.com/gothinkste...
svelte：https://github.com/sveltejs/r...
感兴趣的同学也可以看看其他框架 https://github.com/gothinkste...
开始打包
这三个项目，打包顺序基本上在同一时间执行
npm run build，svelte 直接在我我眨眼的一瞬间打完包 ，啪 很快啊 （有点夸张~几秒钟）静静的等待vue和react同时打包完之后，我开始进行统一压缩静态文件，压缩格式为zip
对比大小
排名如下
- svelte — 89.9 KB
- vue — 483 KB
- react — 490 KB
果然差距还是确实如传说一样恐怖
性能考核
严老湿本次使用 Chrome 的 Lighthouse （谷歌网页性能分析工具） 来对比性能评分
全局安装
lighthousenpm install -g lighthouse执行 （直接使用的对应的线上地址）
lighthouse https://realworld.svelte.dev/这是我在下面所测试的截屏
vue
react
svelte
对比性能
性能得分排名如下：
- svelte — 83
- react — 52
- vue — 32
svelte也是不负众望 稳居第一使用 svelte 模板
看到上面，天天被逼着做性能优化的同学，激动起来了 ~ 那我们一起来简单学习一下这个性能强悍的 svelte 吧
svelte 模板 [4] ，我们直接使用一个模板来开工
git clone https://github.com/sveltejs/template & cd template-master下载依赖
yarn install or npm install下载完成之后，我们看看目录。老严的评价就是
简洁
启动项目
yarn dev or npm run dev启动完成之后
Your application is ready~! � - Local: http://localhost:5000 - Network: Add `--host` to expose打开页面
地址栏输入
http://localhost:5000
我们可以看到这样的一个页面 hello world
安装ui
这里我们使用 sveltestrap
npm install --save sveltestrap npm install --save bootstrap在 main.js 中引入
import 'bootstrap/dist/css/bootstrap.min.css';在页面中引入组件
简单了解语法
在学习之前我觉得有必要简单了解一下其语法
绑定数据
在 vue 中我们的变量需要写在
data中 ，而svelte语法更加贴合原生data() { return { name: 'hhh', }; }{{name}}svelte 绑定数据 ，svelte 动态绑定需要加上 {}
条件渲染
vue 中有条件渲染
v-ifv-else-ifv-else,svelte 也有{#if condition == 2}悲
{:else if condition == 1}伤
{:else if condition == 0}日
{:else}记
{/if}
循环渲染
循环渲染列表
-
{#each news as {title}}
- {title} {/each}
咋感觉有点像
ejs循环渲染呢 [5]呢?事件绑定
在
svelte中方法直接写函数定义函数即可使用{title}
组件
组件是框架必不可少的一个功能
来看看 svelte 中如何创建一个组件吧
app.svelte
{name}创建一个 child.svelte 页面
{title}
那么组件有了，我们来看看组件传值吧！
传值
app.svelte
{name}child.svelte
爹给我取的名字是 {childName}
刚刚我们是简单的单一传值
接下来我们传一个对象试试
app.svelte
{name}child.svelte
我取的名字是 {name}我取的年龄是 {age}我取的性别是 {gender}
那这多费劲呐？还需要一个个接收。有一话叫存在即合理
动画
在官方 api 中提到 svelte 提供了一些动画效果出来给大家使用
我们直接使用官方示例 淡入淡出动画
{#if visible}Fades in and out
{/if}
生命周期
在 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 还学不会的 ，老严在代码里面也加了一些代码注释
因为样式代码 太多,我们先上效果图再看代码
e.which === 13 && add(e.target)} >todo
{#each todos.filter(t => !t.done) as todo (todo.id)} {/each}done
{#each todos.filter(t => t.done) as todo (todo.id)} {/each}当你可以手动写出这个todolist的时候，你就已经出师了，因为老严也就这点能耐 哈哈
最后代码，我提交到了git 有需要的同学可以去下载噢
git clone [email protected]:CrazyMrYan/study-svelte.git注解
[0] https://zhuanlan.zhihu.com/p/...
[2] https://svelte.dev/blog/virtu...
[3] https://www.zhihu.com/questio...
[4] https://github.com/sveltejs/t...
[5] https://ejs.bootcss.com/#docs
参考文献
- 我们列举了新旧属性上的所有属性，