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

相关推荐
Ramos丶几秒前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_4116719819 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
paopaokaka_luck1 小时前
基于SpringBoot+Vue的电影售票系统(协同过滤算法)
vue.js·spring boot·后端
滿1 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室3 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子4 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W6 小时前
微信小程序实现路由拦截的方法
前端