[TOC]

在开始之前：

注意：此文档目前还是半成品。如遇到缺失或有误导的部分敬请谅解，并且勇于在聊天室寻求帮助，这些教程会更加完善。那么，开始学习吧：

以下页面包含详细的API说明文档，主要是给已经初步接触过Svelte的人们提供的资源。

如果你还没有接触过Svelte，你可以在查阅这些资料前先访问这个可交互的教程或者例子。

组件格式

组件是 Svelte 应用的内置区块，是使用 HTML 的扩展格式的语言写成.svelte文件

一共分为三个区域: script、style和标签, 每一个部分都是选填的。

script

<script>中的 javascript 代码，将在组件实例被创建时执行。 在组件标签顶部显式的申明变量（或者导入变量），这里有4条规则：

  1. export创建组件的属性

Svelte 使用export关键字将一个变量声明标记为组件的属性或prop，这意味着组件的使用者可以直接访问这些变量:

<script>
    // these properties can be set externally
    export let foo;
    export let bar = 'optional default value';

    // you can use export { ... as ... } to have
    // props whose names are reserved keywords
    let clazz;
    export { clazz as class };

    // this property is readonly externally
    export const buzz = 'buzz';

    // Values that are passed in as props
    // are immediately available
    console.log(foo, bar);

    // Function expressions can also be props
    export let format = (number) => (number.toFixed(2));

    // Function declarations are added as methods
    // on the component, rather than props
    export function greetMethod() {
        alert(`I'm a <${this.constructor.name}>!`);
    }

    // you can also use export { ... as ... } to have
    // methods whose names are reserved keywords
    function del() {
        do_something();
    }
    export { del as delete };
</script>
  1. 赋值是『响应式』的

要改变组件的状态state并触发组件的重新渲染，只需要给已申明变量重新赋值

使用表达式（count += 1）更新count的值，和属性赋值（obj.x = y）是等效的。

因为 Svelte 的『响应式特性』是基于赋值的，因此使用.push和.splice将不会自动触发更新。有关解决此问题的选项，可以参考此教程

<script>
    let count = 0;

    function handleClick () {
        // calling this function will trigger a re-render
        // if the markup references `count`
        count = count + 1;
    }
</script>

3 使用$:将表达式设为响应式的

任何顶层的表达式（不在块级作用域中，或函数申明中），都可以通过在前面添加$：前缀来使其成为响应式的。这是js的标签语法。只要它们所依赖的值发生更改，响应式语句就会在组件更新之前立即运行。

如果一个表达式是一条由完全未申明的变量组成的赋值语句，Svelte 会替你插入一个let申明。

<script>
    export let title;

    // this will update `document.title` whenever
    // the `title` prop changes
    $: document.title = title;

    $: {
        console.log(`multiple statements can be combined`);
        console.log(`the current title is ${title}`);
    }
</script>

4 为 Store 添加$前缀来访问它们的值

任何时候，对于任意一个 Store，你都可以在组件内部为该 Store 的引用添加$字符前缀来访问它的值。这会导致 Svelte 申明有前缀的变量，并且会设置一个 Store 订阅, 然后在适当的时候会取消这个订阅。

要注意，必须在组件的顶层申明 Store，并且不可以包含在if代码块中

本地申明的变量（不代指 Store 的值）不允许还有$前缀