前言
在进行vue的开发时，我们往往会遵从vue的规范，在template标签中编写html，在script标签中编写JavaScript，在style标签中编写css。但在有些情况下，尽管这种方式也可以实现我们想要的效果，但是可能编写的时候会比较麻烦，需要很多的判断，但是，如果他能和JavaScript联动起来，我想它肯定会变得更加高效。
渲染函数
比如我们有一个title组件：
// title.vue <h1>彼时彼刻，恰如此时此刻</h1> 复制代码
在父组件引用：
// page.vue <title level="1"></title> <title level="2"></title> <title level="3"></title> 复制代码
title组件根据传来的level prop动态改变，h标签。你可能想到这么实现：
title.vue ... <h1 v-if="level === 1">彼时彼刻，恰如此时此刻<slot><slot></h1> <h2 v-if="level === 2">彼时彼刻，恰如此时此刻<slot><slot></h2> <h3 v-if="level === 3">彼时彼刻，恰如此时此刻<slot><slot></h3> ... ... props: { level: { type: Number, required: true } } ... 复制代码
尽管这么写，实现我们想要的效果，但是每次写的时候，h都要再写一遍。如果是业务繁杂的话，结构将会更加复杂。
而这种情况，我们完全可以根据vue提供的render方法来解决。
// title.vue render(createElement) { return createElement( 'h' + this.level, 彼时彼刻，恰如此时此刻 ) }, props: { level: { type: Number, required: true } } 复制代码
这样看起来，是不是就方便多了。
jsx
当然，通过render回调的 createElement参数来编写可以解决我们的问题。但是如果结构复杂的话，这么写可以说是非常折磨的，而如果也能通过html的形式写的话，那是再好不过的。正好jsx就可以解决我们的问题：
JSX：是一个 JavaScript 的语法扩展。可以在JavaScript中编写html，具有 JavaScript 的全部功能。
具体特性，请参考文档。
安装
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 复制代码
// babel.config.js module.exports = { presets: ['@vue/babel-preset-jsx'], } 复制代码
有了jsx，我们就可以这样实现：
// title.vue render(createElement) { const tag = `h${this.props.level}` return ( <tag> 彼时彼刻，恰如此时此刻 </tag> ) }, props: { level: { type: Number, required: true } }
