在Vue中使用JSX

Posted on

虽然Vue的模板够简单，但是感觉上还是没有JSX用得顺手，这里来记录下Vue配置JSX的步骤。

什么是JSX

JSX本质上是语法糖，实际上是转化成了createElement函数。

使用步骤

  1. vue create 创建一个vue的项目

  2. 安装babel vue jsx编译库:

    1
    npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

  3. 在.babelrc中添加下面代码：
    {
    “presets”: [“@vue/babel-preset-jsx”]
    }

  4. 随便找一个.vue文件，删掉template，然后在组件中增加渲染函数render，不要忘记要把createElement(h函数)传进来：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    export default {
      name: 'app',
      components: {
        HelloWorld
      },
      data () {
        return {
          msg: 'hello world'
        }
      },
      render (h) {
        return (
          <div id="app">
            <HelloWorld msg={this.msg} />
          </div>
        )
      }
    }

到这里已经完成了vue使用jsx配置了。
主要看下为什么要传入一个h参数，h参数是什么？实际上将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。createElement是构建VNode的构建函数。