一、概述

svelte是一个组件框架,相对于传统界面框架React、Vue比较,最重要的区别是编译时与运行时。svelte是一个编译时框架,在构建时会将组件转换成高效率执行的命令代码,这样使得更新Dom更有效率,而传统框架浏览器必须做额外的工作才能将声明性代码转换为DOM操作,另外由于运行时可以用于优化的信息不足,大多数时候效率不及svelte。svelte作为一种构建用户界面的全新方法,其特点如下:

  1. 更少的代码,编译时将源代码编译成无框架的、更小的执行代码。
  2. 没有虚拟DOM,不再需要通过虚拟DOM对比差异去优化更新Dom操作。
  3. 更简单的响应式编程。

svelte 3是目前的最新稳定版,更新了许多语法及功能,官方博文着重提到,这个版本的核心概念就是响应性(Reactivity)。我们顺着这一特性,开启了入门之路。

二、安装

安装svelte有两种方法,分别为Svelte REPL下载安装和npm安装。

1.下载安装:
访问Svelte REPL,点击右上角工具栏的下载图标,将svelte-app.zip文件保存到计算机并解压。打开终端到该目录安装,如下:

cd /path/to/svelte-app
npm i

然后启动服务器:

npm run dev

输入http://localhost:5000就可以访问到建好的项目了。

2.使用npm
在终端中,可以使用命令立即创建一个新项目,如下所示:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

这将在my-svelte-project目录中创建一个新项目,用npm安装其依赖,并访问http://localhost:5000

三、入门实例

1.反应性赋值,在App.svelte输入以下代码查看结果。

<script>
	let count = 0;

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

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

反应性赋值实例结果

2.反应性声明,在App.svelte输入以下代码查看结果。

<script>
	let count = 1;

	// the `$:` means 're-run whenever these values change'
	$: doubled = count * 2;
	$: quadrupled = doubled * 2;

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

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

<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

反应性声明实例结果

3.反应性语句,在App.svelte输入以下代码查看结果。

<script>
	let count = 0;

	$: if (count >= 10) {
		alert(`count is dangerously high!`);
		count = 9;
	}

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

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

反应性语句实例结果

四、编译完成

打开终端,运行一下命令:

npm run build

编译文件已生成到./public文件夹。