你有没有用过Vue.js的渲染函数和JSX？

前言

真的，一定会有一些小伙伴直到完整了几个项目都做完了，却从未用过渲染函数和JSX，所以一旦遇到需要复杂处理的模板元素，其中就会夹杂大量的v-if、v-else、v-else-if……以及各种三元操作符。是时候了解一下渲染函数和JSX了，即便Vue 3在几个月后就要问世，学习一下JSX绝对没有坏处，也不会过时，JSX是React一直推崇的描述模板的方法，算是业界通用的一项技术。

官网

https://cn.vuejs.org/v2/guide/render-function.html

为什么有官网介绍，还要来个教程

官网教程是基于运行时版本的Vue.js，按照全局组件的模式为例，而我们通常是使用完整版的Vue.js，且使用单文件组件，所以本文以单文件组件为例说明。

渲染函数和JSX适用场景

当你模板中存在大量条件判断时，就适用渲染函数和JSX。比如在class中、style中、文本中、属性中存在条件判断时，会将模板搞得很冗长，而且不容易阅读，这时候适用渲染函数和JSX会让代码变得很清晰。

Hello World

1. 在components文件夹创建HelloWorld.vue，内容是：

2. 父组件按照常规的子组件调用方法调用即可：

xyz

JS代码从略。

3. 效果是渲染出一段DOM：abc。

4. 讲一下HelloWorld.vue。其中props和methods不解释，只说render。render负责渲染一段DOM，前提是要给它传入VDOM，而createElement就是负责构建VDOM，我们只需要关心createElement的参数就行了。这里官网都有介绍，简单说：

   第一个参数负责声明顶级元素的标签名，也就是说，标签名到底是button还是div还是h2还是span还是其他什么。

   第二个参数就是对顶级元素的所有修饰，官网都有解释，这里只列一下：

   • class
   • style
   • attrs
   • props
   • domProps
   • on
   • nativeOn
   • directives
   • scopedSlots
   • slot
   • key
   • ref
   • refInFor

   第三个参数是可选的，是一个数组，每一个数组元素也就是一个子元素，如果是文本，直接写字符串，如果是元素，就要继续写create('标签名', {修饰对象})，这样一层一层写下去。从实践说，如果层数太多，反而不如单文件的