前端新一代框架 Svelte 火了！十個場景帶你簡單認識它！
Svelte
近幾年聽到的主流框架都是 Vue、React、Angular，但其實有一個框架在國外非常火，用起來也是很方便，那就是Svelte，這個框架已經連續多年在 Stack Overflow 的開發者調查中成為最受喜愛的前端 UI 框架，但是在國內的名氣感覺還是不怎么大。
抱著技多不壓身的想法，我覺得大家可以了解一下Svelte，了解一下它的用法~接下來就通過一些小例子，帶大家認識一下它的用法。
Vite & Svelte
現階段Vite創建腳手架已經集成了Svelte，所以我們可以使用Vite去初始化一個Svelte的開發項目~我們使用命令去初始：
npm create vite@latest接著我們設置完項目名后，選擇Svelte。
圖片
然后進入項目執行依賴安裝，安裝完后運行項目。
npm i
npm run dev
圖片
變量 & 事件
定義變量時，不需要像vue那樣使用ref，也不需要像react那樣使用useState，只需要直接命名變量即可，這就是一個響應式的變量了。
事件需要用到Svelte的語法 on:，比如點擊事件 on:click={xxxxx}。
下面的例子就可以實現按鈕點擊，實現數字的自增。
<script lang="ts">
let count: number = 0
const increment = () => {
count += 1
}
</script>
<button on:click={increment}>
count is {count}
</button>
圖片
父傳子 & 子傳父
父傳子
先說說父傳子，Svelte提供了export關鍵字，子組件中可以使用export來接收，并且可以結合typescript去定義屬性的類型。
父組件里面，Svelte中提供了{}這樣的語法糖，去支持父組件傳值到子組件中，且類型一定要符合子組件中定義的類型，不然會報類型錯誤。
// 父組件
<script lang="ts">
import Children from './lib/Children.svelte'
let name = '林三心';
let age = 18
</script>
<main>
<div class="card">
<Children {name} {age} />
</div>
</main>
圖片
子傳父
其實很多框架都一樣，數據都是單向流的，父傳子很正常。但是子傳父的話，最好就是使用事件去傳輸。
- 子組件：需要使用createEventDispatcher去派發到父組件。
- 父組件：需要使用on:message去接收子組件傳過來的。
// Children.svelte
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sendData() {
const data = 'Hello from Child!';
dispatch('message', data);
}
</script>
<button on:click={sendData}>發送</button>// 父組件
<script lang="ts">
import Children from './lib/Children.svelte'
const handleMessage = (event) => {
console.log(event.detail); // 輸出子組件傳遞的數據
}
</script>
<main>
<div class="card">
<Children on:message={handleMessage} />
</div>
</main>
雙向綁定
Svelte跟Vue一樣，都提供了雙向綁定的語法糖：
- input框使用 bind:value。
- 單選框、多選框使用 bind:value。
- 選框組使用 bind:group。
<script>
let inputValue = "";
let checkboxValue = false;
let groupValue = null;
</script>
<input bind:value={inputValue} />
<input type="checkbox" bind:checked={checkboxValue} />
<input type="radio" bind:group={groupValue} name="books" value="單選1" />
<input type="radio" bind:group={groupValue} name="books" value="單選2" />
<input type="radio" bind:group={groupValue} name="books" value="單選3" />插槽
Svelte跟Vue一樣，都提供了插槽 -> slot，并且支持默認插槽和具名插槽。
// Children.svelte
<div>
<div>default 插槽</div>
<slot></slot>
<div>------------</div>
<div>footer 插槽</div>
<slot name="footer"></slot>
</div>// 父組件
<Children>
<div>哈哈哈哈哈哈</div>
<div slot="footer">嘻嘻嘻嘻嘻嘻</div>
</Children>
圖片
生命周期
Svelte跟Vue一樣，都提供了生命周期的 API。
- onMount: 組件掛載
- beforeUpdate: 組件更新之前
- afterUpdate: 組件更新之后
- onDestroy: 組件銷毀
<script>
import { onMount, beforeUpdate, afterUpdate, onDestroy } from 'svelte'
onMount(() => {})
beforeUpdate(() => {})
afterUpdate(() => {})
onDestroy(() => {})
</script>獲取 DOM 節點
Svelte想要獲取 DOM 節點，需要使用 bind:this。
<script lang="ts">
import { onMount } from 'svelte'
let ele: HTMLDivElement
onMount(() => {
console.log(ele)
})
</script>
<div bind:this={ele}>哈哈</div>
圖片
異步更新獲取最新 DOM
在Vue中，當變量修改時，DOM 并不會馬上進行更新，而是進行了異步更新，所以需要使用到netTick這個 API 去獲取到最新 DOM。
在Svelte中，也提供了類似的方法tick，它是一個Promise函數，會在視圖更新前執行，所以在他之后執行就可以拿到最新的 DOM 信息。
<script lang="ts">
import { tick } from 'svelte'
let ele: HTMLDivElement
let msg = '哈哈'
const handleChange = async () => {
msg = '嘿嘿'
console.log(ele.innerHTML) // 哈哈
await tick()
console.log(ele.innerHTML) // 嘿嘿
}
</script>
<div bind:this={ele}>{msg}</div>
<button on:click={handleChange}>修改文本</button>watch & computed
Svelte提供了$這個符號，類似于Vue中的watch、computed，當某些變量發生改變時，去觸發一些函數的執行。
<script lang="ts">
let count = 1;
let msg1 = `count現在是${count}`;
let msg2 = `count的兩倍是${count * 2}`;
const handleChange = async () => {
count++;
};
$: msg1 = `count現在是${count}`;
$: {
const res = count * 2;
msg2 = `count的兩倍是${res}`;
}
</script>
<div>{msg1}</div>
<div>{msg2}</div>
<button on:click={handleChange}>修改count</button>
圖片
條件渲染 & 循環渲染
Vue提供了v-if去進行條件渲染，而Svelte還是使用模板語法去進行條件渲染的操作。
<script>
let age = 20
</script>
{#if age > 50}
<p>老年人</p>
{:else if count > 30}
<p>中年人</p>
{:else}
<p>小朋友</p>
{/if}循環渲染也同樣需要使用模板語法。
<script>
const items = [
{ id: 1, name: "林三心" }
{ id: 2, name: "林六心" }
{ id: 3, name: "林百心" }
]
</script>
{#each items as item (item.id)}
<p>{item.name}</p>
{/each}全局狀態管理
在Vue中，我們使用的全局狀態管理工具有：
- Vuex
- Pinia
在Svelte中，我們可以直接使用svelte/store去進行狀態管理，且需要用到$去獲取狀態管理里的變量
import { writable } from 'svelte/store';
export const count = writable(0);// Componnet.svelte
<script lang="ts">
import { count } from './store'
const handleChange = () => {
count.update((v) => {
return v + 1
})
}
</script>
<div>{$count}</div>
<button on:click={handleChange}>修改count</button>
