运行时 - RUNTIME - svelte - 《svelte 开发文档 - 帮助手册 - 教程》

onMount
beforeUpdate
afterUpdate
onDestroy
tick
setContext
getContext
hasContext
getAllContexts
createEventDispatcher
类型

svelte 包公开了生命周期函数和上下文 API。

onMount


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

onMount 函数安排一个回调在组件首次挂载到 DOM 后立即运行。它必须在组件的初始化期间被调用（但不需要活在 组件内部；它可以从外部模块被调用）。

onMount 不在服务器端组件中运行。

<script>
    import { onMount } from 'svelte';
    onMount(() => {
        console.log('the component has mounted');
    });
</script>

如果从 onMount 返回一个函数，它将在组件卸载时被调用。

<script>
    import { onMount } from 'svelte';
    onMount(() => {
        const interval = setInterval(() => {
            console.log('beep');
        }, 1000);
        return () => clearInterval(interval);
    });
</script>

这种行为只有在传递给 onMount 的函数同步返回一个值时才有效。async 函数总是返回一个 Promise，因此不能同步返回一个函数。

beforeUpdate

function beforeUpdate(fn: () =>  any):  void;

安排一个回调在组件在任何状态改变后更新之前立即运行。

回调第一次运行将在初始 onMount 之前

<script>
    import { beforeUpdate } from 'svelte';
    beforeUpdate(() => {
        console.log('the component is about to update');
    });
</script>

afterUpdate

function afterUpdate(fn: () =>  any):  void;

安排一个回调在组件更新后立即运行。

回调第一次运行将在初始 onMount 之后

<script>
    import { afterUpdate } from 'svelte';
    afterUpdate(() => {
        console.log('the component just updated');
    });
</script>

onDestroy

function onDestroy(fn: () =>  any):  void;

安排一个回调在组件卸载之前立即运行。

在 onMount、beforeUpdate、afterUpdate 和 onDestroy 中，这是唯一一个在服务器端组件中运行的。

<script>
    import { onDestroy } from 'svelte';
    onDestroy(() => {
        console.log('the component is being destroyed');
    });
</script>

tick


function tick():  Promise<void>;

返回一个承诺，一旦任何待处理状态改变被应用，或者如果没有，在下一个微任务中解决。

<script>
    import { beforeUpdate, tick } from 'svelte';
    beforeUpdate(async () => {
        console.log('the component is about to update');
        await tick();
        console.log('the component just updated');
    });
</script>

setContext


function setContext<T>(key:  any, context:  T):  T;

将一个任意的 context 对象与当前组件和指定的 key 关联，并返回该对象。上下文随后对组件的子级（包括插槽内容）可用，使用 getContext。

像生命周期函数一样，这必须在组件初始化期间被调用。

<script>
    import { setContext } from 'svelte';
    setContext('answer', 42);
</script>

上下文本质上不是响应式的。如果您需要上下文中的反应性值，那么您可以将存储传递给上下文，这将是响应式的。

getContext

function getContext<T>(key:  any):  T;

检索属于具有指定 key 的最近父组件的上下文。必须在组件初始化期间调用。

<script>
    import { getContext } from 'svelte';
    const answer = getContext('answer');
</script>

hasContext


function hasContext(key:  any):  boolean;

检查给定的 key 是否已在父组件的上下文中设置。必须在组件初始化期间调用。

<script>
    import { hasContext } from 'svelte';
    if (hasContext('answer')) {
        // 做点什么
    }
</script>

getAllContexts


function getAllContexts<
  T  extends  Map<any,  any> =  Map<any,  any>
>():  T;

检索属于最近父组件的整个上下文映射。必须在组件初始化期间调用。例如，如果您以编程方式创建组件并希望将现有上下文传递给它时非常有用。

<script>
    import { getAllContexts } from 'svelte';
    const contexts = getAllContexts();
</script>

createEventDispatcher


function createEventDispatcher<
  EventMap  extends  Record<string,  any> =  any
>():  EventDispatcher<EventMap>;

创建一个事件分派器，可用于分派组件事件。事件分派器是可以带有两个参数的函数：name 和 detail。

使用 createEventDispatcher 创建的组件事件会创建一个 CustomEvent。这些事件不会冒泡。detail 参数对应于 CustomEvent.detail 属性，可以包含任何类型的数据。

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
</script>
<button on:click={() => dispatch('notify', 'detail value')}>触发事件</button>

从子组件分派的事件可以在其父组件中被监听。在分派事件时提供的任何数据都可以在事件对象的 detail 属性上获得。

<script>
    function callbackFunction(event) {
        console.log(`Notify fired! Detail: ${event.detail}`);
    }
</script>
<Child on:notify={callbackFunction} />

通过向分派函数传递第三个参数，可以使事件可取消。如果事件被 event.preventDefault() 取消，则函数返回 false，否则返回 true。

<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    function notify() {
        const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
        if (shouldContinue) {
            // 没有人调用 preventDefault
        } else {
            // 一个监听器调用了 preventDefault
        }
    }
</script>

您可以对事件分派器进行类型定义，以定义它可以接收哪些事件。这将使您的代码在组件内部（错误调用被标记）和使用组件时（事件的类型现在被缩小）更加类型安全。请参阅这里如何操作。

类型

ComponentConstructorOptions


interface ComponentConstructorOptions<
  Props  extends  Record<string,  any> =  Record<string,  any>
> {…}

target: Element | Document | ShadowRoot;

anchor?: Element;

props?: Props;

context?:  Map<any, any>;

hydrate?: boolean;

intro?: boolean;

$$inline?: boolean;

ComponentEvents

方便的类型，用于获取给定组件期望的事件。示例：

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';
   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
      console.log(event.detail);
   }
</script>
<Component on:close={handleCloseEvent} />

type ComponentEvents<Component extends SvelteComponent_1> =
    Component extends SvelteComponent<any, infer Events>
        ? Events
        : never;

ComponentProps

方便的类型，用于获取给定组件期望的属性。示例：

<script lang="ts">
    import type { ComponentProps } from 'svelte';
    import Component from './Component.svelte';
    const props: ComponentProps<Component> = { foo: 'bar' }; // 如果这些不是正确的属性会出错
</script>

type ComponentProps<Component extends SvelteComponent_1> =
    Component extends SvelteComponent<infer Props>
        ? Props
        : never;

ComponentType

方便的类型，用于获取 Svelte 组件的类型。例如，与 <svelte:component> 一起使用动态组件时非常有用。

示例：

<script lang="ts">
    import type { ComponentType, SvelteComponent } from 'svelte';
    import Component1 from './Component1.svelte';
    import Component2 from './Component2.svelte';
    const component: ComponentType = someLogic() ? Component1 : Component2;
    const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>
<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />


type ComponentType<
  Component  extends  SvelteComponent  =  SvelteComponent
> = (new (
 options:  ComponentConstructorOptions<
  Component  extends  SvelteComponent<infer  Props>
  ?  Props
  :  Record<string,  any>
 >
) =>  Component) & {
  /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
 element?:  typeof HTMLElement;
};

SvelteComponent

Svelte 组件的基类，具有一些小的开发增强功能。当 dev=true 时使用。

可用于创建强类型 Svelte 组件。

示例:

您在 npm 上有一个名为 component-library 的组件库，您从中导出一个名为 MyComponent 的组件。对于 Svelte+TypeScript 用户，您想提供类型定义。因此，您创建了一个 index.d.ts：


import { SvelteComponent } from  "svelte";
export class MyComponent extends SvelteComponent<{foo:  string}> {}

这样打字使得像 VS Code 这样的 IDE（带有 Svelte 扩展）能够提供智能感知，并以这种方式在带有 TypeScript 的 Svelte 文件中使用组件：

<script lang="ts">
    import { MyComponent } from "component-library";
</script>
<MyComponent foo={'bar'} />


class SvelteComponent<
  Props  extends  Record<string,  any> =  any,
  Events  extends  Record<string,  any> =  any,
  Slots  extends  Record<string,  any> =  any
> extends SvelteComponent_1<Props,  Events> {…}


[prop: string]: any;


constructor(options: ComponentConstructorOptions<Props>);


$capture_state(): void;


$inject_state(): void;

SvelteComponentTyped

使用 SvelteComponent 代替。有关更多信息，请参见 PR：https://github.com/sveltejs/svelte/pull/8512


class SvelteComponentTyped<
  Props  extends  Record<string,  any> =  any,
  Events  extends  Record<string,  any> =  any,
  Slots  extends  Record<string,  any> =  any
> extends SvelteComponent<Props,  Events,  Slots> {}