為什麼 Vue3 的元件庫都在使用 jsx tsx？

1樓：

我們來倒推原因。

作為第三方庫=>考慮的是相容可能的場景=>需要很多動態化處理jsx就是js的擴充套件,比template靈活=>(未必都是jsx，但是是有傾向)。

官方推薦template是有道理的，畢竟針對template有靜態優化。

所以這個考量的點在於，需不需要那麼多的動態化處理。

2樓：okay哦開

因為越基礎的東西越需要靈活性高，元件庫這種就需要極強的靈活性來滿足各種需求。越上層靈活性需求越低，寫業務的時候基本就很少必要用到jsx，tsx了，模版可以覆蓋95%以上的需求。

3樓：方應杭

因為 JSX 的表達能力比 template 更強。JSX 表達能力的上限是 JS 語言本身，而 template 表達能力的上限是 Vue 的各種指令如 v-if v-for v-bind ...

比如你要做乙個 table 元件，支援 cell 自定義。

如果用 JSX，只需要這樣設計 API：

} ...

如果用 template 要怎麼做呢？只能用 slot。然後在 slot 裡面使用 v-if v-for，想宣告個中間變數都難，既然這樣的話，為什麼我不直接用 JS 的 if 和 for 呢？

至少還有語法檢查和型別提示（雖然 template 說也會做這樣的提示，但始終沒有 JS 的提示完備）

JSX 的好處之一就是可以把元件/標籤當做普通屬性傳來傳去，而 template 只能使用 slot。完。

4樓：

承認JSX比模板更適合寫元件有這麼難嗎？一群人顧左右而言他，有本事用模板寫乙個能用的元件庫試試？

事實上，在寫業務的時候，也是JSX更好用。

5樓：藍月蕭楓

用Tsx目的是為了相容用TS寫前端的使用者，tsx寫可以到出型別宣告，如果用js寫你還得另外寫乙份宣告.d.ts檔案才能給TS的專案用。

用jsx的話寫起來語法方便些吧，你只需要按照js的邏輯去寫就行。

6樓：艾熾銳飛兒

到底使用啥，沒有硬性規定的，還是那句話，看使用場景！例如，你在做乙個有複雜判斷的生成的元件，在js裡寫switch會比template裡做一堆if判斷更加友好，做起來更舒服，就用jsx！一般的業務邏輯，不算複雜的元件，就用template

7樓：拖鞋

最近我在看element-plus 也在寫探索日誌拖鞋：element-plus原始碼學習日誌-01antd-vue和vant還沒有看原始碼，但是至少element-plus用的不是。

個人感覺，composition api才是日後的主流方向。對於jsx和tsx，可能在實際做庫的開發中，需要更靈活的方式來處理邏輯吧，會選用composition和jsx組合的方式來做一些開發。

8樓：平平無奇古哥哥

從以下幾個方面談談我個人的觀點吧

1.從專案特性來看，元件庫的渲染邏輯是遠比我們通常寫的頁面的渲染邏輯更豐富和複雜的，jsx和render在做複雜邏輯渲染的時候更方便，更自由。並且jsx只是個語法糖，其實也就相當於原生的js，因此相比於template，jsx是個白盒，更利於寫測試，也更加方便之後更新迭代去做邏輯的擴充套件。

2.從使用的人來看，用ts編寫元件庫的開發者，絕大多數水平相對比較高，jsx和tsx的逼格會顯得更高一些。並且他們絕大多數之前寫ts專案是結合react來的，tsx那一套程式設計套路和風格已經習慣了，自然而然就帶到vue元件庫的編寫中。

9樓：克瑞斯

靈活輕量優雅編輯器支援好

vue3 functional元件只能用jsx或者手寫渲染函式對於特別小的元件來說手寫渲染函式是最好的方法目前jsx外掛程式同樣實現了vue3的效能優化正八經兒的大元件還是用template寫比較好用jsx就是一團糟要寫全量的.value，vfor vif之類的可讀性差