定義

Svelte 是一種全新的構(gòu)建用戶界面的方法。傳統(tǒng)框架如 React 和 Vue 在瀏覽器中需要做大量的工作，而 Svelte 將這些工作放到構(gòu)建應(yīng)用程序的編譯階段來處理。

性能

跑分網(wǎng)站

圖片1

圖片2

總體來說，性能優(yōu)于react和vue。

react/vue 為何慢？

更新時(shí)虛擬DOM diff費(fèi)時(shí)，雖然react16引入了fiber，vue3引入了static hoist，但交給瀏覽器的工作總量大致降低不了多少。

sevelte如何優(yōu)化

· 沒有虛擬DOM
· 編譯時(shí)優(yōu)化

簡(jiǎn)單的說，sevelte在編譯時(shí)做了很多事情。使得每一個(gè)變量得以進(jìn)行臟檢測(cè)，并記錄變量與dom之間的關(guān)系。運(yùn)行時(shí)一旦變量“臟”了，則精準(zhǔn)計(jì)算出需要rerender哪一個(gè)dom。

組件

父子傳值

https://www.sveltejs.cn/tutorial/declaring-props

// index.svelte
<script>
    import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>

// Nested.svelte
<script>
    export let answer;
</script>

<p>The answer is {answer}</p>

事件

https://www.sveltejs.cn/tutorial/component-events

// index.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>

綁定

https://www.sveltejs.cn/tutorial/text-inputs

<script>
   let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>

生命周期

https://www.sveltejs.cn/tutorial/onmount
https://www.sveltejs.cn/tutorial/ondestroy
https://www.sveltejs.cn/tutorial/update
https://www.sveltejs.cn/tutorial/tick

路由

不自帶路由方案，可以用第三方庫(kù)，如
https://github.com/EmilTholin/svelte-routing

<script>
  import { Router, Route } from "svelte-routing";
  import NavLink from "./components/NavLink.svelte";
  import Home from "./routes/Home.svelte";
  import About from "./routes/About.svelte";
  import Blog from "./routes/Blog.svelte";

  // Used for SSR. A falsy value is ignored by the Router.
  export let url = "";
</script>

<Router url="{url}">
  <nav>
    <NavLink to="/">Home</NavLink>
    <NavLink to="about">About</NavLink>
    <NavLink to="blog">Blog</NavLink>
  </nav>
  <div>
    <Route path="about" component="{About}" />
    <Route path="blog/*" component="{Blog}" />
    <Route path="/" component="{Home}" />
  </div>
</Router>

// components/NavLink.svelte
<script>
  import { Link } from "svelte-routing";

  export let to = "";

  function getProps({ location, href, isPartiallyCurrent, isCurrent }) {
    const isActive = href === "/" ? isCurrent : isPartiallyCurrent || isCurrent;

    // The object returned here is spread on the anchor element's attributes
    if (isActive) {
      return { class: "active" };
    }
    return {};
  }
</script>

<Link to="{to}" getProps="{getProps}">
  <slot />
</Link>

優(yōu)點(diǎn)

· 代碼量少
· 無需diff
· 反應(yīng)快

不足

· 相關(guān)生態(tài)發(fā)展不充分（腳手架，UI庫(kù)，狀態(tài)管理）