简单、好懂的Svelte实现原理

Svelte问世很久了，一直想写一篇好懂的原理分析文章，拖了这么久终于写了。

Demo1

首先来看编译时，考虑如下App组件代码：

<h1>{count}</h1>

<script>
  let count = 0;
</script>

这段代码经由编译器编译后产生如下代码，包括三部分：

• create_fragment方法
• count的声明语句
• class App的声明语句

// 省略部分代码…
function create_fragment(ctx) {
  let h1;

  return {
    c() {
      h1 = element("h1");
      h1.textContent = `${count}`;
    },
    m(target, anchor) {
      insert(target, h1, anchor);
    },
    d(detaching) {
      if (detaching) detach(h1);
    }
  };
}

let count = 0;

class App extends SvelteComponent {
  constructor(options) {
    super();
    init(this, options, null, create_fragment, safe_not_equal, {});
  }
}

export default App;

create_fragment

首先来看create_fragment方法，他是编译器根据App的UI编译而成，提供该组件与浏览器交互的方法，在上述编译结果中，包含3个方法：

• c，代表create，用于根据模版内容，创建对应DOM Element。例子中创建H1对应DOM Element：

h1 = element("h1");
h1.textContent = `${count}`;

• m，代表mount，用于将c创建的DOM Element插入页面，完成组件首次渲染。例子中会将H1插入页面：