Svelte 是“基于 JavaScript 的框架”集合中众多选项的又一补充。认为我们可以每周或每月学习每个新框架是不现实的,但 Svelte 绝对值得一试。为什么?让我们来一探究竟。
React 和 Vue 等流行框架大力推广虚拟 DOM,以至于每个新框架都试图更有效地使用虚拟 DOM。管理运行时更新非常重要,如果我们在运行时更新所有内容,那么我们的选择就很少,而虚拟 DOM 在这种情况下是一个非常简单而优雅的解决方案。
这就是 Svelte 改变游戏规则的地方。 Svelte 在编译时管理一切,并不关心运行 巴拿马电报号码数据 时更新。 Svelte 知道组件状态如何变化,并生成尽可能少的步骤来仅在编译时管理这些变化。
怎么做?
因此,在编译时管理更新听起来很棒,但是 Svelte 是如何实现这一点的呢?让我们深入挖掘一下。
首先,我们必须讨论 Svelte 中的反应性。顺便说一句,Svelte 处理反应性,它可以被认为是真正的反应性。
上图总结了 Svelte 中的反应性。如果 count 是我们的状态变量,那么我们的状态现在是反应性的。使用赋值运算符为变量重新赋值是让 Svelte 具有反应性所需的全部内容。现在让我们讨论一下这种反应性如何导致 Svelte 更新 DOM。
Svelte 将此状态变量标记为脏,并生成一个函数,该函数每次对此状态变量做出反应(移动)时都会在本机 DOM 中更新此值。然后,该函数在编译时嵌入到包输出中,并且每次我们的状态变量发生反应时都会被调用。仅此而已。
更小的包大小 -> 浏览器快速启动
Svelte 的优点在于其捆绑包体积小。因此,我们节省了更多的内存,同时享受浏览器的快速启动。 Svelte 更像是一个编译器而不是一个框架,它在编译时将我们所有的框架代码转换为纯 JavaScript 代码,并且我们得到非常小的捆绑包大小。除此之外,Svelte 框架代码也仅限于几行代码。启动框架所需的主要函数都在Svelte.js包中的internal.js文件中。在这些函数中,只有那些真正对浏览器中的应用程序有贡献的函数才会被导入。没有任何不必要的功能或数据会加重我们的应用程序的负担。
Svelte 中的动画
Svelte 表现出色。 Svelte 中的大多数动画仅使用 CSS 实现,大多避免使用 javascript,因为 CSS 动画是从主线程运行的,所以我们的动画性能更佳。