Vue Vine：創(chuàng)造另一種書寫 Vue 組件的方式

Vue Vine：https://github.com/vue-vine/vue-vine

在社區(qū)中，有很多帖子討論過希望有一個支持在單個文件中編寫多個 Vue 組件的解決方案。Vue Vine 因此而生。

Vue Vine 旨在提供更多管理 Vue 組件的靈活性，它并不是要取代 Vue SFC，而是作為一種并行的解決方案。

為什么是另一種風(fēng)格？

我看到很多關(guān)于支持 ”一個SFC文件中的多個組件“ 的討論，但說實話，SFC是為每個文件一個組件而設(shè)計的，相關(guān)的工具鏈也是基于這個邏輯，并在Vue的開發(fā)過程中不斷迭代。因此，基于這個概念，直接支持一個文件中的多個組件顯然是不合理的。

通過幾個Twitter帖子的調(diào)查，我發(fā)現(xiàn)確實存在著在一個文件中編寫多個組件的普遍需求。于是我開始探索是否有另一種語法或組織方式可以最適合Vue現(xiàn)有的編譯工具鏈，并利用現(xiàn)有的成就，同時為用戶編寫組件創(chuàng)造更大的靈活性。

我相信大多數(shù)像我這樣參與Web前端開發(fā)的程序員都不能 ”從上到下“地編寫UI視圖，而是采用 ”從下到上“ 的方式。換句話說，他們一開始就寫長的組件，然后再砍掉可重用的組件。

我是這樣問大家的：“編寫Vue時，你最懷念React的什么？”

在Vue和React的開發(fā)經(jīng)驗比較中，最明顯的區(qū)別是組件的組織形式。由于JSX只是JavaScript函數(shù)，所以你可以很容易地開始編寫一個新的組件。很多人回答說JSX實際上是他們喜歡的。

Vue對JSX也有不俗的支持，然而，JSX的問題是它太靈活了，它不能提供足夠的編譯時信息讓Vue進(jìn)行優(yōu)化。但函數(shù)風(fēng)格很好，我們確實喜歡它。

那么......為什么不嘗試用一個函數(shù)來創(chuàng)建Vue組件，而把 script setup 邏輯和模板寫在里面？

這就是 Vine 的誕生過程。

為什么它可以實現(xiàn)？

潛心研究了Vue SFC的編譯結(jié)果后，你會發(fā)現(xiàn)它實際上被轉(zhuǎn)化成了一個組件對象。所以，編譯一個組件和編譯多個組件并沒有很大的區(qū)別，我所需要做的只是創(chuàng)建多個組件對象。

模板是基于一些來自用戶腳本的綁定元數(shù)據(jù)進(jìn)行編譯的，這在模板中實現(xiàn)了“自動解包”。一些靜態(tài)部分可以被自動吊出來進(jìn)行優(yōu)化。

所有這些處理都是由 @vue/compiler-dom 包提供的。