在vue3的工程中使用jsx

1.前言
听说vue3支持了jsx的语法,所以想试试看,好用不好用,跟react的写法有何区别。

2.template与jsx
Vue的主流做法是基于template的,通过对模板的渲染,达到页面的展示效果。react是用jsx的写法。传统的服务端渲染,有很多基于模板引擎的方案,比如jade,这种都是预选把值处理好,在渲染的时候填充进模板。而jsx是直接同步输出的。

3.环境

  • @vue/cli:4.5.0
  • vue:3.0.0
  • ant-design-vue:2.2.8

4.创建工程
我们基于vue-cli创建一个工程,然后可以看到启动后的默认页面,基于当前环境,写一个jsx的组件
TestJsx

import {defineComponent} from "vue";

const TestJsx = defineComponent({
    setup() {
        return () => <>
            <div>JSX test</div>
        </>
    }
})
export default TestJsx


在HelloWorld组件中引入

import TestJsx from "./TestJsx"
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    TestJsx
  }
}


可以看到组件被正常渲染

5.jsx组件中,引入组件库中的组件
这里以ant-design-vue为例,按需加载的配置就不赘述了。可以参考 https://www.ithere.net/article/431

import {defineComponent, ref} from "vue";
import {Button} from "ant-design-vue";
import {Input} from "ant-design-vue/es";

const TestJsx = defineComponent({
    setup() {
        const val = ref('this is a input');
        const handleInputChange = (e)=>{ val.value = e.target.value }
        const handleClick = ()=>{
            alert("this is a button")
        }

        return () => <>
            <div>JSX test</div>
            <Button type="primary" ghost onClick={handleClick}>Button</Button>
            <Input value={val} onChange={handleInputChange}/>
        </>
    }
})
export default TestJsx


jsx的写法基本就与react很类似了。


结果可以看到,组件被正常引用,并且,事件可以触发。

6.jsx中引入工程中的template的组件和jsx的组件
A.jsx

import {defineComponent} from "vue";

const A = defineComponent(()=>{
    return ()=><div>A Component</div>
})
export default A


B.vue

<template>
  <div>
    B Component
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

TestJsx.jsx

import {defineComponent, ref} from "vue";
import A from "./A";
import B from "./B";
import {Button} from "ant-design-vue";
import {Input} from "ant-design-vue/es";

const TestJsx = defineComponent({
    components: {
        B
    },
    setup() {
        const val = ref('this is a input');
        const handleInputChange = (e)=>{ val.value = e.target.value }
        const handleClick = ()=>{
            alert("this is a button")
        }

        return () => <>
            <div>JSX test</div>
            <Button type="primary" ghost onClick={handleClick}>Button</Button>
            <Input value={val} onChange={handleInputChange}/>
            <A/>
            <B/>
        </>
    }
})
export default TestJsx


运行效果如下

通过demo可以看出,在vue3下,我们可以自由的选择templet或者jsx的方式去进行开发,并且可以根据情况进行混合开发。这种可以方便react的前端兄弟,在开发vue的时候不会感觉别扭。不过从工程角度看既然vue一直是template模式,那么如果没有特殊需要,倒也不需要特地去改变。最大的好处,大概就是在按需加载的时候,不需要一个个的去单独注册组件了。


关于作者

落雁沙
吹牛逼大王
获得点赞
文章被阅读