一分钟了解Svelte

作者：renzp94

时间：2021-03-15 15:01:12

如今主流的前端框架(React、Vue)都是在浏览器中完成大部分的工作（runtime），并且借助于virtual DOM(虚拟DOM)和Diff算法来实现局部更新。所以对于React或Vue来说不可避免的需要引入runtime code以及virtual DOM所带来的性能损耗。而 Svelte则是使用了一个全新的方式来构建用户界面。

Svelte 三大特点

Write less code(更少的编码)
No virtual DOM(无虚拟 DOM)
Truly reactive(真正的响应式)

Write less code

相对于React、Vue，Svelte在编写代码时可通过少量的代码来完成相同的事情。比如：一个简单的计数器

React

import React,{ useState } from 'react'

export default () => {
    const [count,setCount] = useState(0)
    const onAdd = () => setCount(count+1)

    return (
        <>
            <div>{count}</div>
            <button onClick={onAdd}>+1</button>
        </>
    )
}

Vue2

<template>
    <div>
        <div>{{ count }}</div>
        <button @click="onAdd">+1</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        onAdd() {
            this.count++;
        }
    }
};
</script>

Vue3

<template>
    <div>{{count}}<div>
    <button @click="onAdd">+1</button>
</template>

<script>
import { ref } from 'vue'

export default {
    setup(){
        const count = ref(0)
        const onAdd = () => count.value++

        return {
            count,
            onAdd
        }
    }
}
</script>

Vue3 script setup rfc

<template>
    <div>{{count}}<div>
    <button @click="onAdd">+1</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const onAdd = () => count.value++
</script>

Svelte

<script>
    let count = 0;
    const onAdd = () => count++;
</script>

<div>{count}</div>
<button on:click={onAdd}>+1</button>

上述分别列举了在React,Vue2,Vue3,Vue3 script setup rfc，Svelte中的实现一个简单的计数器，从中可以看出，仅当Vue3使用了script setup的提案后相对于其他实现足够精简了，但对比Svelte来说还不够精简，在此文中有官方列举的例子。

No virtual DOM

Svelte没有虚拟DOM，也不存在runtime code，Svelte的魔法发生在构建时，即Svelte是一个编译器，在编译过程中注入所需的魔法代码。在此文中有详细内容来说明此特点。

Truky reactive

Svelte中实现了真正的响应式，省去了响应式使用代理或访问器的开销和复杂性，仅仅一个变量便可实现拥有响应式。在上述一个简单的计数器的例子中可以看出，只是定义了一个变量count,然后count++便可以自动更新视图，可谓是惊喜。此文有一个简短的介绍。

快速上手

快速创建项目

npx degit sveltejs/template my-svelte-project
# or download and extract
cd my-svelte-project
# to use  run:
# node scripts/setupTypeScript.js

npm install
npm run dev

基础知识

Svelte文件是以.svelte为后缀，文件中可以书写HTML、JavaScript、Css，每个Svelte文件都是一个组件。

展示数据

Svelte通过{}来插入JavaScript变量，在{}中可以放置任何JavaScript代码，如：name.toUpperCase()。{}只能插入纯文本，如果需要插入HTML需要使用{@html }。Svelte还提供了一个调试 API：{@debug val1,var2...}，每当特定的值发生改变时都会记录这些变量的值，如果打开了调试控制台，则会暂停代码执行（打断点）。

注意：在Svelte中style的样式只对当前组件生效，如需全局影响，需要使用:global()。

<script>
    export let name;
    let html = '<h1>这是一个H1</h1>';
</script>

<h1>Hello {name}</h1>
<div>{@html html}</div>

<style>
    h1 {
        color: #ff3e00;
    }
</style>

动态属性

如果一个HTML元素需要动态绑定属性的话，可通过{}来绑定，如果绑定的值和属性名一样，可以简写为{变量名}，如：<img src={src} /> 简写： <img {src} />。

<script>
    let src = 'https://codebook.vercel.app/assets/images/logo.png';
</script>

<img {src} />

通过简单的了解，可以发现Svelte还是和React和Vue有很多相似的地方，但是要记住一个关键性的区别：

Svelte在构建/编译阶段将应用程序转换为理想的JavaScript应用，而不是在运行阶段解释应用程序的代码。这意味着不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。同时，Svelte还可以将组件作为独立的包发布并应用到任何地方且不会带来额外的开销。