Hello，大家好，我是 Sunday。

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

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

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

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

以 Svelte 為例，目前它已經擁有了 80K+ 的 Star

圖片

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

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

創建 Svelte 項目

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

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

圖片

目錄結構

整個項目的目錄結構如下所示，和 Vue | React 都非常相似：

圖片

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

圖片

嘗試下 Svelte 5 的語法

在 Svelte 中，他的組件結構和 Vue 的單文件組件 非常類似，同樣劃分為 script、"dom 區"（template）、style 三部分

圖片

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

聲明響應式數據

在 React 中，如果想要聲明一個響應式數據，我們一般這么寫

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

而在 Svelte 中，聲明響應式數據，則這么寫：

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

<div>
 數字：{count}
</div>
<div>
 名字：{name}
</div>

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

然后，我們來看看 監聽數據變化的方式

監聽數據變化

在 React 中，如果我們想要監聽數據的變化，那么需要借助 useEffect，代碼一般長這樣：

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

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

而在 Svelte 中，監聽響應式數據則這么寫：

<script>
 // 聲明響應式狀態
 let name = $state('程序員Sunday')

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

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

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

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

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

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