这些前端新技术你很难再忽视了 —— Svelte

// 编译前
<a>{{ msg }}</a>

// 编译后
function renderMainFragment ( root, component, target ) {
    var a = document.createElement( 'a' );
    
    var text = document.createTextNode( root.msg );
    a.appendChild( text );
    
    target.appendChild( a )

    return {
        update: function ( changed, root ) {
            text.data = root.msg;
        },

        teardown: function ( detach ) {
            if ( detach ) a.parentNode.removeChild( a );
        }
    };
}

<!-- App.svelte -->

<script lang="ts">
import { onMount } from 'svelte';

// 1：变量、双向绑定、事件处理
let name = 'world';
const onClick = () => name = 'Rex';

// 2：`if` 块、Watch
let x = 0;
const incX = () => x++;
// 这就像 Vue 中的 `watch` 功能
// 语法很奇怪，但是是合法的
$: doubleX = x * 2;

// 3：`each` 块
let characters = [
    { name: 'Aroma White' },
    { name: 'Neko Asakura' },
    { name: 'ROBO Head' }
];
const append = (name: string) => {
    if (!characters.find(t => t.name === name)) {
        characters = [...characters, { name }];
    }
};

// 生命周期
onMount(async () => {
    const res = await fetch(`/photos`);
    const photos = await res.json();
    console.log(photos);
});
</script>

<main>
    <section class="my-section-1">
        <h1>Hello {name}!</h1>
        <input bind:value={name}>
        <button on:click={onClick}>I'm Rex</button>
    </section>
    <section class="my-section-2">
        {#if x > 10}
            <p>{x} is greater than 10</p>
        {:else if x < 5}
            <p>{x} is less than 5</p>
        {:else}
            <p>{x} is between 5 and 10</p>
        {/if}
        <p>Double x is {doubleX}</p>
        <button on:click={incX}>x++</button>
    </section>
    <section class="my-section-3">
        <button on:click={() => append('Simon Jackson')}>
            Add Simon
        </button>
        <ul>
            {#each characters as c, i}
                <li>{i + 1}: {c.name}</li>
            {/each}
        </ul>
    </section>
</main>

<style>
main {
    font-size: 18px;
}
</style>