在 Vue 3 中使用 JSX

在 Vue 3 中使用 JSX 需要以下步骤和注意事项:


一、环境配置

  1. 安装依赖:
bash 复制代码
npm install @vue/babel-plugin-jsx
  1. 配置 babel.config.js
javascript 复制代码
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

二、基础用法示例

1. 简单组件

jsx 复制代码
// MyComponent.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    
    return () => (
      <div class="container">
        <h1>{count.value}</h1>
        <button onClick={increment}>+1</button>
      </div>
    )
  }
})

2. 使用 Props

jsx 复制代码
// Child.jsx
const props = defineProps({
  msg: String
})

return () => <div>{props.msg}</div>

3. 事件绑定

jsx 复制代码
// Parent.jsx
const handleClick = () => console.log('Clicked!')

return () => (
  <Child onClick={handleClick} />
)

// Child.jsx
const emit = defineEmits(['click'])

return () => (
  <button onClick={() => emit('click')}>
    Click me
  </button>
)

三、高级用法

1. 条件渲染

jsx 复制代码
const isLoading = ref(true)

return () => (
  <div>
    {isLoading.value 
      ? <Spinner /> 
      : <Content />}
  </div>
)

2. 列表渲染

jsx 复制代码
const items = ref(['Apple', 'Banana', 'Orange'])

return () => (
  <ul>
    {items.value.map(item => (
      <li key={item}>{item}</li>
    ))}
  </ul>
)

3. 插槽使用

jsx 复制代码
// Parent.jsx
return () => (
  <Child>
    <template #header>
      <h1>Custom Header</h1>
    </template>
    <p>Default slot content</p>
  </Child>
)

// Child.jsx
return () => (
  <div>
    <header>{slots.header?.()}</header>
    <main>{slots.default?.()}</main>
  </div>
)

四、注意事项

  1. 属性命名

    • 使用驼峰式命名(如 classclassName
    • 事件监听使用 onClick 而非 @click
  2. 样式处理

jsx 复制代码
// 内联样式
<div style={{ color: 'red', fontSize: '16px' }} />

// CSS 类
<div class="my-class" />
  1. 组件注册
jsx 复制代码
import MyComponent from './MyComponent.jsx'

export default {
  components: {
    MyComponent
  }
}
  1. TypeScript 支持
tsx 复制代码
// 使用 .tsx 扩展名
interface Props {
  count: number
}

const Component = defineComponent<Props>({
  setup(props) {
    return () => <div>{props.count}</div>
  }
})

五、性能优化技巧

  1. Memoization
jsx 复制代码
import { memo } from 'vue'

const MemoizedComponent = memo(() => (
  <div>Expensive rendering</div>
))
  1. Key 的正确使用
jsx 复制代码
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}
  1. 避免内联函数
jsx 复制代码
// Bad
<button onClick={() => handleClick(item)}>Click</button>

// Good
<button onClick={withDefaults(handleClick, item)}>Click</button>

通过合理使用 JSX,可以:

  • 提升复杂模板的可维护性
  • 更好地利用 TypeScript 类型检查
  • 实现更灵活的动态渲染逻辑

建议根据项目需求选择使用模板语法或 JSX,对于需要复杂逻辑或类型安全的场景,JSX 是更好的选择。

相关推荐
YongGit9 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js