JSX 和 template 的区别

本质相同

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

JSX 和 template 语法的区别

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

JSX 和 template 本质相同

• 都会被编译为 js 代码 （render 函数）

例子

插值使用

在 template 中用 {{}}

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

在 JSX 中用 {} 和 .value

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

自定义组件引入

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

<jsx-demo></jsx-demo>
  <!--  或 -->
<JsxDemo></JsxDemo>
<script>
import JsxDemo from "@/components/JsxDemo.jsx"
</script>

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

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

传递属性和事件

在 template 中使用 :a 和 @change 方式

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

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

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

条件和循环

在 template 中使用 v-if 和 v-for

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

在 JSX 中可以使用 if 和 map 等 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>
  </>
}