vue3 第二十四节（JSX用法）使用及注意事项详解

vite 创建项目的情况下 安装

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

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

1、什么是 JSX

JSX是一种JavaScript的语法扩展，它允许在JavaScript代码中直接编写类似HTML的标记结构。Vue 3中提供了对JSX的原生支持，使得开发人员可以使用JSX编写Vue组件的模板。

虽然最早是由 React 引入，但实际上 JSX 语法并没有定义运行时语义，并且能被编译成各种不同的输出形式。如果你之前使用过 JSX 语法，那么请注意 Vue 的 JSX 转换方式与 React 中 JSX 的转换方式**不同**，因此你不能在 Vue 应用中使用 React 的 JSX 转换。与 React JSX 语法的一些明显区别包括：

a ：可以使用 HTML attributes 比如 class 和 for 作为 props - 不需要使用 className 或 htmlFor 。 b ：传递子元素给组件 (比如 slots) 的方式不同。

2、jsx 与 template 的区别

语法上有很大区别 ： JSX 本质就是 js 代码，可以使用 js 的任何能力 template 只能嵌入简单的 js 表达式，其他需要指令，如 v-if、for(); 而JSX 中循环使用map(), 条件使用 三元运算、&& 、|| 运算符 JSX 已经成为 ES 规范，template 还是 Vue 自家规范 template 中使用的是 {{}} 双大括号，JSX 中使用的是 { } 单大括号，插值语法 本质是相同的 ： 都会被编译为 js 代码（render 函数）

3、基本用法 在 vue3 setup 语法糖中使用jsx

父组件：

<template>
  <div ref="myDivRef">
    <myCom :lists="lists"></myCom>
  </div>
</template>
<script setup lang="jsx">
import { ref, computed, watch, onMounted } from 'vue'
// 引入子组件
import myCom from './jsxCom.vue'
// import myCom from './index.jsx'
const myDivRef = ref('myDivRef')
const lists = ref([1, 2, 3, 4, 5])
const fun = () => {
    <div>{
      lists.value.map(itm => {
        return <div key={itm}>name--{itm}</div>
      })
    }</div>
}
</script>

子组件：

<template>
<div class="222">
  <myComponent :lists="lists" ></myComponent>
</div>
</template>
<!-- setup 语法糖中使用 jsx 声明lang="jsx" -->
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({
  lists: Array
})
// const lists = ref([1, 2, 3, 4])
// 使用 defineComponent 定义组件
const myComponent = defineComponent({
  name: 'myComponent',
  props: {
    lists: Array
  },
  setup() {
    return () => (
      <div>{
        props.lists.value.map(itm => {
          return <div key={itm}>name--{itm}</div>
        })
      }</div>
    )
  }
})
</script>

自定义组件 还可以是 jsx文件

// index.jsx 文件
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    lists: Array
  },
  setup(props) {
    const render = () => [<div>{
      props.lists.map(itm => {
          return <div data-num={itm} key={itm} >name--{itm}</div>
        })
      }</div>]
    return render
  }
})

4、属性和事件 循环

JSX中的属性 使用为 如 key={value}，不需要前面加冒号(:) JSX中的方法 使用为 如 onClick={()=>{}} 为驼峰命名方法；以on开始，如 onClick

如需要修饰符：.passive、.capture 和 .once 等事件修饰符

<div onClickCapture={() => myClick()} />

对于事件和按键修饰符，可以使用 withModifiers 函数：

<div onClick={withModifiers(() => {}, ['self'])} />

循环使用map() 语法；而template语法中，需要使用v-for

<template>
<div class="222">
  <myComponent :lists="lists" ></myComponent>
</div>
</template>
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({
  lists: Array
})
const lists = ref([1, 2, 3, 4])
const myComponent = defineComponent({
  name: 'myComponent',
  props: {
    lists: Array
  },
  setup() {
    const myClick = (itm) => {
      console.log(itm)
    }
    return () => [<div>{
      props.lists.map(itm => {
          return itm % 2 === 0 && <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>
        })
      }</div>]
  }
})
</script>

5、使用运算符

如：&& 运算符 三元运算符

<template>
<div class="222">
  <myComponent :lists="lists" ></myComponent>
</div>
</template>
<script setup lang="jsx">
import { ref, defineComponent } from 'vue'
const props = defineProps({
  lists: Array
})
const lists = ref([1, 2, 3, 4])
const myComponent = defineComponent({
  name: 'myComponent',
  props: {
    lists: Array
  },
  setup() {
    const myClick = (itm) => {
      console.log(itm)
    }
    return () => [<div>{
      props.lists.map(itm => {
          // return <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>
        // 使用 && 运算符
          return itm % 2 === 0 && <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div>
        })
      }</div>]
  }
})
</script>

三元运算：

......
return () => [<div>{
    props.lists.map(itm => {
        return itm % 2 ===0 ? <div key={itm} onClick={() => myClick(itm)}>name--{itm}</div> : <div key={`${itm}-1`} onClick={() => myClick(`${itm}-1`)}>name--{`${itm}-1`}</div>
      })
    }</div>]
......