关于svelte:Svelte-响应式原理剖析-重新思考-Reactivity

这篇文章将为大家介绍前端圈“新”宠 Svelte，以及其背地的响应式原理。对于 Svelte 你还没用过，但大概率会在一些技术周刊，社区，或者前端年度报告上听到这个名字。如果你应用掘金写文章的话，那其实曾经在应用 Svelte 了，因为掘金新版的编辑器 bytemd 就是应用 Svelte 写的 👀。

（：对于一些讯息源比拟广的同学来说，Svelte 可能不算新事物，因为其早在 2016 就开始动工，是我落后了。

这篇文章公布与掘金：https://juejin.cn/post/696574…

一个 前端框架，轮子哥 Rich Harris 搞的，你可能对这个人字不太熟悉，但 rollup 必定听过，同一个作者。

新的框（轮）架（子）意味着要学习新的语法，如同每隔几个月就要学习新的“语言”，不禁让我想晒出那个旧图。

吐槽归吐槽，该学的还是要学，不然就要被淘汰了👻。Svelte 这个框架的次要特点是：

用最根本的 HTML,CSS,Javascript 来写代码
间接编译成原生 JS，没有中间商（Virtual DOM) 赚差价
没有简单的状态管理机制

决定是否应用某个框架，须要有一些事实根据，上面咱们将从 Star 数，下载趋势，代码体积，性能，用户满意度，等几个维度来比照一下 React、Vue、Angular、Svelte 这几个框架。

	React	Vue	@angular/core	Svelte
Star 数🌟	168,661	183,540	73,315	47,111
代码体积 🏋️‍♀️	42k	22k	89.5k	1.6k

Star 数上看，Svelte 只有 Vue（yyds）的四分之一（Svelte（2016）比 Vue（2013）慢起步三年）。不过 4.7w Star 数也不低。

代码体积（minizipped）上，Svelte 只有 1.6k！！！可别忘了轮子哥另一个作品是 rollup，打包优化很在行。不过随着我的项目代码减少，用到的性能多了，Svelte 编译后的代码体积减少的速度会比其余框架快，前面也会提到。

Npm trendings 链接中转

下载量差距非常明显，Svelte(231,262) 只有 React(10,965,933) 的 百分之二。光看这边外表数据还不够，跑个分看看。

越绿示意分越高，从上图能够看到 Svelte 在性能，体积，内存占用方面体现都相当不错。再看看用户满意度如何。

同样地，Svelte 排到了第一！！！（Interest 也是）。

通过以上的数据比照，咱们大抵能失去的论断是：Svelte 代码体积小，性能爆表，将来可期，值得深刻学习。

<script>
  let count = 0;

  function handleClick() {count += 1;}
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<style>
  button {color: black;}
</style>

以上就是一个 Svelte 组件，能够看到和 Vue 的写法基本一致，一个 .svelte 文件蕴含了 JS，HTML，CSS，并且应用相似的模板语法，指令绑定。

不一样的点可能是 Style 默认是 scoped 的，HTML 不须要用 <template></template> 包裹，以及没有 new Vue，data 的初始化步骤。间接定义一个变量，间接用就行了。（背地产生了什么放到 Reactivity 章节再讲）

Vue 的写法：

var vm = new Vue({
  data: {count: 0}
})

神奇的 `$:` 语法

须要在依赖数据变更时触发运算，在 Vue 中通常是应用 computed 来实现。

var vm = new Vue({
  data: {count: 0},
  computed: {double: function () {
      // `this` 指向 vm 实例
      return this.count * 2
    }
  }
})

在 Svelte 也有相似的实现，咱们应用 $: 关键字来申明 computed 变量。

<script>
  let count = 0;

  function handleClick() {count += 1;}
    
  $: double = count * 2
</script>

<button on:click={handleClick}>
  Clicked {double} times
</button>

下面的例子中，每次点击按钮，double 都会从新运算并更新到 DOM Tree 上。这是什么黑科技？是原生 JS 代码吗？

还别说，的确是 ，这里的应用的是 Statements and declarations 语法，冒号: 前能够是任意非法变量字符，定义一个 goto 语句。不过语义不一样，这里 Svelte 只是讨巧用了这个被废除的语法来申明计算属性（还是原生 JS 语法，👻 没有引入黑科技。

作为一个前端框架，Svelte 该有的性能一样不少，例如模板语法，条件渲染，事件绑定，动画，组件生命周期，Context，甚至其余框架没有的它也有，比方自带 Store，Motion 等等十分多，因为这些 API 的学习老本并不高，用到的时候看一下代码就能够了。

接下来进入本篇文章的外围，Svelte 如何实现响应式（Reactivity) 或者说是数据驱动视图的形式和 Vue、React 有什么区别。

高中化学的课堂咱们接触过很多试验，例如应用紫色石蕊试液来甄别酸碱。酸能使紫色石蕊溶液变成红色，碱能使紫色石蕊溶液变成蓝色。试验的原理是和分子结构无关，分子结构是链接，增加酸 / 碱是动作，而分子结构变动呈现出的后果就是反馈 Reactivity。

利用好 Reactivity 往往能事倍功半，例如在 Excel/Number 外面的函数运算。

上例咱们定义 E11 单元格的内容为 =SUM(D10, E10)（建设连贯），那么每次 D10，E10的数据产生变更时（动作），利用主动帮咱们执行运算（反馈），不必笨笨地手动用计算器运算。

为了更清晰地意识 Reactvity 对编码的影响，构想一下开发一个 Todo 利用，其性能有新增工作，展现工作列表，删除工作，切换工作 DONE 状态等。

首先须要保护一个 tasks 的数据列表。

const tasks = [
    {
        id: 'id1',
        name: 'task1',
        done: false
    }
]

应用 DOM 操作遍历列表，将它渲染进去。

function renderTasks() {const frag = document.createDocumentFragment();
  tasks.forEach(task => {
    // 省略每个 task 的渲染细节
    const item = buildTodoItemEl(task.id, task.name);
    frag.appendChild(item);
  });

  while (todoListEl.firstChild) {todoListEl.removeChild(todoListEl.firstChild);
  }
  todoListEl.appendChild(frag);
}

而后每次新增 / 删除 / 批改工作时，除了批改 tasks 数据，都须要手动触发从新渲染 tasks（当然这样的实现并不好，每次删除 / 插入太多 DOM 节点性能会有问题）。

function addTask (newTask) {tasks.push(newTask)
    renderTaks()}

function updateTask (payload) {
    tasks = //...
    renderTaks()}

function deleteTask () {
    tasks = //...
    renderTaks()}

留神到问题了吗，每次咱们批改数据时，都须要手动更新 DOM 来实现 UI 数据同步。（在 jQuery 时代，咱们的确是这么做的，开发成本高，依赖项多了当前会逐步失控）

而有了 Reactvity，开发者只须要 批改数据 即可，UI 同步的事件交给 Framework 做，让开发者彻底从繁琐的 DOM 操作外面解放出来。

// vue
this.tasks.push(newTask)

在解说 Svelte 如何实现 Reactivity 之前，先简略说说 React 和 Vue 别离是怎么做的。

React 开发者应用 JSX 语法来编写代码，JSX 会被编译成 ReactElement，运行时生成形象的 Virtual DOM。

而后在每次从新 render 时，React 会从新比照前后两次 Virtual DOM，如果不须要更新则不作任何解决；如果只是 HTML 属性变更，那反映到 DOM 节点上就是调用该节点的 setAttribute 办法；如果是 DOM 类型变更、key 变了或者是在新的 Virtual DOM 中找不到，则会执行相应的删除 / 新增 DOM 操作。

除此之外，形象 Virtual DOM 的益处还有不便跨平台渲染和测试，比方 react-native, react-art。

应用 Chrome Dev Tool 的 Performance 面板，咱们看看一个简略的点击计数的 DEMO 背地 React 都做了哪些事件。

import React from "react";

const Counter = () => {const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount((val) => val + 1)}>{count}</button>;
};


function App() {return <Counter />;}

export default App;

大抵能够将整个流程分为三个局部，首先是调度器，这里次要是为了解决优先级（用户点击事件属于高优先级）和合成事件。

第二个局部是 Render 阶段，这里次要是遍历节点，找到须要更新的 Fiber Node，执行 Diff 算法计算须要执行那种类型的操作，打上 effectTag，生成一条带有 effectTag 的 Fiber Node 链表。常说的 异步可中断 也是产生在这个阶段。

第三个阶段是 Commit，这一步要做的事件是遍历第二步生成的链表，顺次执行对应的操作（是新增，还是删除，还是批改 …）

所以对咱们这个简略的例子，React 也有大量的前置工作须要实现，真正批改 DOM 的操作是的是红框中的局部。

前置操作实现，计算出原来是 nodeValue 须要更新，最终执行了 firstChild.nodeValue = text。

演示应用的 React 版本是 17.0.2，曾经启用了 Concurrent Mode。

每次 setState React 都 Schedule Update，而后会遍历产生变更节点的所有子孙节点，所以为了防止不必要的 render，写 React 的时候须要特地留神应用 shouldComponentUpdate，memo，useCallback，useMemo 等办法进行优化。

写了半天，发现还没写到重点。。。为了管制篇幅 Demo 就不写了（介绍 Vue 响应式原理的文章十分多）。

大抵过程是编译过程中收集依赖，基于 Proxy（3.x)，defineProperty(2.x) 的 getter，setter 实现在数据变更时告诉 Watcher。Vue 的实现很酷，每次批改 data 上的数据都像在施魔法。

无论 React, Vue 都在达到目标（数据驱动 UI 更小)的过程中都多做了一些事件（Vue 也用了 Virtual DOM）。而 Svelte 是怎么做到缩小运行时代码的呢？

机密就藏在 Compiler 外面，大部分工作都在编译阶段都实现了。

Svelte 源代码分成 compiler 和 runtime 两局部。

那 Compiler 怎么收集依赖的呢？其实代码中的依赖关系在编译时是能够剖析进去的，例如在模板中渲染一个 {name} 字段，如果发现 name 会在某些时刻批改（例如点击按钮之后），那就在每次name 被赋值之后尝试去触发更新视图。如果 name 不会被批改，那就什么也不必做。

这篇文章不会介绍 Compiler 具体如何实现，来看看通过 Compiler 之后的代码长什么样。

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

会被编译成如下代码，为了不便了解，我把无关的代码临时删除了。

/* App.svelte generated by Svelte v3.38.2 */
import {
  SvelteComponent,
  append,
  detach,
  element,
  init,
  insert,
  listen,
  noop,
  safe_not_equal,
  set_data,
  text
} from "svelte/internal";

function create_fragment(ctx) {
  let h1;

  return {c() {h1 = element("h1");
      h1.textContent = `Hello ${name}!`;
    },
    m(target, anchor) {insert(target, h1, anchor);
    }
}

let name = "world";

create_fragment 办法是和每个组件 DOM 后果相干的办法，提供一些 DOM 的钩子办法，下一小结会介绍。

比照一下如果变量会被批改的代码

<script>
    let name = 'world';
    function setName () {name = 'fesky'}
</script>

<h1 on:click={setName}>Hello {name}!</h1>

编译后

import {
 SvelteComponent,
 append,
 detach,
 element,
 init,
 insert,
 listen,
 noop,
 safe_not_equal,
 set_data,
 text
} from "svelte/internal";

function create_fragment(ctx) {
  let h1;
  let t0;
  let t1;
  let t2;
  let dispose;

  return {c() {h1 = element("h1");
      t0 = text("Hello");
      t1 = text(/*name*/ ctx[0]);
      t2 = text("!");
    },
    m(target, anchor) {insert(target, h1, anchor);
      append(h1, t0);
      append(h1, t1);
      append(h1, t2);

      if (!mounted) {
        // 减少了绑定事件
        dispose = listen(h1, "click", /*handleClick*/ ctx[1]);
      }
    },
    // 多一个 p (update)办法
    p(ctx, [dirty]) {if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);
    }
  };
}
// 多了 instance 办法
function instance($$self, $$props, $$invalidate) {
  let name = "world";

  function setName() {$$invalidate(0, name = "fesky");
  }

  return [name, setName];
}

这种状况下编译后果的代码多了一些，简略介绍一下，首先是 fragment中原来的 m 办法外部减少了 click 事件；多了一个 p 办法，外面调了 set_data；新增了一个 instance 办法，这个办法返回每个组件实例中存在的属性和批改这些属性的办法（name, 和 setName），如果有其余属性和办法也是在同一个数组中返回（不要和 Hooks 搞混了）。

一些细节还不太理解没关系，前面都会介绍。重点关注赋值的代码原来的 name = 'fesky' 被编译成了 $$invalidate(0, name = "fesky")。

还记得后面咱们应用原生代码实现 Todo List 吗？咱们在每次批改数据之后，都要手动从新渲染 DOM！咱们不提倡这么写法，因为难以保护。

function addTask (newTask) {tasks.push(newTask)
    renderTaks()}

而 Svelte Compile 实际上就是在代码编译阶段帮咱们实现了这件事！把须要数据变更之后做的事件都剖析进去生成原生 JS 代码，运行时就不须要像 Vue Proxy 那样的运行时代码了。

Selve 提供了在线的实时编译器，能够动动小手试一下。https://svelte.dev/repl/hello…

接下来的局部将是从源码角度来看看 Svelte 整体是如何 run 起来的。

每个 Svelte 组件编译后都会有一个 create_fragment 办法，这个办法返回一些 DOM 节点的申明周期钩子办法。都是单个字母不好了解，从源码上能够看到每个缩写的含意。

interface Fragment {
  key: string|null;
  first: null;
  /* create  */ c: () => void;
  /* claim   */ l: (nodes: any) => void;
  /* hydrate */ h: () => void;
  /* mount   */ m: (target: HTMLElement, anchor: any) => void;
  /* update  */ p: (ctx: any, dirty: any) => void;
  /* measure */ r: () => void;
  /* fix     */ f: () => void;
  /* animate */ a: () => void;
  /* intro   */ i: (local: any) => void;
  /* outro   */ o: (local: any) => void;
  /* destroy */ d: (detaching: 0|1) => void;
}

次要看以下四个钩子办法：
c(create)：在这个钩子外面创立 DOM 节点，创立完之后保留在每个 fragment 的闭包内。
m(mount)：挂载 DOM 节点到 target 上，在这里进行事件的板顶。
p(update)：组件数据产生变更时触发，在这个办法外面查看更新。
d(destroy)：移除挂载，勾销事件绑定。

编译后果会从 svelte/internal 中引入 text,element,append,detach,listen 等等的办法。源码中能够看到，都是一些十分纯正的 DOM 操作。

export function element<K extends keyof HTMLElementTagNameMap>(name: K) {return document.createElement<K>(name);
}

export function text(data: string) {return document.createTextNode(data);
}

export function append(target: Node, node: Node) {if (node.parentNode !== target) {target.appendChild(node);
  }
}

export function detach(node: Node) {node.parentNode.removeChild(node);
}

export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {node.addEventListener(event, handler, options);
  return () => node.removeEventListener(event, handler, options);
}

咱们能够确信 Svelte 没有 Virtual DOM 了~

后面说了，Compiler 会把赋值的代码通通应用 $$invalidate 包裹起来。例如 count ++，count += 1，name = 'fesky' 等等。

这个办法干了什么？看看源码，（删减了局部不重要的代码）

(i, ret, ...rest) => {const value = rest.length ? rest[0] : ret;
  if (not_equal($$.ctx[i], $$.ctx[i] = value)) {make_dirty(component, i);
  }
  return ret;
}

第一个参数 i 是什么？代码中运行起来赋值给 ctx 又是怎么回事 $$.ctx[i] = value？，编译后果传入了一个 0？？？

$$invalidate(0, name = "fesky");

实际上，instance 办法会返回一个数组，外面包含组件实例的一些属性和办法。Svelte 会把返回 instance 办法的返回值赋到 ctx 上保留。所以这里的 i 就是 instance 返回的数组下标。

$$.ctx = instance
    ? instance(component, options.props || {}, (i, ret, ...rest) => {//...})
    : [];

在编译阶段，Svelte 会依照属性在数组中的地位，生成对应的数字。例如当初有两个变量，

<script>
  let firsName = '';
  let lastName = '';

  function handleClick () {
    firsName = 'evan'
    lastName = 'zhou';
  }
</script>

<h1 on:click={handleClick}>Hello {firsName}{lastName}!</h1>

invalidate 局部代码编译后果就会变成：

function handleClick() {
  // 对应数组下标 0
  $$invalidate(0, firsName = "evan");
  // 对应数组下标 1
  $$invalidate(1, lastName = "zhou");
}

return [firsName, lastName, handleClick];

好了，接着往下，$$invalidate中判断赋值之后不相等时就会调用 make_dirty。

function make_dirty(component, i) {if (component.$$.dirty[0] === -1) {dirty_components.push(component);
    schedule_update();
    component.$$.dirty.fill(0);
  }
  component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
}

这个办法外面的主流程是把调用 make_dirty 的组件增加到 dirty_components 中，而后调用了 schedule_update 办法。（dirty 字段的细节延后）

export function schedule_update() {if (!update_scheduled) {
    update_scheduled = true;
    resolved_promise.then(flush);
  }
}

schedule_update 很简略，在 Promise.resolve（microTask）中调用 flush 办法。

(看源码有点枯燥无聊，保持住，马上完结了）

export function flush() {for (let i = 0; i < dirty_components.length; i += 1) {const component = dirty_components[i];
    set_current_component(component);
    update(component.$$);
  }
}

flush 办法其实就是生产后面的 dirty_components，调用每个须要更新组件的 update 办法。

function update($$) {if ($$.fragment !== null) {$$.update();
    const dirty = $$.dirty;
    $$.dirty = [-1];
    $$.fragment && $$.fragment.p($$.ctx, dirty);
  }
}

而 Update 办法呢，又回到了每个 fragment 的 p(update) 办法。这样整个链路就很清晰了。再整顿以下思路：

批改数据，调用 $$invalidate 办法
判断是否相等，标记脏数据，make_dirty
在 microTask 中触发更新，遍历所有 dirty_component，更新 DOM 节点
重置 Dirty

上一小结中还有很重要的细节没有解释，就是 dirty 到底是怎么标记的。

component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));

看到 31，看到 << 右移符号，那铁定是位运算没跑了。首先咱们要晓得，JS 中所有的数字都是合乎 IEEE-754 规范的 64 位双精度浮点类型。而所有的位运算都只会保留 32 后果的整数。

将这个语句拆解一下：
(i / 31) | 0：这里是用数组下标 i 属于 31，而后向下取整（任何整数数字和 | 0 的后果都是其自身，位运算有向下取整的效用）。
(1 << (i % 31))：用 i 对 31 取模，而后做左移操作。

这样咱们就晓得了，dirty 是个数组类型，寄存了多个 32 位整数，整数中的每个 bit 示意换算成 instance 数组下标的变量是否产生变更。

为了不便了解，咱们用四位整数。

[1000] => [8] 示意 instance 中的第一个变量是 dirty。[1001] => [9] 示意 instance 中的第一个变量和第四个变量是 dirty。[1000, 0100] => [9, 4] 示意 instance 中的第一个变量和第六个变量是 dirty。

对这些基础知识不太熟悉的敌人能够翻我以前写的另外两篇文章
硬核根底二进制篇（一）0.1 + 0.2 != 0.3 和 IEEE-754 规范
硬核根底二进制篇（二）位运算

再回头看 p 办法，每次调用时都会判断依赖的数据是否产生变更，只有产生变更了，才更新 DOM。

p(ctx, [dirty]) {if (dirty & /*firsName*/ 1) set_data(t1, /*firsName*/ ctx[0]);
  if (dirty & /*lastName*/ 2) set_data(t2, /*lastName*/ ctx[1]);
}

对了，还有个约定，如果 dirty 第一个数字存储的是 -1 示意以后组件是洁净的。

$$.dirty = [-1];

能够在 Github Issue 中找到相干的探讨，这样实现的益处是，编译后代码体积更小，二进制运算更快一点点。

最初写个 DEMO 同样应用 Performance 面板记录代码运行信息和 React 比照一下。

<script>
  let count = 1;
  function handleClick () {count += 1}
</script>

<button on:click={handleClick}>{count}</button>

（因为切实太高效了，以至于我不得不独自为它做张放大图）💰钱都花在刀刃上。

心愿看到这里你曾经彻底把握了 Svelte 响应式背地的所有逻辑。我把整个流程画了个草图，能够参考。整体看下来，Svelte 运行时的代码是十分精简，也很好了解的，有工夫的话举荐看源码。

决定是否应用某框架还有很打一个因数是框架生态怎么样，我在网上收集了一部分，列出来供参考。

SSR Sapper (7.1k ⭐)
组件库 svelte-material-ui (1.7k ⭐)
VScode 插件 svelte-vscode (12k Usage)
Router svelte-routing（1.4k ⭐）
Native svelte-native(800 ⭐)
单元测试 svelte-testing-library (390 ⭐)
Chrome Dev-tools Svelte Devtools (500 ⭐)

总体上看，整个生态还不太够弱小，有很大空间。如果应用 Svelte 来开发治理后盾，可能没有像应用 Antd 那样顺滑，而如果是开发 UI 高度自定义的 H5 流动页就齐全不在话下。

以前大家选 Vue 而不是 React 的理由，理由听到最多的是说 Vue 体积小，上手快。当初 Svelte 更小（针对小我的项目）更快更适宜用来做流动页，你会上手吗？

Anyways，无论如何武器库又丰盛了 💐💐💐，下次做技术选型的时候多了一种抉择，理解了不必 和没听说过所以不必 还是有很大区别的。

对于我而言，Svelte 实现 Reactivity 的确特立独行，理解完实现原理也从中学到了很多常识。这篇文章花了我三天工夫（找材料、看源码、写 DEMO，做纲要，写文章），如果感觉对你有播种，欢送点赞 ❤️ + 珍藏 + 评论 + 关注，这样我会更有能源产出好文章。

工夫仓促，程度无限，难免会有纰漏，欢送斧正。

MDN 前端框架介绍
When does React re-render components?
Rich Harris – Rethinking reactivity
Compile Svelte in your head
尤雨溪 - 如何对待 svelte 这个前端框架

关于svelte:Svelte-响应式原理剖析-重新思考-Reactivity

0.Intro

1.Svelte 是啥？

2. 框架比照

NPM 下载趋势

Benchmark 跑分

用户满意度

初步论断

3.Svelte 根本语法

类 Vue 写法

神奇的 `$:` 语法

该有的都有

4.Reactivity

什么是 Reactivity?

没有 Reactivity 之前是怎么写代码的？

React 的实现

Vue 的实现

5. Svelte 降维打击

外围 Compiler

Fragment——都是纯正的 DOM 操作

$$invalidate——Schedule Update 的开始

Dirty Check

神奇的 Bitmask

小结

6. 生态

7. 结语

8. 相干链接

Just My Socks（注册教程内含优惠码）

关于svelte:Svelte-响应式原理剖析-重新思考-Reactivity

0.Intro

1.Svelte 是啥？

2. 框架比照

NPM 下载趋势

Benchmark 跑分

用户满意度

初步论断

3.Svelte 根本语法

类 Vue 写法

神奇的 $: 语法

该有的都有

4.Reactivity

什么是 Reactivity?

没有 Reactivity 之前是怎么写代码的？

React 的实现

Vue 的实现

5. Svelte 降维打击

外围 Compiler

Fragment——都是纯正的 DOM 操作

$$invalidate——Schedule Update 的开始

Dirty Check

神奇的 Bitmask

小结

6. 生态

7. 结语

8. 相干链接

Just My Socks（注册教程 内含优惠码）

神奇的 `$:` 语法

Just My Socks（注册教程内含优惠码）