目录
Vue 3 支持两种模板语法：JSX 和 Template。它们都有自己的优缺点和适用场景。
JSX 是一种 JavaScript 语法扩展，它允许开发者在 JavaScript 代码中嵌入 HTML。JSX 代码在编译时会被转换成普通的 JavaScript 代码，这样就可以被浏览器或者 Node.js 运行环境识别和执行。
语法区别
插值使用
在 JSX 中，可以使用大括号 {} 来插入变量或表达式：
const name = 'John';
const greeting = <div>Hello, {name}!</div>;
在 Template 中，则使用双花括号 { {}}：
<template>
<div>Hello, {
{name}}!</div>
</template>
条件循环
在 JSX 中，可以使用 JavaScript 的条件语句和循环语句，例如 if、for、while 等：
const items = [1, 2, 3];
const list = (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
在 Template 中，则使用指令来实现条件语句和循环语句，例如 v-if、v-for、v-while 等：
<template>
<ul>
<li v-for="item in items" :key="item">{
{item}}</li>
</ul>
</template>
传递属性和事件
在 JSX 中，可以直接将 JavaScript 对象作为 props 传递给组件,也可以直接将事件处理函数作为 props 传递给组件：
const person = { name: 'John', age: 30 };
const myComponent = <MyComponent {...person} />;
const handleClick = () => console.log('Clicked!');
const myButton = <MyButton onClick={handleClick} />;
在 Template 中，则使用 v-bind 来传递属性和 v-on 来绑定事件：
<template>
<my-component :name="person.name" :age="person.age"></my-component>
<my-button @click="handleClick"></my-button>
</template>
自定义组件引入
在 JSX 中，可以直接使用组件的名称引入：
import MyComponent from './MyComponent';
const App = () => <MyComponent />;
在 Template 中，则需要使用 kebab-case 的方式引入，并在组件内使用 PascalCase 的方式：
<template>
<my-component></my-component>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent,
},
};
</script>
其他区别
使用方式：
- JSX：需要在 JavaScript 代码中直接编写 HTML 标签和属性。
- Template：需要将 HTML 模板写在 Vue 的 template 标签中或者单文件组件的 template 标签中。
类型检查：
- JSX：由于是在 JavaScript 代码中直接编写 HTML 标签和属性，可以更容易地进行类型检查。
- Template：由于是在 HTML 模板中使用 Vue 的指令等语法特性，类型检查可能会更加困难。
IDE 支持：
- JSX：由于是在 JavaScript 代码中直接编写 HTML 标签和属性，常见的 JavaScript IDE 工具都可以提供良好的语法高亮和代码提示等功能。
- Template：由于是在 HTML 模板中使用 Vue 的指令等语法特性，需要使用专门的 Vue 插件来提供语法高亮和代码提示等功能。
总结
JSX 语法适合有一定 React 开发经验的开发者，或者需要更加灵活的语法的场景。而 Template 语法适合大多数开发者，特别是在开发简单的业务组件时。