js級別的差異

主要來自兩個方面：hook系統(tǒng)（不考慮類）和ecma-ast差異hook系統(tǒng)。 鉤子系統(tǒng)的api更多地用于純函數(shù)組件注入狀態(tài)和生命周期。在這兩個方面，Svelte提供的解決方案是不同的。 由于預(yù)運(yùn)行編譯，Svelte編譯器掃描所有與UI相關(guān)的狀態(tài)并注入黑魔法，使得狀態(tài)的使用與變量聲明和賦值一樣簡單。 基本上，開發(fā)人員不需要太在意所謂的副作用；因此，一些鉤子接口在Svelte框架上是冗余的。然而，考慮到大量的鉤子接口，我們選擇了內(nèi)置的svelte鉤子來簡化轉(zhuǎn)換過程中的轉(zhuǎn)換邏輯。SVelte鉤子是一組基于SVelte的鉤子接口，通過對react鉤子進(jìn)行基準(zhǔn)測試來實(shí)現(xiàn)，這些鉤子在使用中基本相同。

<script>
	import Nested from './Nested.svelte';
</script>
<style>
	p {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>
<p>These styles...</p>
<Nested/>

ecma ast差異

ecma ast difference babel提供的解析是基于estree的，但同時一些類型也在此基礎(chǔ)上進(jìn)行了改進(jìn)。有關(guān)具體差異，請參閱此處的babel解析器[1]。細(xì)化的數(shù)據(jù)類型有助于我們進(jìn)行轉(zhuǎn)換推斷，因此我們沒有使用babel來提供estree插件，并且在轉(zhuǎn)換之后，ast再次被平滑。 CSS轉(zhuǎn)換比上述兩部分的轉(zhuǎn)換簡單得多。React樣式是標(biāo)準(zhǔn)css，Svelte樣式也是標(biāo)準(zhǔn)css。但是，它將增加一定的編譯能力?？梢岳斫猓菢?biāo)準(zhǔn)css的超集，可以直接使用。然而，為了平滑jsx和Svelte html在自定義組件的類選擇器中的差異，我們?nèi)匀辉诰幾g階段進(jìn)行了一些轉(zhuǎn)換，這里不再展開。

<script>
	let count = 0;
	function handleClick() {
		count += 1;
	}
</script>
<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

細(xì)化后的體積差異

<script>
	import { quintOut } from 'svelte/easing';
	import { fade, draw, fly } from 'svelte/transition';
	import { expand } from './custom-transitions.js';
	import { inner, outer } from './shape.js';
	let visible = true;
</script>
<style>
	svg {
		width: 100%;
		height: 100%;
	}
	path {
		fill: white;
		opacity: 1;
	}
	label {
		position: absolute;
		top: 1em;
		left: 1em;
	}
	.centered {
		font-size: 20vw;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		font-family: 'Overpass';
		letter-spacing: 0.12em;
		color: #676778;
		font-weight: 400;
	}
	.centered span {
		will-change: filter;
	}
</style>
{#if visible}
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
		<g out:fade="{{duration: 200}}" opacity=0.2>
			<path
				in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
				style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
				d={outer}
			/>
			<path
				in:draw="{{duration: 1000}}"
				style="stroke:#ff3e00; stroke-width: 1.5"
				d={inner}
			/>
		</g>
	</svg>
	<div class="centered" out:fly="{{y: -20, duration: 800}}">
		{#each 'SVELTE' as char, i}
			<span
				in:fade="{{delay: 1000 + i * 150, duration: 800}}"
			>{char}</span>
		{/each}
	</div>
{/if}
<label>
	<input type="checkbox" bind:checked={visible}>
	toggle me
</label>
<link  rel="external nofollow"  rel="stylesheet">

不可能100%準(zhǔn)確地將運(yùn)行時jsx編譯成靜態(tài)html，弱類型語言的變量跟蹤不可靠，非本地邏輯控制語法不能在編譯器中逐一枚舉； 目前，在轉(zhuǎn)換工作中仍然存在許多與編譯相關(guān)的問題，但這些問題可以通過一些插件來補(bǔ)充并逐步改進(jìn)。大型項(xiàng)目包裝量的現(xiàn)狀不容樂觀。 Svelte可以通過預(yù)運(yùn)行編譯按需打包整個框架來有效地減少包容量，但編譯產(chǎn)品本身沒有優(yōu)勢。頁面的UI交互越復(fù)雜，編譯產(chǎn)品就越大。 此外，對框架的依賴程度越高，整體包裝量的優(yōu)勢就會消失；此外，我們的轉(zhuǎn)換器為編譯增加了一定的復(fù)雜性，以平滑差異，因此仍有很大的空間來優(yōu)化編譯產(chǎn)品的數(shù)量。沒有性能，沒有前端。我們?nèi)匀蝗狈﹃P(guān)于性能的數(shù)據(jù)，但我們也從一些第三方文章中了解到，Svelte的整體性能并不是瓶頸。 理論上，通過編譯實(shí)現(xiàn)數(shù)據(jù)驅(qū)動的DOM是簡單而有效的。理論上，脫離虛擬DOM也會提高內(nèi)存性能；但是，我們將單獨(dú)查看性能。預(yù)運(yùn)行編譯的思想不僅適用于框架，也適用于組件，這也會帶來很多好處。

調(diào)試模式

它可以與｛@debug…｝一起使用以替換控制臺。log（…）。每當(dāng)指定變量的值發(fā)生變化時，它都會記錄這些變量的值。如果打開devtools，代碼執(zhí)行將在｛@debug…｝語句的位置暫停。 它接受單個變量名：

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>

on:事件名

可以使用的修改器有： PreventDefault：調(diào)用事件。preventDefault（）在程序運(yùn)行之前 StopPropagation：調(diào)用事件StopProparation（）以防止事件到達(dá)下一個標(biāo)記 被動：提高了觸摸/滾輪事件的滾動性能（Svelte將在適當(dāng)?shù)那闆r下自動添加） capture：表示其程序是在捕獲階段觸發(fā)的，而不是通過冒泡 一次：程序運(yùn)行一次后刪除自身 可以連接修飾符，例如：單擊|once|capture={…}。 如果未為使用的on:命令事件指定特定值，則意味著組件將負(fù)責(zé)轉(zhuǎn)發(fā)事件，這意味著組件的用戶可以監(jiān)聽事件。

<form on:submit|preventDefault={handleSubmit}>
</form>

svelte:options

<svelte:options>標(biāo)記為組件提供編譯器選項(xiàng)。有關(guān)詳細(xì)信息，請參閱。選項(xiàng)包括： Immutable={true}-從不使用變量數(shù)據(jù)，因此編譯器可以很容易地檢查等式以確定值是否已更改。 不可變=｛false｝-默認(rèn)選項(xiàng)。Svelte在處理可變對象值更改時趨于保守。 Accessors＝｛true｝-向組件的屬性添加getter和setter。 訪問器=｛false｝-默認(rèn)值。 命名空間=“…”-讓組件使用命名空間。最常見的是“svg”。 Tag=“…”-將此組件編譯為自定義標(biāo)記時使用的名稱。

<svelte:options tag="my-custom-element"/>

此onMount函數(shù)用作回調(diào)，在組件安裝到DOM后立即執(zhí)行。它必須在組件初始化期間調(diào)用（但不一定在組件內(nèi)部；可以從外部模塊調(diào)用）。 OnMount不在內(nèi)部運(yùn)行。

<script>
	import { onMount } from 'svelte';
	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);
		return () => clearInterval(interval);
	});
</script>

setContext

使用指定的鍵將任何上下文對象與當(dāng)前組件相關(guān)聯(lián)。然后，通過getContext函數(shù)將上下文應(yīng)用于組件的子級（包括帶有槽的內(nèi)容）。與生命周期函數(shù)一樣，它必須在組件初始化期間調(diào)用。

<script>
	import { setContext } from 'svelte';
	setContext('answer', 42);
</script>

以上就是Svelte調(diào)試模式j(luò)s級別差異和細(xì)化后的體積差異詳解的詳細(xì)內(nèi)容，更多關(guān)于Svelte調(diào)試模式j(luò)s級別差異的資料請關(guān)注腳本之家其它相關(guān)文章！