1.前言
在使用vue开发的项目中，我们大多使用template（模板语法）去构建页面。在大量vue指令的加持下，使用模板语法构建页面会很方便，快捷。但是，有些情况下，使用它会带来一些麻烦，那么这时候，不妨试试jsx语法了。
2.动态生成标题标签
这个例子，就是vue官网提供的一个例子，我这边简单说下。假如有个需求：写一个组件，用于动态生成标题标签。使用模板语法，可能是这样的一种写法：通过传入prop来动态控制所需标题标签，HTML的标题标签（h1-h6）
（1）模板写法
<anchored-heading :level="1">Hello world!</anchored-heading>
具体如下：
<h1 v-if="level === 1">
<slot></slot>
</h1>
<h2 v-else-if="level === 2">
<slot></slot>
</h2>
<h3 v-else-if="level === 3">
<slot></slot>
</h3>
<h4 v-else-if="level === 4">
<slot></slot>
</h4>
<h5 v-else-if="level === 5">
<slot></slot>
</h5>
<h6 v-else-if="level === 6">
<slot></slot>
</h6>
分析：可以看到，有大量重复代码。
（2）jsx写法
<script>
export default {
name: 'Child',
data () {
return {
num: 1
}
},
methods: {
},
computed: {},
mounted () {},
render () {
const H = 'h' + this.num // 动态控制变量num就行了
return <H>{ this.$slots.default }</H>
}
}
</script>
<style scoped lang="less">
</style>
分析：这一对比，是不是简洁了许多，哈哈哈~~。注意：用于生成标签的变量名，必须是首字母大写的变量，因为小写的变量会被识别为HTML内置标签，具体看react官网
3.总结
既然如此，那么我们就不能模板语法一把梭了，要根据具体业务场景决定使用哪个语法。 jsx特点：
- 更偏重逻辑的处理。
- 更细粒度的控制交互细节，比如：使用一个首字母大写的变量，HTML标签可动态生成。
- 拥有js完全编程能力，一切可以变量化，这样理解吧。
模板语法：
- 主要用于快速构建页面，不方便写入较复杂的逻辑处理。
- 使用上更局限于vue本身的指令api，无法做到编码随心所欲。
4.后续
感觉总结的有点浅显，哈哈哈~~。后面遇到具体问题，再做总结了。如有问题，欢迎大家指正。
