svelte - svelte 编译背后的概念是什么？

Question

我看了你的文章 https://svelte.dev/blog/virtual-dom-is-pure-overhead和其他一些博客，但它们解释了与虚拟 dom 相比，svelte 如何更好。而我想了解的是它的工作原理，无需与其他框架/概念进行比较。

我问的原因是，与 dom-diffing 相比，svelte 似乎展示了性能提升。当时，与 DOM 操作代码相比，DOM 差异框架展示了性能提升。

我在哪里可以找到 just svelte 编译的文档/图片表示？

我尝试搜索 svelte issues/questions、medium 文章，但没有找到我要找的东西。

我也看了https://github.com/sveltejs/svelte/issues/1011#issuecomment-351262252但没有找到我要找的东西，因为它解释了其中的细节，它是如何在技术上实现的。

Answer 1

理解它的最简单方法是查看它生成的代码。 Visit the REPL然后单击“JS 输出”选项卡。请注意，更新代码(从 create_fragment 返回的 p 方法)如下所示:

if (changed.count) {
  set_data(t1, ctx.count);
}

set_data 只是 textNode.data = ... 的包装器。换句话说，Svelte 生成的代码会根据更改的值在状态更改时直接更新 DOM。与使用虚拟 DOM 的框架不同，它不需要检查或重新生成所有内容。