作为后起之秀，Svelte到底是怎么俘获大批开发者的呢？我们先从它的特性开始说起。
Svelte特性
- 🚀简洁的语法
- ✈无
虚拟DOM - 🚗正在的相应式
🚀简洁的语法
官网给出了一个三大框架的同样功能的例子作比较
React写法
import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setB] = useState(2); function handleChangeA(event) { setA(+event.target.value); } function handleChangeB(event) { setB(+event.target.value); } return ( <div> <input type="number" value={a} onChange={handleChangeA}/> <input type="number" value={b} onChange={handleChangeB}/> <p>{a} + {b} = {a + b}</p> </div> ); };
Vue写法
<template> <div> <input type="number" v-model.number="a"> <input type="number" v-model.number="b"> <p>{{a}} + {{b}} = {{a + b}}</p> </div> </template> <script> export default { data: function() { return { a: 1, b: 2 }; } }; </script>
Svelte写法
<script> let a = 1; let b = 2; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p>
结果一目了然了。
Svelte认为，你写的代码越多，造成更多的bug的概率越大。
无虚拟DOM
Svelte放弃了流行的虚拟DOM方案，虽然虚拟DOM足够的快，但是虚拟DOM最致命的问题是不管状态是否发生变化，都会被重新计算并且更新。
React会从应用根节点开始重新加载，Vue会从所在组件开始重新加载。
Svelte回归到了原生JavaScript，在Svelte中，每个组件都有一个对应的JavaScript类，称为“组件实例”。当组件状态发生变化时，Svelte会生成一个新的组件实例，并使用差异算法比较新旧组件实例的DOM结构，然后更新需要更改的部分。
Svelte使用的差异算法与传统的虚拟DOM实现类似，都是将新旧DOM树进行比较，找出需要更新的部分。但是，Svelte使用了一些优化技巧来减少比较的复杂性和DOM操作的数量。
- 💎使用key标记DOM
- 💎合并DOM（移位算法）、减少DOM
- 💎缓存DPOM（可变长缓存）
💎使用key标记DOM
使用“key”属性来帮助Svelte识别相同类型的元素。当Svelte在比较新旧DOM树时遇到相同类型的元素时，它会使用“key”属性来判断这些元素是否相同，并避免进行不必要的更新。这可以减少比较的复杂性和DOM操作的数量，从而提高性能。
💎合并DOM（移位算法）
Svelte还使用了一种称为“移位”算法的技巧来进一步优化差异算法。移位算法是一种将多个连续的DOM操作合并为单个操作的技术，从而减少DOM操作的数量和复杂性。
另外，还针对{{#if}}指令做了优化，Svelte会使用DOM元素的插入和移除来隐藏或显示元素，而不是使用CSS的display:none等方式。这种方法也可以减少DOM操作的数量和复杂性。
💎缓存DOM（可变长缓存）
Svelte还使用了一种称为“可变长度缓存”（VLC）的技术来进一步优化差异算法。可变长度缓存是一种将最近使用的元素缓存起来，以便它们可以更快地被访问和使用的技术。当Svelte比较新旧DOM树时，它可以使用VLC缓存来快速查找和访问最近使用的元素，从而减少比较的复杂性和时间复杂度。
所以，Svelte虽然没有虚拟DOM，但是它的性能反而更好。
🚗真正的响应式
什么是响应式？就是当一个值发生改变时，使用这个值的地方做出相应的改变。
如果不同的人设计响应式的功能，它的使用方案也会不尽相同。
例如，早期的Svelte写法如下：
const { count } = this.get(); this.set({ count: count + 1 });
React的写法
const { count } = this.state; this.setState({ count: count + 1 });
hook
const [count, setCount] = useState(props.count) setCount(count + 1)
Vue3写法
const { count } = defineProps(props) count ++
这些方案都是基于一些响应式的Api实现的响应式功能。
Svelte意识到最好的API就是根本没有 API。我们可以直接使用。
let count = 0 count +=1
以上就是Svelte的主要特性。总结下：
Svelte拥有接近原生JavaScript的写法Svelte没有虚拟DOM，使用原生DOM描述组件Svelte没有Api
Svelte编译原理
既然Svelte没有Api，那到底是怎么追踪变量变化的呢？
接下来我们由简单到复杂，来看看Svelte的编译结果。
首先我们看看，下面的代码会被编译成啥样的：
<h1>Hello world!</h1>
/* App.svelte generated by Svelte v3.59.1 */ import { SvelteComponent, detach, element, init, insert, noop, safe_not_equal } from "svelte/internal"; function create_fragment(ctx) { let h1; return { c() { h1 = element("h1"); h1.textContent = "Hello world!"; }, m(target, anchor) { insert(target, h1, anchor); }, p: noop, i: noop, o: noop, d(detaching) { if (detaching) detach(h1); } }; } class App extends SvelteComponent { constructor(options) { super(); init(this, options, null, create_fragment, safe_not_equal, {}); } } export default App;
很明显，组件编译之后，会返回一个继承了SvelteComponent的类，并且在构造函数中执行了init方法，它的其中一个参数为在组件中定义的create_fragment函数。
这个函数会返回一个对象，包含组件对应的的create``mount``update``delete操作。由于上面的代码中是个静态的字符串，所以p对应的值为noop即no operate没有操作。
接下来，我们修改下代码如下：
<script> let count = 0 </script> <h1>Hello world!</h1>
此时组件编译之后，仅仅出现了
let count = 0
其余没有变化，（所以代码里没有用到的变量，我们应该即时删除）
接着，我们新增代码如下：
<script> let count = 0 </script> <h1 on:click={() => count++}>Hello world!</h1>
function create_fragment(ctx) { let h1; let mounted; let dispose; return { c() { h1 = element("h1"); h1.textContent = "Hello world!"; }, m(target, anchor) { insert(target, h1, anchor); if (!mounted) { dispose = listen(h1, "click", /*click_handler*/ ctx[1]); mounted = true; } }, // ... d(detaching) { if (detaching) detach(h1); mounted = false; dispose(); } }; } function instance($$self, $$props, $$invalidate) { let count = 0; const click_handler = () => $$invalidate(0, count++, count); return [count, click_handler]; }
我们可以看到在mounted之后使用listen方法新增了一个针对h1的click方法的监听事件，并且在delete阶段移除监听事件。
同时多了个实例方法instance，它的返回值是count的实际值，以及修改count的处理函数。请记住这里，后面还会提到。
值得注意的是h1的click事件的参数是/*click_handler*/ ctx[1])
function instance($$self, $$props, $$invalidate) { let count = 0; const click_handler = () => $$invalidate(0, count++, count); return [count, click_handler]; }
此时，init方法也发生了改变
// 之前 init(this, options, null, create_fragment, safe_not_equal, {}); // 之后 init(this, options, instance, create_fragment, safe_not_equal, {});
最关键的来了，此时我们继续修改代码如下
<script> let count = 0 </script> <h1 on:click={() => count++}>Hello world!{count}</h1>
再去查看编译结果，create_fragment发生了重大变化
function create_fragment(ctx) { let h1; let t0; let t1; let mounted; let dispose; return { c() { h1 = element("h1"); h1.textContent = "Hello world!"; t0 = text("Hello world!"); t1 = text(/*count*/ ctx[0]); }, m(target, anchor) { insert(target, h1, anchor); append(h1, t0); append(h1, t1); if (!mounted) { dispose = listen(h1, "click", /*click_handler*/ ctx[1]); mounted = true; } }, // ... d(detaching) { if (detaching) detach(h1); mounted = false; dispose(); } }; }
值得注意的是，t1的值为/* count */ ctx[0]
instance的返回值为[count, click_handler]，
结合前面的内容，得出一个明显的结论：instance的返回值就是create_fragment的参数！
好了，啰里吧嗦这么多，我们终于可以讨论开头的问题了
既然Svelte没有Api，那到底是怎么追踪变量变化的呢？
svelte在编译时，会检测所有变量的赋值行为，并将变化后的值和赋值的行为，作为创建片段的参数。
这就是svelte朴素的编译原理。
