SVELTE – 通过编译原生JavaScript操作DOM的前端框架

Svelte 是一种全新的 web 应用程序构建方法。它是一个编译器，它接受声明性组件并将它们转换为有效的原生 JavaScript，从而更新 DOM。

像 React 和 Vue 这样的传统框架是在浏览器中完成大部分工作，而 Svelte 将这些工作转变为构建应用程序时进行编译，进而让你的应用程序启动和运行时更加快速。

Svelte 没有使用诸如虚拟 DOM 之类的技术，而是编译原生JavaScript，当应用程序状态发生变化时，它就会更新 DOM。

特色

• 写更少的代码 —— 只需使用你熟知的语言：HTML、CSS、JavaScript 构建组件。
• 没有虚拟 DOM —— Svelte 将你的代码编译为很小的、无框架的原生 JS，因此，你的应用程序启动和运行更快。
• 真正的“reactive” —— 不再需要复杂的状态管理库 — Svelte 为 JavaScript 本身带来了反应性。

简单的例子

Svelte 组件构建在 HTML 之上，只需添加数据。

App.svelte 文件内容：

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

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

输出内容：

Hello world!

App.svelte 被编译成的 JS：

/* App.svelte generated by Svelte v3.38.3 */
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 ${name}!`;
		},
		m(target, anchor) {
			insert(target, h1, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(h1);
		}
	};
}

let name = "world";

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

export default App;

Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。一个 Svelte 组件编译了之后，所有需要运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

—— 尤雨溪(Vue作者)