擁抱 JSX/TSX？

我們都知道 Vue 一直主流是使用 template 模板來(lái)進(jìn)行頁(yè)面的編寫(xiě)。而就在最近，Vue3 的超前項(xiàng)目 Vue Macros 中，發(fā)布了 defineRender、setupComponent、setupSFC 這些新的 API，這代表了，以后 Vue3 有可能可以全面擁抱 JSX/TSX 了！！

說(shuō)這個(gè)新 API 之前，我們先來(lái)說(shuō)說(shuō)什么是 Vue Macros。

Vue Macros

Vue Macros 是由 Vue 團(tuán)隊(duì)成員維護(hù)的一個(gè) 超前版 Vue。

許多 Vue3 的新 API 都是在這個(gè)項(xiàng)目中孵化出來(lái)的，比如 Vue3.4 的：

• defineOptions
• defineModel

所以從 Vue Macros 這個(gè)項(xiàng)目，也可以預(yù)見(jiàn)到 Vue3 未來(lái)可能會(huì)發(fā)布的新 API 和新特性。

Vue Macros 中很多功能都是超前功能，在 Vue3 正式版中并沒(méi)有這些功能，如果想要體驗(yàn)這些超前功能，需要安裝對(duì)應(yīng)的插件：

npm i -D unplugin-vue-macros

并在 vite.config.ts 中配置這個(gè)插件：

回顧 Vue3 現(xiàn)有渲染方式

1.template

我們?cè)陂_(kāi)發(fā) Vue 時(shí)，在很多情況下，都會(huì)使用 template 來(lái)編寫(xiě)頁(yè)面：

2.h 函數(shù)

但是在編寫(xiě)一些比較靈活且基礎(chǔ)的組件（比如組件庫(kù)）時(shí)，使用 template 來(lái)編寫(xiě)比較費(fèi)勁，所以有些時(shí)候也會(huì)使用 h 函數(shù)來(lái)編寫(xiě)

但是可以看到，雖然 h 函數(shù)更加貼近 JavaScript，更加靈活，但是當(dāng)層級(jí)太多時(shí)，寫(xiě)起來(lái)也是非常的不方便~

3.@vitejs/plugin-vue-jsx

所以 Vue3 在之前推出了 @vitejs/plugin-vue-jsx 這個(gè)插件，目的就是為了開(kāi)發(fā)者能在 Vue3 項(xiàng)目中去使用 JSX/TSX

pnpm i @vitejs/plugin-vue-jsx

擁抱 JSX/TSX！！！

1.defineRender

defineRender 是 Vue 超前項(xiàng)目 Vue Macros 中推出的一個(gè)新的 API，它很有大可能會(huì)在未來(lái)的 Vue3 正式版中推出。

我們可以通過(guò)安裝 Vue Macros 的插件來(lái)體驗(yàn)這一超前功能：

2.setupComponent

setupComponent 讓 Vue3 越來(lái)越像 React 了！！！在超前項(xiàng)目中，推出了 defineSetupComponent 這個(gè) API ，讓你可以使用 JSX 去編寫(xiě)一個(gè)組件

3.setupSFC

setupSFC 的模式下，無(wú)需在包裹 defineSetupComponent 這個(gè)函數(shù)了，甚至可以直接寫(xiě)在 tsx 文件中，來(lái)編寫(xiě)一個(gè) SFC