Vue入门指北——渲染函数和jsx

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第久天，点击查看活动详情

前言

在进行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
    }
}