用JSX来写Vue3，瞬间找到React 的感觉

Ⅰ. vue3 的 JSX 写法

• 对于熟悉react 的小伙伴, 可以通过 jsx 来 做 vue3
• 喜欢 jsx 写法做 vue，代码结构更加美观，
• 让我们一起来踩坑 👇

Ⅱ. JSX 安装和配置

1. 通过 webpack 构建的

如果是通过官方 vue-cli 脚手架去创建的则需要如下操作 👇

① 安装 [ 第 一 步 ]

npm install @vue/babel-plugin-jsx -D

② 配置 [ 第 二 步 ]

配置根目录 babel.config.js 👇

module.exports = {plugins: ["@vue/babel-plugin-jsx"]   // 省略其他配置
}

2. 通过 vite 构建的

如果是通过去 vite 去创建的则需要如下操作 👇

① 安装 [ 第 一 步 ]

npm i @vitejs/plugin-vue-jsx

② 配置 [ 第 二 步 ]

配置根目录 vite.config.js 👇

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({plugins: [vue(),vueJsx()  //添加 jsx]//...省略其他配置
})

Ⅳ. JSX 的 在vue 的应用

1. JSX => 两种写法

① 写法一 : ⭐⭐⭐

不需要 props 来传参 , 简写

import { defineComponent } from 'vue';
export default defineComponent((props, {emits}) => {return () => <div> 写法1  </div>
})

• defineComponent 去传入一个 函数 ( 会默认为 setup )

• 写法方便， 因为 无法去定义 props , 所以 props 一直为空对象

• 但是可以正常使用 emits 和 slots 等

② 写法二 : ⭐⭐⭐⭐⭐

需要 props 传参

import { defineComponent } from 'vue';
export default defineComponent({props:{params:{ type: String, defualt: ()=> ''}	},setup(props) {return () => <div>  写法2  ,  父组件传过来的值 { props.params }  </div>}
})

• defineComponent 去传入一个 整个对象
• 可以定义props ,可以使用 (父组件 => 子组件) 值
• 复杂的场景，更加推荐，使用起来更加灵活

2.JSX => 父子组件通信

父组件: (Father.jsx) 👇

import { defineComponent, ref } from 'vue';
import Child from './Child.jsx'
export default defineComponent(() => {const params = ref('123')function getChild(val){ console.log(val)}return () => <div><h3>子组件↓ </h3><Child   params={  params.value }  onFather={ getChild }  /></div>;
})

子组件 : (Child.jsx) 👇

import { defineComponent, ref } from 'vue';
export default defineComponent({props: ['params'],setup(props , { emit }) {const text = ref('传给父组件的值')return () => <div>父组件传来的值: { props.params }<button onClick = {()=>{ emit('father', text.value) } }> 传给 father </button></div>}
})

• 第二种可以定义 props 的写法，才可以接收 父组件传递的参数
• emit 给父组件通信，父组件自定义 方法 要 加 on + 大写开头方法

3. JSX => 用v-if 、v-show

const visble = ref(true)
const onOff =() => { visble.value = !visble.value }
return () => <div><button onClick= { onOff }> 开关 </button>{ visble.value && <span>'内容...'</span> }
</div>

• v-if 没办法正常使用 ， 可以通过表达式代替
• v-show 可以正常使用

4. JSX => 用 v-for

v-for 可以通过 map 代替

const list = [ {name:'张三'}, {name: '李四'}]
const onOff =() => { visble.value = !visble.value }
return () => <ul>{list.map(res => <li>{res.name}</li>)}
</ul>

5. JSX => 插槽的使用

父组件: 👇

<Page2  v-slots={{  aaa: () => <span>123</span> ,bbb: () => <span>456</span> }} />

子组件: 👇

 setup(props, { slots }) {return () => <div>我是插槽aaa:  {slots.aaa && slots.aaa()}  <br>我是插槽bbb:  {slots.bbb && slots.bbb()}</div>

• 通过 v-slots 返回对象，对象的每个属性为一个函数 ，返回对应的文本标签
• 根据函数的名称，调用对应的方法，来放置具名插槽的位置
• 先做个插槽的判空操作，会更加严谨

Ⅳ. JSX 从头搭建 vue3

我们用 jsx 去替代所有的 vue 文件， 从头搭建开始如下 👇

1. 主文件和入口

我们将App.vue 改成 App.jsx

参考如下 ： 主文件（main.js） 👇

import { createApp } from "vue";
import App from "./App.jsx";
import router from './router';const app = createApp(App);
app
.use(router)
.mount("#app");

参考如下 ： App.jsx 👇 , 来实现人口文件

import { defineComponent } from 'vue';
import { useRouter } from "vue-router";
export default defineComponent(() => {const router = useRouter();return () => <div><button onClick = { ()=> router.push('/page1') } > 页面1 </button><button onClick = { ()=> router.push('/page2') } > 页面2 </button><router-view></router-view></div>
})

2. 配置路由

参考如下 👇

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()const router = createRouter({history: routerHistory,routes: [{path: '/',component: () => import('../App.jsx'),redirect:'/page1',children: [{ path: '/page1',  component: () => import('../views/page1.jsx') }{ path: '/page2',  component: () => import('../views/page2.jsx') }]}]
})
export default router;

🍭作者水平很有限，如果发现错误，一定要及时告知作者哦！感谢感谢！