Skip to content

JSX 和 template 的区别

本质相同

  • 语法上有很大区别
  • 本质是相同的
  • 具体示例:插值,自定义组件,属性和事件,条件和循环

JSX 和 template 语法的区别

  • JSX 本质上就是 js 代码,可以使用 js 的任何能力
  • template 只能嵌入简单的 js 表达式,其他需要指令,如 v-if
  • JSX 已经成为 ES 规范,template 还是 Vue 自家规范

JSX 和 template 本质相同

  • 都会被编译为 js 代码 (render 函数)

例子

插值使用

在 template 中用

html
<template>
  <p>JSX Demo {{ name }}</p>
</template>

在 JSX 中用 {}.value

js
const render = () => {
  return <p>Jsx Demo {name.value}</p>;
};

自定义组件引入

在 template 中可以使用 驼峰命名-连接符

html
<jsx-demo></jsx-demo>
<!--  或 -->
<JsxDemo></JsxDemo>
<script>
  import JsxDemo from '@/components/JsxDemo.jsx';
</script>

在 JSX 中引入 组件名称使用名称 必须一样

js
import Child from './JsxChild.jsx';
export default defineComponent(() => {
  const render = () => {
    return (
      <>
        <Child></Child>
      </>
    );
  };
  return render;
});

传递属性和事件

在 template 中使用 :a@change 方式

html
<template>
  <jsx-child :a="name" @change="change"></jsx-child>
</template>

在 JSX 中都一样,使用 {} 配合原生 js 语法

js
return (
  <>
    <Child a={name.value + 100} onChange={change}></Child>
  </>
);

条件和循环

在 template 中使用 v-ifv-for

html
<template>
  <p v-if="name">Jsx demo</p>
  <ul>
    <li v-for="item in list" :key="item">{{ item }}</li>
  </ul>
</template>

在 JSX 中可以使用 ifmap 等 js 语法

js
const name = ref(101);
const state = reactive({
  list: [1, 2, 3],
});
const render = () => {
  if (name.value < 100) {
    return <>{name.value}</>;
  }
  return (
    <>
      <p>Jsx Demo {name.value}</p>
      {name.value > 100 && <Child a={name.value + 1}></Child>}
      <ul>
        {state.list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </>
  );
};

基于 MIT 许可发布