前端新一代框架 Svelte 火了！十個(gè)場(chǎng)景帶你簡(jiǎn)單認(rèn)識(shí)它！
Svelte
近幾年聽到的主流框架都是 Vue、React、Angular，但其實(shí)有一個(gè)框架在國(guó)外非?；?，用起來也是很方便，那就是Svelte，這個(gè)框架已經(jīng)連續(xù)多年在 Stack Overflow 的開發(fā)者調(diào)查中成為最受喜愛的前端 UI 框架，但是在國(guó)內(nèi)的名氣感覺還是不怎么大。
抱著技多不壓身的想法，我覺得大家可以了解一下Svelte，了解一下它的用法~接下來就通過一些小例子，帶大家認(rèn)識(shí)一下它的用法。
Vite & Svelte
現(xiàn)階段Vite創(chuàng)建腳手架已經(jīng)集成了Svelte，所以我們可以使用Vite去初始化一個(gè)Svelte的開發(fā)項(xiàng)目~我們使用命令去初始：
npm create vite@latest接著我們?cè)O(shè)置完項(xiàng)目名后，選擇Svelte。
圖片
然后進(jìn)入項(xiàng)目執(zhí)行依賴安裝，安裝完后運(yùn)行項(xiàng)目。
npm i
npm run dev
圖片
變量 & 事件
定義變量時(shí)，不需要像vue那樣使用ref，也不需要像react那樣使用useState，只需要直接命名變量即可，這就是一個(gè)響應(yīng)式的變量了。
事件需要用到Svelte的語法 on:，比如點(diǎn)擊事件 on:click={xxxxx}。
下面的例子就可以實(shí)現(xiàn)按鈕點(diǎn)擊，實(shí)現(xiàn)數(shù)字的自增。
<script lang="ts">
let count: number = 0
const increment = () => {
count += 1
}
</script>
<button on:click={increment}>
count is {count}
</button>
圖片
父?jìng)髯?& 子傳父
父?jìng)髯?/h3>
先說說父?jìng)髯?，Svelte提供了export關(guān)鍵字，子組件中可以使用export來接收，并且可以結(jié)合typescript去定義屬性的類型。
父組件里面，Svelte中提供了{(lán)}這樣的語法糖，去支持父組件傳值到子組件中，且類型一定要符合子組件中定義的類型，不然會(huì)報(bào)類型錯(cuò)誤。
// 父組件
<script lang="ts">
import Children from './lib/Children.svelte'
let name = '林三心';
let age = 18
</script>
<main>
<div class="card">
<Children {name} {age} />
</div>
</main>
圖片
子傳父
其實(shí)很多框架都一樣，數(shù)據(jù)都是單向流的，父?jìng)髯雍苷?。但是子傳父的話，最好就是使用事件去傳輸?/p>
- 子組件：需要使用createEventDispatcher去派發(fā)到父組件。
- 父組件：需要使用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}>發(fā)送</button>// 父組件
<script lang="ts">
import Children from './lib/Children.svelte'
const handleMessage = (event) => {
console.log(event.detail); // 輸出子組件傳遞的數(shù)據(jù)
}
</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，并且支持默認(rèn)插槽和具名插槽。
// 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 節(jié)點(diǎn)
Svelte想要獲取 DOM 節(jié)點(diǎn)，需要使用 bind:this。
<script lang="ts">
import { onMount } from 'svelte'
let ele: HTMLDivElement
onMount(() => {
console.log(ele)
})
</script>
<div bind:this={ele}>哈哈</div>
圖片
異步更新獲取最新 DOM
在Vue中，當(dāng)變量修改時(shí)，DOM 并不會(huì)馬上進(jìn)行更新，而是進(jìn)行了異步更新，所以需要使用到netTick這個(gè) API 去獲取到最新 DOM。
在Svelte中，也提供了類似的方法tick，它是一個(gè)Promise函數(shù)，會(huì)在視圖更新前執(zhí)行，所以在他之后執(zhí)行就可以拿到最新的 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提供了$這個(gè)符號(hào)，類似于Vue中的watch、computed，當(dāng)某些變量發(fā)生改變時(shí)，去觸發(fā)一些函數(shù)的執(zhí)行。
<script lang="ts">
let count = 1;
let msg1 = `count現(xiàn)在是${count}`;
let msg2 = `count的兩倍是${count * 2}`;
const handleChange = async () => {
count++;
};
$: msg1 = `count現(xiàn)在是${count}`;
$: {
const res = count * 2;
msg2 = `count的兩倍是${res}`;
}
</script>
<div>{msg1}</div>
<div>{msg2}</div>
<button on:click={handleChange}>修改count</button>
圖片
條件渲染 & 循環(huán)渲染
Vue提供了v-if去進(jìn)行條件渲染，而Svelte還是使用模板語法去進(jìn)行條件渲染的操作。
<script>
let age = 20
</script>
{#if age > 50}
<p>老年人</p>
{:else if count > 30}
<p>中年人</p>
{:else}
<p>小朋友</p>
{/if}循環(huán)渲染也同樣需要使用模板語法。
<script>
const items = [
{ id: 1, name: "林三心" }
{ id: 2, name: "林六心" }
{ id: 3, name: "林百心" }
]
</script>
{#each items as item (item.id)}
<p>{item.name}</p>
{/each}全局狀態(tài)管理
在Vue中，我們使用的全局狀態(tài)管理工具有：
- Vuex
- Pinia
在Svelte中，我們可以直接使用svelte/store去進(jìn)行狀態(tài)管理，且需要用到$去獲取狀態(tài)管理里的變量
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>
