Svelte 特训第一天

2021-04-24 · 周六开心多云

想要上手一门新技术,光看文档介绍还是不够的,还是得动手操作才能加深记忆。这时我想起了我在 2018 年发起的 Kico Tools 项目,这是个集合时钟、秒表和随机数的小工具。当时这个是采用原生 JS 编写的,且有很多地方操作了 DOM 的内容,因此导致该项目写起来非常复杂,到后期就断更了。

随着我对 Svelte 这个框架的逐渐认识,我发现它最终生成的代码非常简单,很类似我自己用原生 JS 来操作 DOM,在 React 和 Vue 大统前端开发的当下,它显得非常“异类”,因为它没有使用到虚拟 DOM 的概念。

虚拟 DOM,其实就是用对象伪造了一个结构树,通过框架独有的 DIFF 算法,比对对象修改前后的差异,再生成更新真实 DOM 的过程。

我花了差不多 2.5 小时,成功把 Kico Tools 项目的大多数核心功能全部复现,这也足以证明了 Svelte 的实力所在。期间主要遇到一个 Function called outside component initialization 的错误,其实是因为我其中一个想要加入生命周期函数 onMount 的组件顶部声明是 <script context="module">,看了下文档具体说明,得出的结论是 module 在被引入的时候只会运行一次,且不存在销毁的过程,类似公用库的概念。

第二个问题则是关于数组的刷新,使用 push 和 splice 这种方式无法触发 DOM 刷新,官方文档已经说明了,需要使用 [...arr] 或者 push 之后重新用 = 赋值的办法解决。

The Entertainer

The Entertainer

Leandro Aconcha
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 0 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君