vue用template還是JSX？

各自特點

template

• 模板語法（HTML的擴展）
• 數據綁定使用Mustache語法（雙大括號）

<span>{{title}}<span>

JSX

• JavaScript的語法擴展
• 數據綁定使用單引號

<span>{title}<span>

vue官方建議

Vue官方建議使用template模板，但是 ：

“更抽象一點來看，我們可以把組件區分為兩類：一類是偏視圖表現的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在后者中使用 JSX 或渲染函數。這兩類組件的比例會根據應用類型的不同有所變化，但整體來說我們發現表現類的組件遠遠多於邏輯類組件。”

也就是說，在一些特定場景下可以建議使用JSX語法。

JSX語法如何在vue中使用

先看下template的情況

<!--nav-tmpl.vue-->
<template>
  <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>
</template>
<script>
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  }
};
</script>

是不是很多v-if-else 看的眼花繚亂？

別着急，來看jsx大法。

// nav-jsx.jsx
export default {
  props: {
    level: {
      type: Number,
      default: 1
    }
  },
  render: function(h) {
    const Tag = `h${this.level}`;
    return <Tag>{this.$slots.default}</Tag>;
  }
};

是不是簡潔了許多？！

jsx組件使用的方式和vue組件相同，先導入，然后components注冊，就可以使用了。

<template>
  <div class="demo">
    <Nav :level="2">標題</Nav>
    <navjsx :level="1">標題</navjsx>
  </div>
</template>

<script>
import Nav from "@/components/Nav.vue";
import navjsx from "@/components/nav.jsx";
export default {
  components: { Nav,navjsx },
  data() {
    return {}
  }
};

template和jsx混用

我們也可以混用template和jsx語法。通過在components中注冊一個函數式組件，渲染jsx語法的標簽。

<template>
  <div class="demo">
    <Nav :level="2">{{this.title}}</Nav>
    <navjsx :level="1">{{this.title}}</navjsx>
    <VNodes :vnodes="showJSX(1)" />
  </div>
</template>

<script>
import Button from "@/components/Button.vue";
import Nav from "@/components/Nav.vue";
import navjsx from "@/components/nav.jsx";
export default {
  components: {
    Button,Nav,navjsx,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data() {
    return {
      title: "標題",
    };
  },
  methods: {
      showJSX(level) {
          const Tag = `h${level}`;
          return <Tag>{this.title}</Tag>;
      }
  },
</script>