Svelte入门基础简介

Svelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。

Svelte在语法上非常简单，和vue很像，但是api会简单很多，因此代码量会少很多，并且没有虚拟DOM，所以代码体积会小很多，也没有很复杂的状态管理。

一、基本用法

（1）一个.svelte就是一个组件，有html，css和js代码封装组成。类似vue的写法，中定义的变量，可以使用单大花括号写在html中，例如：

当属性名和变量名是一样的时候。我们可以简写省略掉变量名。

（2）样式：对于css样式，就行写html文件那样去写：

This is a paragraph.

重要的第一点是，这个样式的作用域限定于当前组件中。不会对其他地方的p标签产生影响。

（3）组件嵌套：上面说的例子都是简单的一个小组件，然而完整的应用程序是由多个组件构成的，使用组件也很简单，import进来就可以使用，并且为了区分自定义组件和普通HTML标签，组件名必须首字母大写：

This is a paragraph.

（4）字符串转为HTML标签：类似于vue里的v-html和react里的dangerouslySetInnerHTML。Svelte里面用{@html ......}的形式，这种情况下，需要手动转义非信任源的HTML标签来避免XSS攻击。

{@html string}

二、响应式

（1）赋值：响应式也是Svelte的核心之一，在js里直接修改绑定的变量，就可以同步看到DOM上数据发生改变，很简单：

    Clicked {count} {count === 1 ? 'time' : 'times'}

（2）声明：类似vue里的computed，这里叫“反应式声明”，这样写：

let count = 0;

$: doubled = count * 2;

然后就可以在html里像用count那样使用doubled。

以此类推，$: 后面也可以跟一串逻辑，比如：

$: {

        console.log(`the count is ${count}`);

        alert(`I SAID THE COUNT IS ${count}`);

}

甚至是逻辑表达式：

$: if (count >= 10) {

        alert(`count is dangerously high!`);

        count = 9;

}

（3）更新数组和对象：Svelet的响应式是有赋值语句触发的，所以像数组的push、splice这些操作就不会触发更新，所以做法是需要手动添加一个看似多余的赋值语句：

{numbers.join(' + ')} = {sum}

    Add a number

对于数组和对象的属性赋值，就是正常的obj.foo=1或者arr[i]=x那样来。

三、属性

组件之间的传值很简单，父组件依旧写成正常的传值：

在子组件里，需要将answer变量export出去：

The answer is {answer}

当然，也可以在后面赋初始值：

export let answer = "hello";

属性传递也支持结构运算符，比如想把一个对象的属性值分别传递到子组件，不用写一大排，只用

在子组件里，分别export let name; export let version;这些就行了。

四、逻辑

（1）条件逻辑：

在HTML里面加上逻辑标记，{#if xxxxx}，单个if的例子：

{#if user.loggedIn}

        

                Log out

        

{/if}

{#if !user.loggedIn}

        

                Log in

        

{/if}

对于if-else的写法：

{#if x > 10}

        

{x} is greater than 10

{:else if 5 > x}

        

{x} is less than 5

{:else}

        

{x} is between 5 and 10

{/if}

这里面，#表示一个块逻辑的开始，/表示结束，：表示继续。

（2）遍历：使用each。也可以写成each cats as {id, name}，然后直接使用id和name来代替cat.id和cat.name。

The Famous Cats of YouTube

    {#each cats as cat,index}

        

            {index+1} {cat.name}

        

    {/each}

类似于vue里v-for的key，这里我们可以这样做，这里就是把id作为key：

{#each things as thing (thing.id)}

        

{/each}

（3）await：Svelte可以直接把promise的逻辑写在标签里，在标签中执行promise并展示回调结果：

    generate random number

{#await promise then number}

{number}

{/await}

// 或者可以写的更详细

{#await promise}

        

...waiting

{:then number}

        

The number is {number}

{:catch error}

        

{error.message}

{/await}

五、事件

（1）事件监听：使用on: 指令监听，on:click，on:mousemove这些：

    The mouse position is {m.x} x {m.y}

当然，handleMousemove可以替换为箭头函数写成行内的形式：

   The mouse position is {m.x} x {m.y}

事件监听的时候也可以使用事件修饰符，用‘|’分隔，可以连续使用多个：

on:click|once|capture={handleEvent}

可用的事件修饰符有：preventDefault、stopPropagation、passive、capture、once、self。

（2）组件通信：子组件通过dispatch方法给父组件发消息

    Click to say hellos

在父组件中通过on监听：

message={handleMessage}/>

上面提到的只是父子组件的事件传递，犹豫组件不会冒泡，对于深层嵌套的组件上的事件监听，就需要在中间的组件继续转发事件，但每次写一遍dispatch也比较臃肿，所以对于纯转发的行为，可以简写为：

在没有赋予特定值的情况下，意味着转发所有message事件。

特别的一点是，如果子组件内部想要接受父组件的点击事件，只需要在内部加上on:click：

父组件：

子组件：

on:click>

    Click me

六、绑定

（1）Svelte里的数据绑定，例如input标签，使用bind:value进行绑定：

bind:value={name}>

Hello {name}!

如果绑定的值与变量同名，比如bind:value={value}这种，可以省略写为bind:value。

当然不仅是input.value可以，像复选框的checked也是类似：

 bind:checked={yes}>

上述是单个值的绑定，那么绑定更多值的时候，可以用bind:group将value放在一起，在bind:group里面同一组的单选框互斥，复选框则会形成数组。

   bind:group={flavours} value={flavour}>

（2）bind:this可以绑定任何标签或者组件，并且可以获得标签的引用：

    bind:this={canvas}

    width={32}

    height={32}

>

.....

// 这样在onMount生命周期里就可以获得canvas的Dom

onMount(() => {

  const ctx = canvas.getContext('2d');

  .....

}

（3）组件的属性也可以绑定，比如在父组件引用子组件处写上：

bind:value={pin} on:submit={handleSubmit}/>

那么在子组件中修改value的时候，pin就会立即获得同步更新。不过这个功能不要滥用，因为不好掌握数据流向。

七、生命周期

onMount，onDestroy，beforeUpdate和afterUpdate没啥好说的，tick这个和Vue的nextTick类似。