Svelte框架入门

关键词

前端框架、编译器、响应式、模板

介绍

Svelte /svelt/ adj. 苗条的；线条清晰的；和蔼的
Svelte是一个前端组件框架，就像它的英文名字一样，Svelte的目标是打造一个更高性能的响应性前端框架。
Svelte类似于React和Vue框架，提供模板语法和响应式编程。但是有一个重要的区别：Svelte是一个编译时的框架，在编译的过程中生成组件运行时的代码并实现响应式，而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。
这正是Svelte宣传的提高性能的核心实现。我们知道，原生的性能肯定是最高的，没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问，那我们在JQuery时代写的代码性能不是更好吗？为什么感觉上却没有比react和Vue写的应用性能好呢。我想，这主要是以下几个原因：

1. 现在的硬件和网络带宽等资源已经比以往有了大幅度的提升，所以就算应用的体积较以往比较大，相比硬件等资源的提升，反而会感觉上性能更好；

2. JQuery是基于原生的DOM API封装和扩展了统一的接口，屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响，只是简单的用JQuery对DOM进行粗暴的全局更新；

3. Vue和React虽然是引入虚拟DOM，需要Diff等逻辑维护和更新实际的DOM树，但是框架本身做了优化，Diff算法和更新策略也有很大的提升，所以性能上并没有感觉比原生的差很多。

虽然Vue和React如今已经满足了前端大部分的场景，Svelte的目标是追求更好的性能 (所以前端是真的卷，总有人乐此不疲的遭轮子，但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法，然后编译成原生JavaScript，提供了一套相对于我们自己操作DOM，更优雅，更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程：

组件文件源码，App.svelte实现了一个简单的点击按钮统计点击次数的功能。

// App.svelte
<script>
  let clickCount = 0;

 function click() {
  clickCount += 1;
 }
</script>

<button on:click="{ click }">click me { clickCount } {  clickCount > 1 ? 'times' : 'time' }</button>


<style>
button {
 cursor: pointer;
}
</style>

通过Svelte编译之后的代码如下，可以具体查看我的注释进行了解：

/* App.svelte generated by Svelte v4.1.1 */
import {
 SvelteComponent,
 append,
 append_styles,
 attr,
 detach,
 element,
 init,
 insert,
 listen,
 noop,
 safe_not_equal,
 set_data,
 space,
 text
} from "svelte/internal";

import "svelte/internal/disclose-version";

// 插入组件样式，Svelte会自动生成一个全局唯一的类名
function add_css(target) {
 append_styles(target, "svelte-1hvi0n4", "button.svelte-1hvi0n4{cursor:pointer}");
}

// 1、生成HTML片段
function create_fragment(ctx) {
 let button;
 let t0;
 let t1;
 let t2;
 let t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "";
 let t3;
 let mounted;
 let dispose;

 return {
    // c --> create 创建
  c() {
   button = element("button");
   t0 = text("click me ");
   t1 = text(/*clickCount*/ ctx[0]);
   t2 = space();
   t3 = text(t3_value);
   attr(button, "class", "svelte-1hvi0n4");
  },
    // m --> mount 挂载
  m(target, anchor) {
   insert(target, button, anchor);
   append(button, t0);
   append(button, t1);
   append(button, t2);
   append(button, t3);

      // 绑定事件
   if (!mounted) {
    dispose = listen(button, "click", /*click*/ ctx[1]);
    mounted = true;
   }
  },
    // p --> update 更新
  p(ctx, [dirty]) {
   if (dirty & /*clickCount*/ 1) set_data(t1, /*clickCount*/ ctx[0]);
   if (dirty & /*clickCount*/ 1 && t3_value !== (t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "")) set_data(t3, t3_value);
  },
  i: noop,
  o: noop,
    // d --> destroy 销毁
  d(detaching) {
   if (detaching) {
    detach(button);
   }

   mounted = false;
   dispose();
  }
 };
}

// 实例，对应上面的ctx传参数
function instance($$self, $$props, $$invalidate) {
 let clickCount = 0;

 function click() {
  $$invalidate(0, clickCount += 1);
 }

 return [clickCount, click];
}

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

export default App;

开始使用

官方推荐使用SvelteKit来创建Svelte应用项目，具体命令如下：

npm create svelte@latest svelte-demo
cd svelte-demo
npm install
npm run dev

Svelte会将.svelte组件文件编译成.js文件去创造真实的DOM和对应的.css样式文件，工具同时提供了开发服务器、路由、编译部署、SSR等支持。SvelteKit利用Vite去编译代码。

如果你不想使用SvelteKit，你还可以通过Vite来创建Svelte应用项目，具体命令如下：

# 选择svelte模板
npm init vite
# 生成HTML，JS，CSS文件到dist文件夹
npm run build

编辑器支持

Svelte团队维护了一个VsCode的插件Svelte for VS Code，支持语法提示、高亮、格式化等功能。

总结

• Svelte是一个编译时的响应式前端组件框架，目标是减少React，Vue等框架引入虚拟DOM和Diff实现响应式的性能损耗。

• Svelte的实现原理理论上比React和Vue等框架性能要好，但是考虑到虚拟DOM技术的成熟和优化，客户端的硬件和网络资源提升，这部分的性能提升带来的收益或许不明显。

• 当前要不要追求极致的性能而选择Svelte？我的答案是否定的。一是Svelte当前的成熟度和生态丰富度都没React和Vue好，开发体验和效率相对会没那么好；二是上面说了，Svelte带来的性能提升收益或许并不会那么明显。

• 那我们要不要关注和学习Svelte? 我的答案是肯定的。Svelte框架背后的实现原理、思路以及技术都是值得我们去了解和学习的。而且未来Svelte的生态丰富了，或许开发体验和效率会越来越好，我们也多一种选择。总之，保持热爱，保持好奇，保持学习吧～

参考

• 官方文档
• Svelte 3: Rethinking reactivity
• deep-dive-into-svelte
• Svelte vs. React: A Comprehensive Comparison

联系我

• E-mail
• 个人博客

本文由 mdnice 多平台发布