2 分钟掌握 Svelte

Svelte 是一个除了 Vue 和 React 之外的，另一种比较热门的前端框架，整体语法风格更偏向于 Vue。

使用 Svelte 编写的应用程序会把代码直接编译成原生的 JavaScript，不依赖任何运行环境（no svelte.js），而它也不依赖于虚拟 DOM 而是直接去修改真实的 DOM，因此性能更高，且最终生成的项目体积更小，

Svelte 的响应性代码也更直观，直接定义普通的 JavaScript 变量，对它进行修改就能反应到页面上。

语法

创建项目，使用 svelte 和 vite：

npm create vite@latest

或者使用官方的 sveltekit 脚手架，因为sveltekit 脚手架应用架构不适合入门，这里就演示了：

npm create svelte@latest myapp

Svelte 的核心也是组件，组件的定义和 Vue 十分类似，使用 script 标签编写组件逻辑，style 标签编写样式，不同的是，svelte 不需要 template 标签来包裹组件模板，直接编写 html 代码就可以：

<script>
</script>

<button>
</button>

<style>
</style>

在 script 中，使用 let 定义的变量可以直接在 html 中使用大括号来访问它的值：

<script>
  let count = 0;
</script>

<button>
  count is {count}
</button>

注册事件，可以使用 on: 指令，然后加上 html 原生事件的名字去掉 on 之后的部分，之后在 script 定义事件处理函数：

<script>
  let count = 0;
  const increment = () => {
    count += 1;
  };
</script>

<button on:click={increment}>
  count is {count}
</button>

使用 let 定义的变量是响应性的，如果修改了它的值，在模板中使用它的地方也会更新：

<script>
  let count = 0;
  const increment = () => {
    count += 1;
  };
</script>

如果有子组件需要接收 props，那么可以在子组件中使用 export 导出对应的变量，变量值则是 props 的默认值：

export let count = 0;

之后在父组件中，传递同名的 props 即可：

<ShowCount {count} />

svelte 模板支持常见的指令，根据条件或循环展示内容，使用 #each 指令可以遍历数组展示一组 html 标签：

<script>
  export let count = 0;
  let arr = [1, 2, 3, 4, 5];
</script>
// as 后为数组元素，也支持访问索引，使用第二个参数即可：a, i
{#each arr as a}
  <p>
    {a}
  </p>
{/each}

使用 #if 指令可以根据条件展示标签：

{#if count > 5}
  计数大于了 5
{/if}

Svelte 组件也支持生命周期，使用 onMount 可以在组件加载时触发一些操作，如果 onMount 返回了一个函数，那么可以在组件卸载时触发一些操作：

<script>
  import { onMount} from "svelte";
  
  onMount(() => {
    count += 3;
    return () => {
      count = 0;
    };
  });
</script>

当应用程序规模越来越大，需要嵌套多层组件并传递数据时，可以使用 context API 来避面层层传递 props。在需要提供数据的上层组件中，调用 setContext() 传递 context 的 key 和 value：

setContext("count", count);

然后在需要访问值的下层组件中使用 getContext 传递对应的 key 即可：

<script>
import { getContext } from "svelte";
let countFromContext = getContext("count");
</script>

<p>Context 中的 count: {countFromContext}</p>

要注意的是，使用 context 传递的数据是非响应性的，上层组件的修改并不会更新到下层组件中。要传递响应性的数据，可以使用 store，使用 writable 函数可以定义一个 store：

import { writable } from "svelte/store";

export const count = writable(0);

之后在组件中，可以使用 $ 加上 store 的名字来访问它的值，或者叫订阅，因为它还会随着 store 值的变化而更新：

<button on:click={increment}>
  count is {$count}
</button>

要修改 store 的值，可以调用 store 的 update 函数：

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

  const increment = () => {
    count.update((n) => n + 1);
  };
</script>

<button on:click={increment}>
  count is {$count}
</button>

小结

好了，这个就是 svelte 的 2 分钟介绍，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！