在 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 是更好的选择。

相关推荐
mCell2 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip2 小时前
Node.js 子进程:child_process
前端·javascript
excel5 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel6 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼7 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping7 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙8 小时前
[译] Composition in CSS
前端·css
白水清风8 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix9 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278009 小时前
new、原型和原型链浅析
前端·javascript