React、Vue和Angular之后的Svelte前端框架 - Oliver

Svelte是一个基于组件的前端框架，例似React和Vue：

-更少的代码
-没有虚拟DOM
-真正的反应性/响应性/reactive

该项目已获得MIT许可，并于2016年11月26日由其创建者Rich Harris发布。该项目本身是在TypeScript中实现的。目前，它在GitHub上拥有47k星，并且拥有活跃的社区，其中包括391位贡献者。社区非常活跃，并且与React不同，没有庞大的公司来支持它。但是不用担心，斯维尔特不会很快消失！

它是如何工作的？
与React或Vue不同，Svelte不使用虚拟DOM或像Angular这样的变更检测算法。相反，它带有一个编译器，编译器解析您的代码并发出可精确更新DOM的新代码。
这意味着不需要进行任何区分检查，只进行逐步地更新DOM，浏览器这样处理起来就不吃力。因为Svelte不需要钩子来更新组件的状态，编译器可以做更多的事情。
一条简单的普通JavaScript语句就足够了。然后将该语句编译为理状态更改的代码。
就像React具有* .jsx文件，Vue具有* .vue单文件组件一样，Svelte也具有* .svelte文件。类似于Vue中的单文件组件，一个苗条的文件可以包含HTML，JavaScript和CSS。您可以在下面看到一个示例：

<script>
   const greeting = 'Hello Svelte';
<script>
<style>
   p{ margin:0 auto; }
</style>
<p>{greeting}</p>

下面是另一个Svelte内置反应性的示例，请看一下下面显示的组件。没有（React）挂钩，没有redux，没有状态管理库。仅纯JavaScript和指令。这就是Svelte编译器的强大功能！

<script>
  let  count = 0;
  function handleClick(){
   count += 1;
  }
</script>
<sytle>
  button {
    ......
  }
</sttyle>
<button on:click={handleClick}>
    Clicked {count}{count ===1 ? 'time':'times'}
</button>

注意到“Clicked {count}{count ===1 ? 'time':'times'}”当变量count值改变时，Svelte会渲染这部分的HTML。
您所看到的是相对平常的代码，但这足以使结果完全具有响应性。而React中的相同功能将使您需要编写更多代码，并使更多挂钩和函数正常工作。

是什么使Svelte如此强大？
Svelte的方法具有简单性和强大功能，因此功能如此强大。虚拟DOM的实现虽然也可以使单页应用程序变得引人注目，但这要付出一定的代价。例如，比较虚拟DOM和实际DOM，然后在运行时应用逐步更改也会降低性能，有时会带来复杂性；将所有这些都移至编译步骤，然后让浏览器执行其擅长的工作（管理DOM），可以使您的应用程序更快，捆绑包大小更小，交付的前端代码中库/框架的权重大大降低。
您是否还记得所有使许多其他库与虚拟DOM兼容的集成库？是的，我知道您并不总是需要这些。但是使用Svelte，您将永远不需要它们，因为没有虚拟DOM。
官方文档非常棒，其中涵盖了每个重要功能的精彩教程。它写得很好，并且很容易跟进。
vscode插件