vue3中的jsxvue3是一门语言，它讲究说学逗唱，不对不对，说错了，它讲究活学活用。为什么我推荐使用vue3呢，因

vue3是一门语言，它讲究说学逗唱，不对不对，说错了，它讲究活学活用。

为什么我推荐使用vue3呢，因为它香呀，看我标题就知道，vue3不仅有新的composition API，而且还支持ts, jsx以及原来vue2的option API，不要998，不要98，免费使用，终生开源，还在等什么，还在等什么，赶紧拿起电脑使用吧。

首先你需要根据官方文档(使用vite构建脚手架，项目名不能包含空格，构建之后cd到项目，进行npm install/yarn)

# 安装vue脚手架
yarn global add @vue/cli
# OR
npm install -g @vue/cli

vue create <project-name>
# OR
npm init @vitejs/app <project-name>
# OR
yarn create @vitejs/app <project-name>

创建并安装完依赖的模块node_modules之后，我们安装@vue/babel-plugin-jsx插件，让vue拥有使用jsx能力，在目录创建babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    ["@vue/babel-plugin-jsx", { mergeProps: false }]
   ]
}

恭喜你，你的vue已经可以使用jsx语法了，下面我们看看在vue3中都是怎么用jsx 第一种方式，创建.vue文件并在script上添加type=jsx属性，通过h函数包裹vue组件

<script type="jsx">
import { ref, h } from 'vue';
import { RouterView } from 'vue-router';
export default {
  name: 'App',
  setup() {
    return () => h(RouterView) // or () => (<RouterView/>)
  },
};
</script>

第二种方式更接近react，创建.jsx文件并使用vue中的defineComponent函数来解析jsx语法吗，样式可以直接通过es module引入

import { defineComponent } from 'vue';
import { RouterView } from 'vue-router';
import './index.less';
export default defineComponent({
  return () => <RouterView/>
})

下面我讲讲第二种方式的用法，不过讲之前还是先了解一下与vue2不同的用法，当然option API依然可以用呦

我个人认为vue3更接近函数式编程，将原来声明式的Api变成了函数进行调用

生命周期钩子就从mounted () {}变成了函数onMounted(() => {})

响应式数据从data(){return {};}变成了函数reative({})

监听属性从watch: {count(){}}变成了函数watch(count, () => {})

计算属性从computed: {count(){return this}变成了函数computed(() => count)

全局注入从provide: {data:'1'},inject:['data']变成了函数provide('data', '1')和inject('data')

下面是jsx中模板的区别

模板事件从@click/v-on:click变成了onClick

模板指令大多数从v-model变成了vModel

插槽从<template slot="name"></template>变成了vSlots={{name: </>}}

从这里可以看出更接近react的语法了，又酷又带感，还不赶紧来试试