vue jsx语法和template语法的对比

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.后续

感觉总结的有点浅显，哈哈哈~~。后面遇到具体问题，再做总结了。如有问题，欢迎大家指正。