前言：

? ? ? ? 整理分享下vue3+ts+tsx相關的資料，有react使用經驗的小伙伴應該更能理解這個的好處，終于在vue3中也支持了，相當于函數的方法來操作界面。

1、vue3項目中為什么要用tsx（等同于我們react的jsx）

1. 類型安全：TSX 可以幫助開發者在編寫代碼的過程中檢測類型錯誤，減少運行時錯誤的發生，并提高代碼可維護性。

2. 更好的代碼提示：在使用 TSX 編寫代碼時，開發者可以享受到更好的編碼提示和自動補全功能，從而提高編寫代碼的效率。

3. 更容易維護：在使用 TSX 編寫代碼時，代碼結構更加清晰明了，可讀性更高，使得代碼的維護更加容易。

4. 容易與 React 生態系統集成：TSX 是 React 生態系統中廣泛使用的一個技術棧，使用 TSX 可以更容易地與其它開源組件和庫進行集成和協作。

2、他的用法和我們常規的vue3+ts使用有什么區別

1. 語法：Vue 3 的模板語法和 TSX 的語法是不同的，Vue 3 的模板語法更接近于 HTML，而 TSX 的語法更接近于 JavaScript。

2. 類型檢查：TSX 依賴于 TypeScript，可以使用 TypeScript 的類型檢查功能來減少代碼中的錯誤，而 Vue 3 的模板語法沒有這種類型檢查功能。

3. 可讀性：TSX 的語法更接近于 JavaScript，對于熟悉 JavaScript 的開發者來說，可能更容易閱讀和理解 TSX 的代碼。但同時也可能會感到 TSX 的語法更繁瑣，對于不熟悉 TypeScript 的開發者來說學習曲線可能會更陡峭。

4. 性能：使用 TSX 編寫 Vue 3 組件可能會比使用模板語法的組件具有更好的性能。因為 TSX 可以直接將組件轉換為純 JavaScript 代碼，而模板語法需要在運行時進行解析和編譯。

????????總的來說，使用 TSX 可以使代碼更可讀性更好，具有類型檢查等優勢，但也需要引入 TypeScript，并且需要開發者對 TypeScript 有一定的了解。而使用 Vue 3 的模板語法則更加接近于 HTML，對于前端開發者來說更加直觀，但可能會犧牲一些性能。具體使用哪種方式需要根據項目需求和開發者技能來決定。

3、項目中的安裝部署

1、安裝,?babel-plugin-jsx

npm insatll @vue/babel-plugin-jsx --save

2、在項目的 babel.config.js 文件的plugins中添加配置：

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ['@vue/babel-plugin-jsx']
}

4、具體使用的一些方法分享（使用他與不使用做對比）

1、最重要的一點，他的模塊是通過setup的return返回的

import { defineComponent, ref, reactive } from 'vue'export default defineComponent({props: {},setup(props) {const msg = ref('hello tsx')const state = reactive({count: 1})return () => {return <div>{msg.value} <span>{state.count}</span></div>}}
})

2、元素上綁定，{} 加內容

vue文件：
<com :data="data"></com>tsx文件：
<com data={data}></com>

3、v-if? 必須用三木運算，或者是? &&

vue文件：
<div v-if="flag"></div>tsx文件，js邏輯代碼必須用大括號包裹：
{flag ? <div></div> : null
}

isActive && <p>123</p>  //意思就是， isActive === true的情況下，展示 && 后面的標簽isActive && title==='123' && <p>123</p>  
//意思就是， isActive === true && title==='123' 的情況下，展示 && 最后面的標簽

4、v-for

vue文件：
<ul><li v-for="item in list" :key="item">{{item}}</li>
</ul>tsx文件：
<ul>{list.map((item) => {return <li key={item}>{item}</li>})}
</ul>

5、點擊事件等綁定，有點像原生了，onScroll? ,on

vue文件：
<div @click="handleClick"></div>tsx文件：
<div onClick={handleClick}></div>onMouseenter={handleMouseEnter}
onMouseleave={handleMouseLeave}

6、子傳父

vue:
子組件:
emit('custom')父組件：
<ChildComponent @custom="handleCustom" />tsx:
子組件:
emit('custom')父組件：
<ChildComponent onCustom={handleCustom} />

5、api文檔分享

使用 JSX 書寫標簽語言 – React 中文文檔