已幫助數百位同學拿到了中大廠
offer
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
首先在文章開頭，我先表示對 尤大 以及 Vue 團隊的 respect，這篇文章就是單純表達個人在技術上的看法，並無夾雜其他個人情感~
在最近的
Vue Conf 2024
上，Vue 官方推薦了一款 Vue 的工具
Vine-Vue
，在這裏我先 respect 一下 Vue 團隊對於開發者的鼓勵~但是我想對 Vue 官方團隊說：
你真的覺得有必要推薦這個庫嗎？
Vue-Vine
先來說說這個庫的作用，這個庫的作用就是： 讓 Vue 元件能透過函式式來定義
舉個例子，我們在平時寫一個元件的時候，會透過樣版的方式去定義
但是在使用了
Vue-Vine
這個庫之後，可以使用函式式的方式去定義
翻看了一下
Vue-Vine
的官方文件，總結出
Vue-Vine
這個庫的初衷是：
想要做到像 React JSX 那樣的元件定義方式
可以在同個檔裏定義多個元件
使得邏輯更加聚合，提高開發效率
但是我感覺現階段 Vue 生態就具備這樣的能力了，且已經經過一段時間的打磨了呀~
定義多檔、邏輯聚合？Vue 本來就可以！
說到一個檔裏定義多個檔、邏輯更加聚合，其實本來 Vue 就支持！
如果你想要把多個元件寫在同一個檔裏、讓邏輯更加緊湊，那是很簡單的事情，只需要使用 Vue 的
defineComponent + h函式
，即可做到：
使用起來就跟平時 Vue 的樣版使用別無二致
甚至你可以把爺父孫元件全部定義在同一個檔裏
使用起來也是跟平時 Vue 的樣版使用別無二致
h 函式太麻煩？那就用 TSX/JSX！
肯定會有人說 Vue 的
h
函式用起來太麻煩了，各種層級巢狀，寫起來沒有 TSX/JSX 那麽爽
其實，在 Vue 中也可以寫 TSX/JSX !!
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/TSX 效能差
當然你如果用了 JSX/TSX 的話，效能肯定是差一丟丟的，但是這點開銷，真不算啥~大不了不用唄，用回
h 函式
結語
我是林三心，感謝您的閱讀~
1v1私教、找工作、全程陪跑、終身服務
。
可直接加 Sunday老師 微信溝通，回復【資料】可直接領取 Sunday獨家整理 大廠面試題、大廠真實面經 ：
