摘要：苗條的框架正是作者的初始目的，苗條包括代碼編寫量打包大小等等。是已經(jīng)編譯后的組件有什么缺點(diǎn)是一個(gè)剛起步不久的前端框架，無(wú)論在維護(hù)人員還是社區(qū)上都是大大不如三大框架，這里列舉一下本人認(rèn)為的存在的缺點(diǎn)。

Svelte 的作者也是 rollup 的作者 Rich Harris，前端界的輪子哥。sevlte 項(xiàng)目首次提交于 2016 年 11 月 16 日，目前版本是 3.6.1（2019-06-27），v3 版本進(jìn)行了大改動(dòng)，跟之前的版本有很大的差別（v1、v2 版本 API 用法跟 vue 很像，v3 完全屬于自己的風(fēng)格）。

看下 2016-12-02，尤雨溪大神對(duì)此框架的評(píng)價(jià)（當(dāng)然已經(jīng)過(guò)時(shí)了，但是核心的思想還是一致的）:

這個(gè)框架的 API 設(shè)計(jì)是從 Ractive 那邊傳承過(guò)來(lái)的（自然跟 Vue 也非常像），但這不是重點(diǎn)。Svelte 的核心思想在于『通過(guò)靜態(tài)編譯減少框架運(yùn)行時(shí)的代碼量』。舉例來(lái)說(shuō)，當(dāng)前的框架無(wú)論是 React Angular 還是 Vue，不管你怎么編譯，使用的時(shí)候必然需要『引入』框架本身，也就是所謂的運(yùn)行時(shí) (runtime)。但是用 Svelte 就不一樣，一個(gè) Svelte 組件編譯了以后，所有需要的運(yùn)行時(shí)代碼都包含在里面了，除了引入這個(gè)組件本身，你不需要再額外引入一個(gè)所謂的框架運(yùn)行時(shí)！

Svelte 跟 vue 和 react一樣，是一個(gè)數(shù)據(jù)驅(qū)動(dòng)組件框架。但是也有很大的不同，它是一個(gè)運(yùn)行時(shí)框架，無(wú)需引入框架本身，同時(shí)也沒(méi)用到虛擬 DOM（運(yùn)行時(shí)框架特性決定了這個(gè)框架跟虛擬 DOM 無(wú)緣）。

Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you"re able to write ambitious applications with excellent performance characteristics.

雖然沒(méi)使用到虛擬 DOM，但一樣可以達(dá)到出色的性能，而且對(duì)開(kāi)發(fā)者編寫代碼是十分便捷。

那么我們先看下 svelte 的因?yàn)橐馑迹好鐥l的。苗條的框架正是作者的初始目的，苗條包括代碼編寫量、打包大小等等。

總結(jié)一下這個(gè)框架的優(yōu)勢(shì)，即作者開(kāi)發(fā)新框架的目的。

靜態(tài)編譯，無(wú)需引入框架自身

一個(gè) Svelte 組件是靜態(tài)編譯，所有需要的運(yùn)行時(shí)代碼都包含在里面了，除了引入這個(gè)組件本身，你感覺(jué)不到框架存在。

編寫更少代碼

svelte 模板提供一些簡(jiǎn)便的用法，在維護(hù)和編寫上都變得更簡(jiǎn)單，代碼量更少（維護(hù)的代碼），這些模板會(huì)編譯為最終的js 代碼。

只會(huì)打包使用到的代碼

即 tree shaking，這個(gè)概念本來(lái)也是作者首先提出來(lái)的，webpack 是參考了 rollup。

無(wú)需虛擬 DOM 也可進(jìn)行響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)

更便捷的響應(yīng)式綁定

既有響應(yīng)式數(shù)據(jù)的優(yōu)點(diǎn)，v3 版本也解決了 vue 數(shù)據(jù)綁定缺點(diǎn)，用起來(lái)十分方便。

react hook

import React, { useState } from "react";
export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  function handleChangeA(event) {
    setA(+event.target.value);
  }
  function handleChangeB(event) {
    setB(+event.target.value);
  }
  return (
    

      
      
      
{a} +  = {a + b}
    
  );
};

vue

svelte

{a} +  = {a + b}

都不用多說(shuō)，一眼就看出來(lái)，svelte 簡(jiǎn)單多了。

在 react 和 vue 盛行的時(shí)代，你會(huì)聽(tīng)說(shuō)虛擬 DOM 速度快，而且還可能被灌輸一個(gè)概念，虛擬 DOM 的速度比真實(shí) DOM 的速度要快。

所以如果你有這個(gè)想法，那么你肯定疑惑 svelte 沒(méi)用到虛擬 DOM，它的速度為什么會(huì)快？

其實(shí)虛擬 DOM 并不是什么時(shí)候都快，看下粗糙的對(duì)比例子。

這里并沒(méi)有直接統(tǒng)計(jì)渲染的時(shí)間，通過(guò)很多條數(shù)據(jù)我們就可以感受出來(lái)他們直接的性能。特別是點(diǎn)擊每條數(shù)據(jù)的時(shí)候，明顯感覺(jué)出來(lái)（由于是在線上的例子，所以首次渲染速度不準(zhǔn)確，主要看點(diǎn)擊的響應(yīng)速度）。

當(dāng)然這僅僅是在 50000 條數(shù)據(jù)下的測(cè)試，對(duì)比一下框架所謂的速度，實(shí)際的情況下我們是不會(huì)一次性展示這么多數(shù)據(jù)的。所以在性能還可行的情況下，更多的選擇是框架所帶來(lái)的的便利，包括上手難度、維護(hù)難度、社區(qū)大小等等條件。

svelte

https://svelte.dev/repl/367a2...

{#each data as d, i}
  

    
      
        
          Hello {name} {i} qoyqs8suu2u!
        
      
    
  
{/each}

vue

http://jsrun.net/kFyKp/edit

  
 
    
       
        
          
            Hello {{name}} {{i}} {qoyqs8suu2u}!
          
        
      
    
  

const list  = []
for(let i = 0; i < 50000; i++) {
  list.push(i);
}
const beginTime = +new Date();
new Vue({
  el: "#component-demo",
  data: {
    list: list,
    name: "Hello"
  },
  methods:{
    click(index){
      const list = new Array(50000);
      list[index] = "test"
      this.list = list
    }
  },
  mounted(){
    const endTime = +new Date();
      console.log((endTime - beginTime) / 1000,1);
  }
})

react

http://jsrun.net/TFyKp/edit

const list  = []
for(let i = 0; i < 50000; i++) {
  list.push(i);
}
class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      list
    } 
  }
  click(i) {
    return ()=>{
      list[i] = "test"
      this.setState({
        list,
      })
    }
  }
  render() {
    return (
      

        {this.state.list.map((v,k)=>{
          return(
            

              
                
                  
                    
                      Hello wolrd {k} {v}!
                    
                  
                
              
            
          )
        })}
      
    )
  }
}

function render() {
  ReactDOM.render(
    ,
    document.getElementById("root")
  );
}

render();

首先虛擬 DOM 不是一個(gè)功能，它只是實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)的手段，沒(méi)有虛擬 DOM 我們也可以實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)的開(kāi)發(fā)方式，svelte 正是做了這個(gè)事情。

單純從上面的對(duì)比例子來(lái)看，svelte 的速度比虛擬 DOM 更快（不同框架虛擬 DOM 實(shí)現(xiàn)會(huì)有差別）。雖然沒(méi)有進(jìn)行更深層次的對(duì)比，但是如果認(rèn)為虛擬 DOM 速度快的觀點(diǎn)是不完全對(duì)的，應(yīng)該說(shuō)虛擬 DOM 可以構(gòu)建大部分速度還可以的 Web 應(yīng)用。

完全兼容原生 html 用法

編寫代碼是那么的自然，如下面就是一個(gè)組件。

  { test }

響應(yīng)式也是那么的自然

+1
{ count }

表達(dá)式也可以是響應(yīng)式的

這個(gè)就牛逼了，更加的自然，這種特性只有靜態(tài)編譯才能做到，這個(gè)就是 svelte 目前獨(dú)有的優(yōu)勢(shì)。

{numbers.join(" + ")} = {sum}
Add a number

自動(dòng)訂閱的 svelte store

這個(gè)其實(shí)就是訂閱發(fā)布模式，不過(guò) svelte 提供了自身特有的便捷的綁定方式（自動(dòng)訂閱），用起來(lái)是那么的自然，那么的爽。

這種特性只有靜態(tài)編譯才能做到，這個(gè)就是 svelte 目前獨(dú)有的優(yōu)勢(shì)。

stores.js

import { writable } from "svelte/store";
export const count = writable(0);

A.svelte

The count is {$count}

B.svelte

增加

所有組件都可以多帶帶使用

可以直接在 react、vue、angular 等框架中使用。

// SvelteComponent.js 是已經(jīng)編譯后的組件
import SvelteComponent from "./SvelteComponent";

const app = new SvelteComponent({
    target: document.body,
    props: {
        answer: 42
    }
});

svelte 是一個(gè)剛起步不久的前端框架，無(wú)論在維護(hù)人員還是社區(qū)上都是大大不如三大框架，這里列舉一下本人認(rèn)為的 svelte 存在的缺點(diǎn)。

props 是可變的

當(dāng)然這也是這個(gè)框架故意這樣設(shè)計(jì)的，這樣 props 也是可以響應(yīng)式的。

  { title }

props 目前無(wú)法驗(yàn)證類型

無(wú)法通過(guò)自定義組件本身直接訪問(wèn)原生 DOM

需要利用 props 的雙向綁定特性，這就可能導(dǎo)致深層次組件的需要層層傳遞 DOM 對(duì)象（是子父?jìng)鬟f，不是父子傳遞）。

App.svelte

  test

import { count } from "./stores.js";
function increment() {
  $count += 1;
}

學(xué)習(xí)和總結(jié)文章同步發(fā)布于 https://github.com/xianshanna...，有興趣可以關(guān)注一下，一起學(xué)習(xí)和進(jìn)步。