script

<script>标签里面含有一个组件实例创建时的运行Javascript代码。 在组件标签顶部显示申明变量（或者导入变量），这里有4条规则：

  1. export创建组件的属性

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

  1. <script>
  2.     // these properties can be set externally
  3.     export let foo;
  4.     export let bar = 'optional default value';
  6.     // you can use export { ... as ... } to have
  7.     // props whose names are reserved keywords
  8.     let clazz;
  9.     export { clazz as class };
  11.     // this property is readonly externally
  12.     export const buzz = 'buzz';
  14.     // Values that are passed in as props
  15.     // are immediately available
  16.     console.log(foo, bar);
  18.     // Function expressions can also be props
  19.     export let format = (number) => (number.toFixed(2));
  21.     // Function declarations are added as methods
  22.     // on the component, rather than props
  23.     export function greetMethod() {
  24.         alert(`I'm a <${this.constructor.name}>!`);
  25.     }
  27.     // you can also use export { ... as ... } to have
  28.     // methods whose names are reserved keywords
  29.     function del() {
  30.         do_something();
  31.     }
  32.     export { del as delete };
  33. </script>
  1. 赋值是响应式的

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

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

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

  1. <script>
  2.     let count = 0;
  4.     function handleClick () {
  5.         // calling this function will trigger a re-render
  6.         // if the markup references `count`
  7.         count = count + 1;
  8.     }
  9. </script>

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

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

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

  1. <script>
  2.     export let title;
  4.     // this will update `document.title` whenever
  5.     // the `title` prop changes
  6.     $: document.title = title;
  8.     $: {
  9.         console.log(`multiple statements can be combined`);
  10.         console.log(`the current title is ${title}`);
  11.     }
  12. </script>

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

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

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

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