JSX/TSX 是 Vue 前端開發的未來嗎？

模擬面試、簡歷指導、入職指導、計畫指導、答疑解惑 可私信找我~已幫助100+名同學完成改造！

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

什麽是 JSX & TSX?

JSX 是Facebook專門為react發明的一種新的類似於XML格式的語言，它是JavaScipt的語法拓展。它使用XML標記的方式去直接聲明界面，然後再利用編譯器轉換成JS語言。但是 Vue 早就能使用 JSX 去編寫頁面了~

並且現在大部份都是使用 Typescript 來寫計畫，所以 TSX 會用的更多

JSX（JavaScript XML）:

TSX（TypeScript XML）:

Vue3 中使用 TSX

我是使用了 Vue3 + Vite + TS 的計畫，想要在計畫中使用 TSX ，需要安裝一個 Vite 外掛程式

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


安裝完畢後，需要在 vite.config.ts 中去進行外掛程式配置

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

基本渲染 & 響應式 & 事件

我們可以新建一個 TsxComp.tsx 檔，來寫 TSX 。寫 TSX 可以不在 Vue檔 中去寫

接著我們可以去渲染這個元件

可以看到基本的 渲染 & 響應式 & 事件 已經實作

v-if 條件判斷渲染

樣版中一般使用 v-if 來進行條件判斷渲染，而 TSX 是比較接近原生語法的，其實條件判斷也很像原生的寫法，直接用 &&

v-for 迴圈渲染

樣版中使用 v-for 來迴圈渲染，TSX 更接近原生，需要使用陣列方法 map 來進行渲染

slot 插槽

在樣版中，可以透過插槽 slot 去傳入一些 DOM 到元件內去渲染，TSX 中也一樣有插槽，只不過用法不像樣版那樣用，而是跟 Vue 的 h 函式類似

舉個例子，我寫一個 TSX 元件接收 default 和 test 兩個插槽

如果你是從樣版傳到 TSX 中的話，那麽傳入的方式無差別，也是使用 template 傳入

如果你是從 TSX 傳到 TSX 的話，那麽傳入方式透過 props 來傳了

JSX 和 template 哪個好呢？

現在絕大部份的 Vue 計畫都是使用 template，這是毋庸置疑的~

某一天我跟一位大佬同事在突然就這個問題展開了討論，我說為啥我們的公司內部元件庫不改用 JSX 去寫呢？我感覺 JSX 比較接近原生，寫起來比較靈活呀~

大佬隨即丟擲一個問題：那你覺得 JSX 和 template 的效能哪個好？

你還別說，我還真沒考慮過這個問題~

思考

我們要知道無論是 template 還是 JSX，在 vue 中最後都是編譯成 render 函式

當我們被問到這個問題時：你覺得 JSX 和 template 的效能哪個好？

大部份人被問到這個問題時，都會第一時間覺得 JSX 效能更好，畢竟更接近原生，轉化成 render 會更快~~~

但是你要想清楚一件事，你說的 JSX 效能好是指的編譯快，編譯快其實是 構建時 ，但是真正的效能好是 執行時

如果熟悉 Vue 的template樣版編譯的同學，會知道 Vue 在進行template樣版編譯的時候，會做各種最佳化，這些最佳化雖然會耗費構建時間，也就是 構建時 會比較慢，但是這些最佳化運用到最後產物的 執行時 的時候會大大提升效能

所以總結：

結語

我是林三心

廣州的兄弟可以約飯哦，或者約球~我負責打鐵，你負責進球，謝謝~