vue jsx语法和template语法的对比

·  阅读 306

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

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

分类:
前端
标签: