vue3使用jsx

// Vue 3 使用 JSX 示例

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);

    return () => (
      <div>
        <p>Count: {count.value}</p>
        <button onClick={() => count.value++}>Increment</button>
      </div>
    );
  }
});

解释说明：

1. 导入 Vue 3 的核心函数：

   • defineComponent：用于定义一个 Vue 组件。
   • ref：用于创建一个响应式的引用。

2. setup 函数：

   • 这是 Vue 3 Composition API 的入口。在这个函数中，你可以初始化组件的状态、逻辑等。

3. 返回 JSX 渲染函数：

   • 返回的箭头函数会作为组件的渲染函数，使用 JSX 语法来描述 UI。
   • <div> 和 <p> 标签用于创建 HTML 元素。
   • {count.value} 用于在模板中插入 JavaScript 表达式。
   • <button> 标签绑定了一个点击事件处理程序 onClick，当按钮被点击时，count.value 会递增。

4. 响应式数据：

   • count 是一个响应式的引用，其值会在视图中自动更新，而无需手动操作 DOM。