Vue3 + jsx开发指南

​ 在2021年，vue3发布了正式版本，并且经过一年的维护已经越来越稳定，我们在公司项目中也小范围的上线了vue3的项目，总体还是很不错的

​ 但是setup语法需要return比较麻烦，还有.value问题，尝试过setup语法糖，依旧觉得setup语法的api记忆负担比较重

​ 所以下半年逐渐拾起了jsx的语法，并在开源项目中使用，总体感觉还是相当不错的，前人栽树后人乘凉，本文对jsx for vue的常见问题进行说明

• jsx学习成本更低，这么多年jsx没有大改动；

• 无记忆负担，同时足够灵活，如果你是vue开发者，同时对setup语法并不是太合得来， vue3 + jsx也是非常不错的选择~

前置知识

​ 在vue3中使用jsx需要安装@vitejs/plugin-vue-jsx（webpack版本的不了解，有需要者执行搜索），根据文档配置一下就行了，官方提供了文档供参考，提供了相关示例jsx-next,有react基础的同学可以先看官方文档，在开发过程中出现问题再看本文

指令

v-model

JSX for vue是支持v-model语法的，这一点比react的setState,体验感确实要好

// 正常写法
<input v-model="value" />  // vue
<input v-model={value} /> // jsx

// 指定值写法
<input v-model:modelValue="value" />  // vue
<input v-model={[value,'modelValue']} /> // jsx
  
// 修饰符写法
<input v-model:modelValue.trim="value" />  // vue
<input v-model={[value,'modelValue',['trim']]} /> // jsx

v-show

这个api与在vue中的表现形式一致

<div v-show="isShow"></div> // vue
<div v-show={isShow}></div> // jsx

v-bind

// vue
<a-modal
  :width="'400px'"
  :title="'设置组件名称'"
 >
	// ....
</a-modal>
// jsx
<a-modal
  width={"400px"}
  title={"设置组件名称"}
 >
	// ....
</a-modal>

v-if

在jsx for vue中没有这个api，我们需要用jsx风格来实现v-if的效果

可以简单理解为jsx直接将if搬到html中

<div v-if="isShow"> ... </div> // vue
{isShow && <div> ... </div>} // jsx

事件

事件语法

jsx for vue，所有的事件都按照react风格来

• 所有事件有on开头
• 所有事件名称首字母大写

例如：@click => onClick @change => onChange @drop => onDrop

事件修饰符

这里没有找到权威的资料，有小伙伴知道也请告知一下，目前建议大家通过原生JavaScript来实现vue事件修饰符的效果

.stop ： 阻止事件冒泡，在JSX中使用event.stopPropagation()来代替

.prevent：阻止默认行为，在JSX中使用event.preventDefault() 来代替

API

ref与reactive

vue3的template会自动解析ref的.value,在jsx中ref的.value是不会被自动解析的

//声明变量 let type = ref(1)

<p>{{ type }}</p> // vue
<p>{type.value}</p> // jsx

props

在jsx for vue中，props的语法使用的就是setup的语法，实际表现形式完全一致

export default defineComponent({
  props: ['title'],
  setup(props) {
    onMounted(() => {
      console.log(props.title);
    })
    return () => (
      <div>{props.title}</div>
    )
  }
})

emit

同样与vue3的setup语法保持一致，注意子父方法需要符合react规范

emit('changeVisible', false) // 子组件 

<xxx onChangeVisible={(params) => xxxFun(params)}></xxx> // 父组件

solt如何写插槽

这里以antd for vue的Popover 气泡卡片，为例子

Vue3语法

<a-popover title="Title">
  <template #content>
  	<span>Content</span>
  </template>
	<a-button type="primary">Hover me</a-button>
</a-popover>

jsx for vue语法

<a-popover
	title="Title"
	content={
    <>
    	<span>Content</span>
    </>
  }>
 	<a-button type="primary">Hover me</a-button>
</a-popover>

基础模板

import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  // props: ['xx'],
  setup(props,{ emit }) {
    onMounted(() => {
      // ...
    })
    return () => (
      <div></div>
    )
  }
})

结语

• 国内这方面资料比较少，查问题的时候注意vue版本，以及jsx的使用（render方式本文不适用）
• 如果代码里面存在问题，如果是ui框架，建议直接看react版本的代码，例如antdv的jsx版本直接看antd的实例代码
• 直接看jsx语法的项目代码，H5-YD.v2
• 不接受杠精，例如写jsx为啥不去用使用react

如果在学习过程中遇到了解决不了的问题，请到QQ群 530496237，大佬解答疑惑~