Svelte笔记

September 8, 2022

Learn:https://learn.svelte.dev/
Docs:https://svelte.dev/docs
REPL:https://svelte.dev/repl

Template Syntax

Logic

svelte

{#if expression}...{:else if expression}...{:else}...{/if}

svelte

{#each expression as name, index (key)}...{:else}...{/each}

svelte

{#await expression}...{:then name}...{:catch name}...{/await}
{#await expression then name}...{/await}
{#await expression catch name}...{/await}

svelte

{#key expression}...{/key}

Markup

以文本节点表示

svelte

{expression}

以 html 表示

svelte

{@html expression}

标记 debugger。仅允许使用变量标识符，不允许使用表达式。

svelte

{@debug var1, var2, ..., varN}

仅能在逻辑块中使用。在当前逻辑块作用域中声明变量。

svelte

{@const assignment}

Directive

绑定事件监听器

svelte

on:eventname|modifiers={handler}

不提供 handler 时，原样转发当前监听器

svelte

on:eventname

绑定属性

svelte

bind:property={variable}

绑定属性简写 bind:value={value}

svelte

bind:value

元素引用（ref）

svelte

bind:this={dom_node}

绑定 class

svelte

class={expression}
class:name={value}
class:name

绑定 style

svelte

style:property={value}
style:property="value"
style:property
style:property|important={value}

绑定 CSS 变量

svelte

--style-props="anycssvalue"

使用 action（相当于 vue 的自定义指令）

svelte

use:action
use:action={parameters}

action = (node: HTMLElement, parameters: any) => {
    update?: (parameters: any) => void, // parameters 更新时调用
    destroy?: () => void // 节点销毁时调用
}

以下内容省略：

svelte 内置了多种 DOM 属性的绑定，此处省略
这些内容在文档的 Element directives 节有详细说明

Reactivity

svelte 的响应式仅在变量被赋值时触发

html

<script>
    let count = 0;
    $: doubled = count * 2;

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

<button on:click="{increment}">click me</button>
<p>count is {count}</p>
<p>doubled is {doubled}</p>

Component

注意到 svelte 中的属性在子组件中是可变的，在父组件中也是可变的。
这意味着无论是子组件还是父组件都可以修改属性，并没有强制限制单向数据流。

html

<script>
    export let user = "Ray";
    //          ∧       ∧
    //          |       |
    //         属性    默认值
</script>

<h1 {...$$props}>Hello, {user}!</h1>

组件 export const（而不是 export let）用于提供 bind:this

html

<!-- Child.svelte -->
<script>
    let data = ["Apple", "Banana"];
    export const empty = () => (data = []);
</script>
<!-- Parent.svelte -->
<Child bind:this="{cart}"></Child>
<button on:click="{()" ="">cart.empty()}> Empty shopping cart</button>

<script context="module"> 允许 svelte 模块提供其它导出（默认导出是组件本身）

html

<script context="module">
    let totalComponents = 0;

    // the export keyword allows this function to imported with e.g.
    // `import Example, { alertTotal } from './Example.svelte'`
    export function alertTotal() {
        alert(totalComponents);
    }
</script>

<script>
    totalComponents += 1;
    console.log(`total number of times this component has been created: ${totalComponents}`);
</script>

子组件发出（dispatch）事件

html

<!-- Child.svelte -->
<script>
    import { createEventDispatcher } from "svelte";
    const dispatch = createEventDispatcher();
    function dispatchMyEvent() {
        dispatch("myEvent", new Date().toString(), { cancelable: true });
    }
</script>
<button on:click="{dispatchMyEvent}">fire</button>

<!-- Parent.svelte -->
<script lang="ts">
    import Child from "./Child.svelte";
    import type { ComponentEvents } from "svelte";
    function handleMyEvent(event: ComponentEvents<Component>["myEvent"]) {
        console.log(event.detail);
    }
</script>
<Child on:myEvent="{handleMyEvent}"></Child>

Lifecycle & Context

svelte 包导出了生命周期注册函数以及 context 相关函数：import { xxx } from 'svelte';

https://svelte.dev/docs/svelte

参见此示例：https://svelte.dev/repl/cbea1bf8aa614fb2a22711a925394ee6

function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;

onMount(() => {
    const interval = setInterval(() => {
        console.log("beep");
    }, 1000);

    return () => clearInterval(interval);
});

function beforeUpdate(fn: () => any): void;
function afterUpdate(fn: () => any): void;
function onDestroy(fn: () => any): void;
function tick(): Promise<void>;

beforeUpdate(async () => {
    console.log("the component is about to update");
    await tick();
    console.log("the component just updated");
});

function setContext<T>(key: any, context: T): T;
function getContext<T>(key: any): T;
function hasContext(key: any): boolean;
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;

Stores

svelte/store 包导出了 stores API

https://svelte.dev/docs/svelte-store

svelte 提供了美元符号 $ 语法糖，提供对 store 的自动 subscribe 和 unsubscribe

html

<script>
    import { count } from "./stores.js";

    // let count_value;
    // const unsubscribe = count.subscribe(value => {
    // 	count_value = value;
    // });
    // onDestroy(unsubscribe);
</script>

<h1>The count is {$count}</h1>

Motion/Transition/Animation/Easing

svelte 自带的动画方法，由于篇幅有限省略
参见文档：https://svelte.dev/docs/svelte-motion

←Back to home