想要上手一门新技术，光看文档介绍还是不够的，还是得动手操作才能加深记忆。这时我想起了我在 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 之后重新用 = 赋值的办法解决。