Vue Vite中怎麼使用JSX？以下這篇文章為大家介紹一下Vue3 Vite 中 JSX 的使用方式，希望對大家有幫助！
JSX（JavaScript 和XML），是一個HTML-in-JavaScript 的語法擴展，首先在React 中被進入。 JSX 可以很好地描述 UI 應該呈現出它應有互動的本質形式。 JSX 是在 JavaScript 語法上的拓展，因此類似 HTML 的程式碼可以和 JS 共存。例如：
const button = <MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>該 button 常數稱為 JSX 表達式。可以使用它在我們的應用程式中渲染 <MyButton> 標籤。瀏覽器是無法讀取直接解析 JSX 的。 JSX 表達式經過（ Babel 或 Parcel 之類的工具）編譯之後是這樣的：
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)實際上，JSX 僅僅只是 React.createElement(component, props, ...children) 函數的語法糖。可以使用 React.createElement() 自己寫 UI 來跳過編譯步驟。但是，這樣做會失去 JSX 的聲明性優勢，程式碼變得更難閱讀。編譯是開發過程中的額外步驟，但是 React 社群中的許多開發人員都認為 JSX 的可讀性值得。另外，流行的工具使 JSX-to-JavaScript 編譯成為其設定過程的一部分。除非您願意，否則不必自己配置編譯。如果你想測試一些特定的 JSX 會轉換成什麼樣的 JavaScript，你可以嘗試使用 線上的 Babel 編譯器。
React 並沒有強制要求使用 JSX。當你不想在建置環境中配置有關 JSX 編譯時，不在 React 中使用 JSX 會更方便。例如，用JSX 寫的程式碼：
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);可以寫成不使用JSX 的程式碼：
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));#Vue 使用單一檔案元件，把template 範本、相關腳本和CSS 一起整合放在.vue 結尾的一個單一檔案中。這些文件最終會透過 JS 打包或建置工具（例如 Webpack、Vite）處理。
<template>元素包含了所有的標記結構和元件的展示邏輯。 template 可以包含任何合法的 HTML，以及 Vue 特定的語法。透過設定<template>標籤的lang屬性，例如可以透過設定<template lang="pug">就可以使用Pug 範本來替代標準HTML。而 .vue 檔案中的
<script>標籤包含元件中所有的非顯示邏輯，並且需要預設匯出一個 JS 物件。該物件是在本機註冊元件、定義屬性、處理本機狀態、定義方法等的地方。在建置階段這個包含了 template 範本的物件會被處理和轉換成為一個有 render() 函數的 Vue 元件。元件的CSS 樣式寫在
<style>標籤裡，如果加入了scoped屬性，Vue 會將樣式的範圍限製到單一檔案元件的內容裡。這是類似 CSS-in-JS 的解決方案，只不過允許書寫純粹的 CSS。如果透過 CLI 建立專案時選擇了 CSS 預處理器，則可以將lang屬性新增至<style>標籤中，以便 Webpack 可以在建置時處理內容。
雖然 jsx 最早是由 React 引入，但實際上 JSX 語法並沒有定義運行時語義，並且能被編譯成各種不同的輸出形式。如果你之前使用過 JSX 語法，那麼請注意 Vue 的 JSX 編譯方式與 React 中 JSX 的編譯方式不同，因此無法在 Vue 應用程式中使用 React 的 JSX 編譯。與 React JSX 語法的一些明顯差異包括：
class 和 for 作为 props - 不需要使用 className 或 htmlFor。Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时，确保在 tsconfig.json 中配置了 "jsx": "preserve"，这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。
vite 官方提供了官方的插件来支持在 vue3 中使用 jsx/tsx，直接安装就行。
npm i @vitejs/plugin-vue-jsx -D
安装完之后在 vite.config.js 文件中的 plugins 字段中添加 jsx 支持：
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [
vueJsx(),
]
})这样就可以在项目中使用 jsx/tsx 了。
在项目中新建 jsx 或 tsx 后缀的文件，语法和 js 文件类似，但是和 .vue 文件中的 <script> 标签一样需要默认导出一个 JS 对象。该对象是在本地注册组件、定义属性、处理本地状态、定义方法等的地方。
import HelloWorld from './HelloWorld.vue'
export default {
setup() {
return () => <HelloWorld msg="11" />;
},
};1、插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user) 等。
// 模板语法
<span>{{ a + b }}</span>
// jsx/tsx
<span>{ a + b }</span>2、class 类名绑定。有两种方式，使用模板字符串或者使用数组。
// 模板字符串
<div className={ `header ${ isBg ? 'headerBg' : '' }` }>header</div>
// 数组
<div class={ [ 'header', isBg && 'headerBg' ] } >header</div>3、style 样式绑定。需要使用双大括号。
const color = 'red'
const element = <sapn style={{ color, fontSize: '16px' }}>style</sapn>4、条件渲染。由于 jsx 本身具有 js 语法，所以不再需要使用 v-if 指令，使用 if/else 和三元表达式都可以实现。但是支持 v-show 指令。
const element = (name) => {
if (name) {
return <h1>Hello, { name }</h1>
} else {
return <h1>Hello, Stranger</h1>
}
}
const element = icon ? <span class="icon"></span> : null;
// 以上代码等效于：
const element = icon && <span class="icon"></span>;5、列表渲染。同样，由于 jsx 本身具有 js 语法，所以不再需要使用 v-for 指令，使用 JS 数组的 map 方法即可。
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () => (
<div>
<div class={'box'}>
<span>姓名</span>
<span>年龄</span>
</div>
{
prop.listData.map(item => <div class={'box'}>
<span>{item.name}</span>
<span>{item.age}</span>
</div>
})
</div>
)6、标签属性绑定。也是使用大括号包裹，不能使用 v-bind 指令。而 vue 组件中通过 <div v-bind="properties"></div> 批量绑定标签属性，在 JSX 中需要使用 <div {...properties}></div>。
const href = 'https://cn.vuejs.org/'
const element = <a href={href}>Vue3</a>7、事件绑定。使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，与原生相同。例如：click 事件是 onClick 或 onclick。
const confirm = () => {
// 确认提交
}
<button onClick={confirm}>确定</button>如果要带参数，需要使用箭头函数进行包裹：
const confirm = (name) => {
// 确认提交
}
<button onClick={() => confirm('Are you sure')}>确定</button>8、事件修饰符。需要使用 withModifiers 方法，接收两个参数，第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符。
import { withModifiers, defineComponent, ref } from 'vue'
const App = defineComponent({
setup() {
const count = ref(0);
const inc = () => {
count.value++;
};
return () => (
<div onClick={ withModifiers(inc, ['self']) }>{ count.value }</div>
);
},
})
export default App注意：Vue 模板中 ref 变量是可以直接解构的，但是在 jsx 中不行，需要添加 .value，比如上面的 { count.value }。
9、v-model 双向绑定。需要使用单大括号 {}。如果绑定属性则需要一个数组，第一个元素为绑定的值，第二个元素为绑定的属性。
// 绑定值
<input v-model="show" /> // vue
<input v-model={show.value} /> // jsx
// 绑定属性
<input v-model:prop="show" /> // vue
<input v-model={[show.value,'prop']} /> // jsx
// 修饰符写法
<input v-model:prop.trim="show" /> // vue
<input v-model={[show.value,'prop',['trim']]} /> // jsx10、slot 插槽。jsx/tsx 中无法使用 slot 标签，定义插槽方式一：通过 setup 函数的第一个参数 ctx 上下文对象的 slots 的属性，setup 函数默认接收两个参数：
如果解构了 props 对象，解构出的变量将会丢失响应性，因此推荐通过 props.xxx 的形式来使用其中的 props。如果确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，可以使用 toRefs() 和 toRef() 这两个工具函数：
import { toRefs, toRef } from 'vue'
export default {
setup(props) {
// 将 `props` 转为一个其中全是 ref 的对象，然后解构
const { title } = toRefs(props)
// `title` 是一个追踪着 `props.title` 的 ref
console.log(title.value)
// 或者，将 `props` 的单个属性转为一个 ref
const title = toRef(props, 'title')
}
}ctx 上下文对象是非响应式的，可以安全地解构：
export default {
setup(props, { attrs, slots, emit, expose }) {
...
}
}attrs 和 slots 都是响应式（有状态）的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果想要基于 attrs 或 slots 的改变来执行副作用，那么应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。
expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容：
export default {
setup(props, { expose }) {
// 让组件实例处于 “关闭状态”
// 即不向父组件暴露任何东西
expose()
const publicCount = ref(0)
const privateCount = ref(0)
// 有选择地暴露局部状态
expose({ count: publicCount })
}
}通过 ctx 上下文对象的 slots 的属性可以获取插槽对象后，就可以定义插槽了。
import { defineComponent } from 'vue'
export default defineComponent({
setup(props, { slots }) { // 逻辑
return () => {
return <p>
<button>{ slots.test?.() }</button>
<button>{ slots.default?.() }</button>
</p>
}
},
})
// 在引用的组件中
<template #test>slot-test</template>
<template #>slot-default</template>定义插槽方式二：使用 renderSlot 函数。
import { renderSlot } from 'vue'
<button>
{ renderSlot(slots, 'default') }
</button>而如果在 jsx 中使用插槽，可以直接通过标签属性 slot，或通过 v-slots 指令。
import HelloWorld from './HelloWorld'
export default defineComponent({
setup() {
return () => (
<div class={'box'}>
<HelloWorld v-slots={{
title: () => {
return <p>我是title插槽</p>
},
default: () => {
return <p>我是default插槽</p>
}
}} />
</div>
)
}
})11、CSS Modules。引入局部样式，相当于 vue 组件中 <style> 标签的 scoped 属性。
import styles from './index.module.scss'
<div class={styles.wrap}></div>以上是詳解Vue3+Vite中怎麼使用JSX的詳細內容。更多資訊請關注PHP中文網其他相關文章！
