JSX

直入正题，vue3 对 jsx 和 ts 的支持更加完善，看一下 vue3 的 jsx 官方文档部分：

非常的简陋了，但是他给我们指引了 vue3 中 jsx 的 babel 转换插件 jsx-next 。

感兴趣的可以看一下他的 README，下面开始安装使用一下~

安装 jsx-next

实际上 vue-cli 建立的 vue3 项目中已经内置了 jsx 的这个编译插件，如果你不需要自定义配置，是不需要安装就可以即开即用 jsx 的，可谓是非常贴心了。

安装过程如下：

	yarn add -D @vue/babel-plugin-jsx

安装后在 package.json 看到目前是 rc 状态，还没有正式发布，我们只是简单体验一下。

之后在 babel.config.js 内配置该插件：

module.exports = {
    
  // 这是原来的预设，cli 搭建项目就有的
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 需要配置的插件
  plugins: ['@vue/babel-plugin-jsx']
}

之后就可以使用 jsx 了！

使用

建立一个 views/Demo.jsx ：

import {
     defineComponent, ref } from 'vue'

const Demo = defineComponent({
    
  name: 'demo',
  setup (props) {
    
    const input = ref(null)

    const click = (e) => {
    
      console.log(e)
      console.log(input.value)
    }
    return {
    
      click,
      input
    }
  },
  render () {
    
    return (
      <>
        <div>test</div>
        <button onClick={
    this.click}>点击</button>
        <input v-model={
    this.input} placeholder="啊这"/>
      </>
    )
  }

})

export default Demo

demo 的大致框架如上所示，不需要在意上面的 demo 写了什么，只需要在意整体的结构如下：

定义组件

defineComponent() 定义组件，这是为了使得 ts 和 ide 能进行类型推断，从而获得代码提示功能，在配置路由的时候可选用 () => import() 进行懒加载：

{
    
  path: '/demo',
  name: 'demo',
  component: () => import(/* webpackChunkName: "demo" */ '../views/Demo.jsx')
}

注：如果你没有代码提示，那一定是没有使用 defineComponent() ，有了这个东西，你才能获得代码提示。

异步组件

我们手写一个异步组件的使用例子：

import Demo from '../views/Demo'
  // ......
  // 路由
  {
    
    path: '/async',
    name: 'async',
    component: defineAsyncComponent({
    
      // 工厂函数
      loader: Async,
      // 加载异步组件时要使用的组件
      loadingComponent: Demo
    })
  }

这里的 loadingComponent 就是组件 loading 时要显示的内容，而 loader 就是要加载的异步组件。

建立一个 views/Async.jsx：

import {
     defineComponent } from 'vue'

const Async = () => new Promise((resolve, reject) => {
    
  setTimeout(() => {
    
    resolve(defineComponent({
    
      render () {
    
        return <div>async component</div>
      }
    }))
  }, 3000)
})

export default Async

这段代码只是把 webpack 给我们的 () => import() 变成手写 Promise 了，在 resolve() 内你可以返回你需要加载的组件，当然我们还要用 defineComponent() 以获得代码提示功能保证 eslint 不报错。

注：

1. loader 的目标组件必须是返回一个 Promise 的函数，使用 () => import() 可以达到相同的效果（他会使用一个 Promise 帮你包裹组件），这里我们为了主动延时才手写了 Promise 。
2. loadingComponent 需要是一个同步组件。

有关更多异步组件 defineAsyncComponent 的选项可以查看官方文档的中文社区翻译版：defineAsyncComponent

setup

定义完组件就是 setup 了，为什么不用 vue2 的 template 呢？那就不是 jsx 了。

有关这部分该如何使用，请看 官方文档 即可。

props, name …

在 defineComponent 组件块内，完全和 vue3 新语法等同，还可以使用 props 对上层传入进行限制、指定，以及使用 name 等关键词：

const Demo = defineComponent({
    
  name: 'demo',
  props: {
    
    key1: {
    
      type: String,
      required: true
    }
  }
}

render

render 才是 jsx 的核心部分，所有的 jsx 要在此处顶层返回。

和 react 的函数式相比，在 render 内的 jsx ，你还需要使用 this 取得 setup 阶段返回的值。

总结

如果实际体验一下，会发现和 react 的函数式组件还是有天壤之别，Vue 本来就不是为 jsx 而生的，template 它不香吗。

附：

官方 Vue3 文档：Vue3 Guide

民间中文版 Vue3 文档：Vue3 文档

JSX 插件已经内置到 vue-cli 创建的项目中的 issue ：这个已经内置到cli 里面去了？

更多 Vue JSX 的用法请看官方 babel 插件的 README ：Vue 3 Babel JSX 插件