Svelte 的核心思想在于『通過靜態編譯減少框架運行時的代碼量』。通俗來說，用
svelte寫的代碼，經過編譯處理，轉化成了真正的js，不需要引入相應的庫，不像vue項目需要引入vue.js、用寫jQuery代碼需要引入jQuery。
三大框架(vue/react/angular)已經趨于成熟，為何會出現svelte?假如我們寫了以下代碼：
<h1>{title}</h1>
目的是：title作為h1初始內容，當title發生變化時h1內容跟著更新。想要實現這一目標，最簡單的方法就是直接渲染出 HTML，然后設置到innerHTML 中，但是當模板結構復雜時會帶來很嚴重的性能問題。
虛擬DOM就是用來解決此種方案性能問題的，當狀態發生變化時，新舊虛擬DOM樹進行對比，然后只將少數差異的部分 patch 到真實 DOM 上，就能極大地提高性能。
這段代碼就是要動態更新h1標簽內容而已，每次數據發生變化都要生成新的DOM樹->diff->patch，不是很有必要！
接下來看看svelte的騷操作，它會將這段模板編譯成下面這段js：
function renderMainFragment ( root, component, target ) {
var node = document.createElement( 'h1' );
var text = document.createTextNode( root.title );
node.appendChild( text );
target.appendChild( node )
return {
update( changed, root ) {
//數據變化時更新文本節點內容
text.data = root.title;
},
teardown: function ( detach ) {
//銷毀時移除節點
if ( detach ) node.parentNode.removeChild( node );
}
};
}
通過上面的描述，相信大家對svelte有一定了解了，接下來一睹芳容。
想快速嘗鮮的可以去官網coding online 網址：svelte.dev
下面簡單介紹框架的核心概念：
1.文件結構（以.svelte為后綴）
<script>
//js中的根變量即為狀態 可在模板中插值
let title="hello svelte"
</script>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<h1>{title}</h1>
2.屬性插值
<script>
let src = 'tutorial/image.gif';
let name = 'Rick Astley';
</script>
<!-- {src} 是 src={src} 的簡寫 -->
<img {src} alt="{name} dancing">
3.標簽插值解析HTML
<script>
let text = `<strong>重要內容</strong>`;
</script>
<p>{@html text}</p>
4.條件語句
<script>
let login=true
</script>
{#if login}
<button>
退出登錄
</button>
{/if}
{#if !login}
<button>
登錄
</button>
{/if}
5.遍歷
<script>
let list = [
{ id: 1, color: '#0d0887' },
{ id: 2, color: '#6a00a8' },
{ id: 3, color: '#b12a90' },
{ id: 4, color: '#e16462' },
{ id: 5, color: '#fca636' }
];
</script>
<ul>
<!-- item:值 index:索引 小括號內：key -->
{#each list as item,index (item.id)}
<li>{item.color}-----{index}</li>
{/each}
</ul>
6.事件處理
<script>
let m = { x: 0, y: 0 };
function handleMousemove(event) {
m.x = event.clientX;
m.y = event.clientY;
}
</script>
<style>
div { width: 100%; height: 100%; }
</style>
<div on:mousemove={handleMousemove}>
The mouse position is {m.x} x {m.y}
</div>
7.分割組件
<!-- -----list.svelte -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- -----app.svelte -->
<script>
//組件首字母大寫
import List from './list.svelte';
</script>
<List/>
8.組件傳值 props
<!-- -----child.svelte -->
<script>
export let title;
//可以指定默認值
//export let title=123
</script>
<h1>
{title}
</h1>
<!-- -----app.svelte -->
<script>
//組件首字母大寫
import Child from './child.svelte';
</script>
<Child title="hello svelte"/>
9.自定義事件
<!-- -----app.svelte -->
<script>
import Inner from './Inner.svelte';
function handleMessage(event) {
alert(event.detail.text);
}
</script>
<Inner on:message={handleMessage}/>
<!-- -----Inner.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>
10.表單雙向綁定
<script>
let name = '';
</script>
<input bind:value={name} placeholder="enter your name">
<p>Hello {name || 'stranger'}!</p>
<script>
let yes = false;
</script>
<label>
<input type=checkbox bind:checked={yes}>
{yes}
</label>
<script>
let questions = [
{ id: 1, text: `Where did you go to school?` },
{ id: 2, text: `What is your mother's name?` },
{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?` }
];
let selected;
let answer = '';
</script>
<select bind:value={selected}>
{#each questions as question}
<option value={question.text}>
{question.text}
</option>
{/each}
</select>
<h1>{selected}</h1>
11.生命周期函數
onMount
<script>
import { onMount } from 'svelte';
let list = [];
let getData = async ()=>{
let res = await ajax("/getData") ;
list=res.data;
}
//掛在完成 可用于請求初始化數據
onMount(async () => {
getData();
});
</script>
tick 狀態變化DOM更新之后
<script>
import { tick } from 'svelte';
let num=1
let handle = async (e)=>{
num++;
console.log(e.target.innerText) //1;
await tick();
console.log(e.target.innerText) //2;
}
</script>
<button on:click="{handle}">{num}</button>
640.gif
