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

作者：Augus

2022 年 9 月 27 日
天津
本文字数：973 字
阅读完需：约 3 分钟

前言

在进行 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.vuerender(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.jsmodule.exports = {  presets: ['@vue/babel-preset-jsx'],}

复制代码

有了 jsx，我们就可以这样实现：

// title.vuerender(createElement) {    const tag = `h${this.props.level}`    return (        <tag>            彼时彼刻，恰如此时此刻        </tag>    )},props: {    level: {        type: Number,        required: true    }}

复制代码

发布于: 刚刚阅读数: 4

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

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

前言

渲染函数

jsx

安装

Augus

评论