Hello，大家好，我是 Sunday。

今天有位同學(xué)，問了我一個框架 Svelte，提到：“他們公司想要使用 Svelte 來去開發(fā)一個新的項目。原因是因為 Svelte 5 更新之后，提供了特別多新的功能，像是 增強版的 React！”

他說完之后，確實讓我感到非常的好奇。因為說起前端框架，大家想要的無非就是 Vue、React，撐死再加上一個 Angular。

雖然，我們知道，除了這些框架之外，還有很多的前端框架。但是，卻對它們并不在意（畢竟在工作中用不到）。

可是，當(dāng)我看了 Svelte 5 的更新之后，我發(fā)現(xiàn) 是我無知了... 。這些，曾經(jīng)讓我們不甚在意的框架，已經(jīng)成長到了，足夠撼動 Vue 和 React 王者地位的程度了！

以 Svelte 為例，目前它已經(jīng)擁有了 80K+ 的 Star

圖片

并且，在最新的 Svelte 5 版本中，帶來了很多新的特性。它變得更像 React。不！應(yīng)該說 React Pro 即 React 加強版，這意味著：從 React 切換到 Svelte，不需要太大的技術(shù)成本，又可以體驗到【無虛擬DOM】的高性能特性以及更加完整的響應(yīng)式數(shù)據(jù)驅(qū)動（類似于 Vue） 怪不得，該同學(xué)所在的公司，有點躍躍欲試呢！

所以說，今天，咱們就來看看 Svelte 5 這個框架，也來 “嘗嘗鮮！”

創(chuàng)建 Svelte 項目

我們可以直接通過 Vite 創(chuàng)建一個 Svelte 項目，方式非常簡單，只需要執(zhí)行：npm create vite@latest，然后選擇 Svelte 即可！

運行項目，即可看到如下效果

圖片

目錄結(jié)構(gòu)

整個項目的目錄結(jié)構(gòu)如下所示，和 Vue | React 都非常相似：

圖片

PS：如果你查看 App.svelte 的代碼無代碼提示的話，可以安裝 Svelte for VS Code 插件

圖片

嘗試下 Svelte 5 的語法

在 Svelte 中，他的組件結(jié)構(gòu)和 Vue 的單文件組件 非常類似，同樣劃分為 script、"dom 區(qū)"（template）、style 三部分

圖片

那么下面我們就在這里嘗試下 Svelte 5，順道看看為什么說他是 “React Pro”！

聲明響應(yīng)式數(shù)據(jù)

在 React 中，如果想要聲明一個響應(yīng)式數(shù)據(jù)，我們一般這么寫

export function Component () {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('程序員Sunday')
}

而在 Svelte 中，聲明響應(yīng)式數(shù)據(jù)，則這么寫：

<script>
 // 聲明響應(yīng)式狀態(tài)
 const count = $state(0)
 const name = $state('程序員Sunday')
</script>

<div>
 數(shù)字：{count}
</div>
<div>
 名字：{name}
</div>

在上面的代碼中，我們借助 $state() 聲明響應(yīng)式數(shù)據(jù)，對比 React 的 useState ，有沒有點那個味？

然后，我們來看看 監(jiān)聽數(shù)據(jù)變化的方式

監(jiān)聽數(shù)據(jù)變化

在 React 中，如果我們想要監(jiān)聽數(shù)據(jù)的變化，那么需要借助 useEffect，代碼一般長這樣：

export function Component () {
  const [name, setName] = useState('程序員Sunday')
  
  useEffect(() => {
    console.log('name 變化了')
  }, [name])

  const handleChangeName = () => {
    setName('LGD_Sunday');
  };
}

而在 Svelte 中，監(jiān)聽響應(yīng)式數(shù)據(jù)則這么寫：

<script>
 // 聲明響應(yīng)式狀態(tài)
 let name = $state('程序員Sunday')

 $effect(() => {
  console.log('name 變化了')
 })

 const handleChangeName = () => {
  name = 'LGD_Sunday'
 }
</script>

<div>
 名字：{name}
</div>
<button onclick={handleChangeName}>修改name</button>

在上面的代碼中，我們可以發(fā)現(xiàn)：Svelte 依然通過 effect 監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，同時 我們可以直接修改對應(yīng)的數(shù)據(jù)，而無需通過 setState 這樣的操作（也無需像 Vue 一樣，必須 .value），Svelte 可以智能地找出需要變更的依賴項！

現(xiàn)在大家知道為什么我會說：Svelte 5 更像是 React Pro 了吧。它們之間實在是有太多類似（提升）的地方了！

如果想要對 Svelte 5 有更深度的學(xué)習(xí)，那么可以看下對應(yīng)的官方文檔。今天，咱們就不過多的探討 Svelte 5 的語法啦！