SFC 單文件組件

顧名思義，就是一個.vue文件只寫一個組件。

模板寫法

圖片

如果這個組件想要在別的組件里使用，就需要在另一個.vue中引入和使用、復用。

h函數寫法

使用 defineComponent + h 去進行組件編寫。

圖片

JSX/TSX寫法

使用 defineComponent + JSX/TSX 去進行組件編寫。

pnpm i @vitejs/plugin-vue-jsx -D

安裝完畢后，需要在 vite.config.ts 中去進行插件配置。

圖片

圖片

圖片

引入組件

圖片

單文件多復用模板

如果你想要在一個單文件組件中，定義一些可復用的模板代碼的話，可以試試以下的方法；

createReusableTemplate

圖片

這是 VueUse 提供的一個 Hooks。

文檔地址：https://vueuse.org/core/createReusableTemplate/

使用方式如下：

圖片

namedTemplate

圖片

namedTemplate 是 Vue Macros 推出的一個前瞻性的 Vue3 特性。

雖然Vue Macros里的特性暫時還不是正式版特性，但是以后有很大概率會成為正式版特性。

我們也可以對 Vue3 項目進行配置，使得項目可以使用 Vue Macros的特性。

文檔地址：https://vue-macros.dev/zh-CN/features/named-template.html

使用方式如下：

圖片

通用的多組件管理

你可以將多個邏輯緊密或者類型相似的組件，放置在同一個ts文件或Hooks中去管理，在使用到這些組件的地方去引入即可使用。

FunctionalComponent + h

在某一個頁面中，如果你有一些組件，它們邏輯比較緊密聯系，那你可以使用FunctionalComponent + h將他們封裝在同一個 Hooks 中，比如下面的例子

圖片

圖片

圖片

或者你不想寫在Hooks中，你也完全可以寫在最外層。

圖片

只不過引入方式就要做一些改變。

圖片

defineComponent + h

defineComponent + h 的寫法也是差不多的道理。

你可以使用 Hooks 去封裝，如下：

圖片

或者你也可以直接放在ts文件最外層。

圖片

也是同樣的效果：

圖片

defineComponent + JSX/TSX

可能會有人覺得 h 寫起來很麻煩，嵌套太多的話寫起來會很難受，那我們其實也可以用JSX/TSX去替代它。

同樣你也可以將多個組件以JSX/TSX的形式，維護在同一個tsx文件中。

pnpm i @vitejs/plugin-vue-jsx -D

安裝完畢后，需要在 vite.config.ts 中去進行插件配置。

圖片

圖片

配置完就可以寫 TSX 啦！！！

圖片

同樣你也可以寫在外層（這里就不寫了，同理）。

也是同樣的效果：

圖片

Vue Macros 組件 API

Vue Macros里的特性暫時還不是正式版特性，但是以后有很大概率會成為正式版特性。

文檔：https://vue-macros.dev/zh-CN/

defineRender + JSX/TSX

文檔地址：https://vue-macros.dev/zh-CN/macros/define-render.html#definerender

defineRender跟 defineComponent 的區別在于，defineRender只需要關心最終的DOM結構，不需要管狀態的維護。

圖片

setupSFC + JSX/TSX

文檔地址：https://vue-macros.dev/zh-CN/macros/setup-sfc.html#setupsfc

想使用 setupSFC 的特性，需要建一個.setup.tsx/.setup.jsx 文件，跟普通的 tsx/jsx 文件相比，每次引入.setup.tsx/.setup.jsx這個文件，都是一個新的組件實例，狀態并不會共享。

圖片

setupComponent + JSX/TSX

文檔地址：https://vue-macros.dev/zh-CN/macros/setup-component.html#setupcomponent

setupComponent 適合用來管理多組件，可以把多個緊密聯系或共用的組件，通過setupComponent寫在同一個文件或 Hooks 里。

setupComponent中可以使用setup的語法去寫邏輯，寫起來比defineComponent簡潔很多。

圖片

同理，你想寫在文件外層也行~這里就不具體寫了。

Vine

圖片

文檔：https://vue-vine.dev/

這個庫的作用就是：讓 Vue 組件能通過函數式來定義。

舉個例子，我們在平時寫一個組件的時候，會通過模板的方式去定義。

圖片

但是在使用了 Vue-Vine這個庫之后，可以使用函數式的方式去定義。

圖片

翻看了一下Vue-Vine的官方文檔，總結出Vue-Vine這個庫的初衷是：

• 想要做到像 React JSX 那樣的組件定義方式。
• 可以在同個文件里定義多個組件。
• 使得邏輯更加聚合，提高開發效率。