Vue3 使用 JSX

Vue 3 支持使用 JSX 语法来编写组件，这使得编写 Vue 应用更加灵活和直观。下面是一个简单的示例，展示如何在 Vue 3 中使用 JSX：

首先，确保已经安装了 Vue 3 的相关依赖。然后在你的 Vue 组件文件中，引入 `vue` 和 `@vue/runtime-dom` 这两个包：

import { createApp, h } from 'vue'

然后，定义一个基本的 Vue 组件，并使用 JSX 语法编写其模板：

const App = {
  setup() {
    return () => (
      <div>
        <h1>Hello, Vue 3 with JSX!</h1>
        <button onClick={handleClick}>Click me</button>
      </div>
    )
  }
}

function handleClick() {
  console.log('Button clicked!')
}

createApp(App).mount('#app')

在上面的示例中，我们通过 `createApp` 方法创建了一个 Vue 应用实例，并将 `App` 组件挂载到 `#app` 元素上。

在组件的 `setup` 方法中，我们返回了一个渲染函数，这个函数使用 JSX 语法来定义模板。在模板中，我们可以直接使用 HTML 标签、组件、事件绑定等等。

注意，在 JSX 中使用事件处理函数时，需要将其命名为 `on` 开头的驼峰式写法，比如 `onClick`、`onKeyUp` 等。

这只是一个简单的示例，你可以根据需要在 Vue 3 中使用 JSX 进行更加复杂的组件开发。希望对你有所帮助！