一、Svelte 简介 Svelte 是一个新兴的热门前端框架，作者是 Rich Harris，被称为前端界的【轮子哥】，有 Ractive、Rollup 和 Buble 开源作品
Svelte 即是一个前端 UI 框架，同时也是一个 编译器。在《State of JS survey of 2020》报告中，它被预测为将来十年可能取代 React 和 Vue 等其余框架的新兴技术。在开源托管网站 Github 上，Svelte 也取得了超过 61k 的关注，这仅次于明星框架 React 和 Vue。
二、Svelte 的长处
事实上，作为一个前端框架，Svelte 在语法、应用体验上没有什么特别之处。真正不同的中央，是 Svelte 对前端 AOT（ahead-of-time，能够了解为预编译）的摸索。
如果大家对 React、Vue 的设计思路比拟理解的话就会晓得，他们必须引入运行时 (runtime) 代码，用于虚构 dom、diff 算法。而 Svelte 的设计思路是【通过动态编译缩小框架运行时的代码量，即预编译】，Svelted 齐全溶入 JavaScript，利用所有须要的运行时代码都蕴含在 bundle.js 外面，因而不须要额定在引入运行时。
React 和 Vue 都是基于运行时的框架，当用户操作页面进行各种操作扭转组件的状态时，框架的运行时会依据组件状态（state）计算（diff）出哪些 DOM 节点须要被更新，从而更新视图。这就意味着，基于运行时框架自身所依赖的代码也会被打包到最终的构建产物中，后果是不可避免减少了打包后的体积。
三、Svelte 的毛病
作为一个尚处在起步阶段的框架，Svelte 还有很多的有余，如果是在大型的商业我的项目中中应用 , 须要特地的审慎。
四、疾速上手
4.1 创立我的项目
和其余前端框架一样，创立一个 Svelte 我的项目是非常简单的，命令如下。
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
而后在浏览器中关上 http://localhost:5173/ 就能拜访对应的页面，运行的成果如下图。
如果须要批改端口号，能够关上 package.json 文件，而后在启动命令里批改环境变量 PORT。
“scripts”: {
“dev”: “PORT=4000 rollup -c -w”,
},
4.2 less 配置
创立 Svelte 我的项目的时候，模板自身是不携带任何插件的，如果须要在 Svelte 组件中写 less，须要装置相干的依赖。
npm install svelte-preprocess-less less
而后，在 rollup.config.js 中增加相干的配置，如果没有 rollup.config.js 文件，能够新建一个。
import sveltePreprocess from ‘svelte-preprocess’;
import {less as svelteLess} from ‘svelte-preprocess-less’;
export default {
plugins: [
svelte({
preprocess: sveltePreprocess({style: svelteLess(),
}),
}),],
};
接下来，咱们就能够在组件中的
<style lang=”less”>
…
</style>
1
2
3
五、语法根底
5.1 根本用法
在 Svelte 利用中，一个.svelte 就是一个组件，它由 html、css 和 js 代码组成，相似 vue 的写法。其中，
<script>
let src = 'image.gif';
let name = 'Rick Astley';</script>
<img {src} alt=”{name} dances.”>
当属性名和变量名是一样的时候，咱们也能够简写省略掉变量名。而款式，和其余的写法是一样的。
<style>
.counter {
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin: 1rem 0;
}
</style>
不过，下面说的例子都是简略的一个小组件，对于一个残缺的应用程序来说，必然是由多个组件形成的。和其余的框架一样，应用时须要 import 引入进来，不同之处在于，import 须要写在
<script>
import Counter from ‘$lib/Counter.svelte’;
</script>
<section>
<Counter />
</section>
5.2 响应式
响应式也是 Svelte 的外围个性之一，在 js 里间接批改绑定的变量，就能够同步看到 DOM 上数据的扭转。
<script>
let count = 0;
function handleClick() {count++;}</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}</button>
相似 vue 里的 computed，这里叫【反应式申明】，这样写：
let count = 0;
$: doubled = count * 2;
而后，就能够在众像用 count 那样应用 doubled。Svelet 的响应式是有赋值语句触发的，所以像数组的 push、splice 这些操作就不会触发更新，正确的做法是须要手动增加一个看似多余的赋值语句，比方。
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {numbers.push(numbers.length + 1);
numbers = numbers;
// 或者写成
// numbers = [...numbers, numbers.length + 1];
}
$: sum = numbers.reduce((t, n) => t + n, 0);</script>
<p>{numbers.join(‘ + ‘)} = {sum}</p>
<button on:click={addNumber}>
Add a number</button>
5.3 属性传值
在前端框架中，组件之间的传值个别应用的是构造函数。在 Svelte 中，组件之间的传值也比较简单，不过须要额定在子组件里，应用 export 关键字将值传递进来。
<Nested answer={21}/>
// 子组件应用 export 导出
<script>
export let answer;</script>
<p>The answer is {answer}</p>
5.4 逻辑语句
和其余的框架不同，Svelte 的逻辑语句须要在 HTML 外面解决，比方{#if xxxxx}，语法方面感觉比不是很敌对。
{#if user.loggedIn}
<button on:click={toggle}>
Log out</button>
{/if}
而对于 if-else 的写法，如下。
{#if x > 10}
<p>{x} is greater than 10</p>{:else if 5 > x}
<p>{x} is less than 5</p>{:else}
<p>{x} is between 5 and 10</p>{/if}
其中，# 示意一个块逻辑的开始，/ 示意完结，：示意持续。
如果要进行循环，个别应用的是 for/each。不过，Svelte 的循环语句切实让人难以承受。
<script>
let cats = [{ id: 'J_aiyznGQ', name: 'Keyboard Cat'},
{id: 'z_AbfPXTKms', name: 'Maru'},
];</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as cat,index}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{index+1} {cat.name}
</a></li>
{/each}</ul>
5.5 事件
和其余框架一样，Svelte 提供了 on:click，on:mousemove 等指令来监听事件。
<button on:click={() => (count += 1)} aria-label=”Increase the counter by one”>
<svg aria-hidden=”true” viewBox=”0 0 1 1″>
<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" /></svg>
</button>
当然，事件监听的时候也能够应用事件修饰符，用‘|’分隔，示意能够间断应用多个。
on:click|once|capture={handleEvent}
特地须要留神的一点是，如果子组件外部想要承受父组件的点击事件，只须要在子组件外部加上 on:click 即可。
// 父组件
<script>
import FancyButton from './FancyButton.svelte';
function handleClick() {alert('clicked');
}</script>
<FancyButton on:click={handleClick}/>
// 子组件
<button on:click>
Click me</button>
5.6 事件绑定
Svelte 里的数据绑定和 Vue、React 时相似的，应用的是 bind:value 形式进行绑定。例如，上面是 input 标签的事件绑定。
<script>
let name = 'world';</script>
<input bind:value={name}>
<h1>Hello {name}!</h1>
上述是单个值的绑定，那么绑定多个值的时候，能够用 bind:group 将 value 放在一起。
<label>
<input type=checkbox bind:group={flavours} value={flavour}>
</label>
并且，bind:this 能够绑定任何标签或者组件，并且能够取得标签的援用，相似于 React 的 ref。
<canvas
bind:this={canvas}
width={32}
height={32}</canvas>
onMount(() => {
const ctx = canvas.getContext(‘2d’);
…..
}
组件的属性也能够绑定，比方在父组件援用子组件的属性。
<Keypad bind:value={pin} on:submit={handleSubmit}/>
不过，作为一款年老的前端框架，很少可能看到一些互联网公司将 Svelte 利用于生产，究其原因，无外乎以下几点：
对低端手机反对不太敌对，特地是用 shadow 等高级个性。
生态不是很欠缺，配套的平安、性能测试、自动化等工具不是很欠缺。
全新的语法，须要肯定的学习老本。