启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

前言

在前端领域新涌进了一个新的框架，叫svelte，它是随着前端三大框架火起之后的另一个黑马，虽然在平时中还没有看到用于生产环境，但是选择性地学习也是一个不错的选择。

简介

svelte翻译过来就是苗条的/身材修长的，这就和它本身的特性有关，React和vue都是基于运行时的框架，相当于会把框架本身依赖的代码也会打包到构建产物中去，这样会使代码本身的体积量增加好几倍。在代码方面，vue3和React都借助于hooks来记录有效的变量及其状态，在svelte中代码量会减少很多，就像这样,直接赋值和直接操作，岂不美哉？

let count = 0;

function increment() {
  count += 1;
}

使用

那就从我们开始第一行代码Hello world开始吧。首先我们要在script代码块内声明一个name变量，然后我们就可以在下面的h1标签内使用name变量了，变量需要使用花括号{}包裹起来，花括号不只是简单地只能使用变量，同时也可以用着计算。就像这样-》

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

<h1>Hello {name.toUpperCase()}!</h1>

<script>
	let name = "world";
	let number = 2;
</script>

<h1>Hello {name.toUpperCase()}!</h1>
<h2>
	{ Math.sqrt(2) }
</h2>

是否是虚拟dom的框架

答案：不是。svelte本身并不使用虚拟dom，虚拟dom产生的原因大概都知道，就是它不会直接操作原生的DOM节点。在浏览器当中，JavaScript的运算在现代的引擎中非常快，但DOM本身是非常缓慢的东西。当你调用原生DOM API的时候，浏览器需要在JavaScript引擎的语境下去接触原生的DOM的实现，这个过程有相当的性能损耗。而svelte不使用，这将使你的代码编译成体积小、不依赖框架的普通 JS 代码，让你的应用程序无论启动还是运行都变得迅速。

Svelte学习入门

前言

简介

使用

是否是虚拟dom的框架