面试官：在vue3中 jsx 和 template语法，你更推荐哪个？

目录

语法区别

插值使用

条件循环

传递属性和事件

自定义组件引入

其他区别

使用方式：

类型检查：

IDE 支持：

总结

Vue 3 支持两种模板语法：JSX 和 Template。它们都有自己的优缺点和适用场景。

JSX 是一种 JavaScript 语法扩展，它允许开发者在 JavaScript 代码中嵌入 HTML。JSX 代码在编译时会被转换成普通的 JavaScript 代码，这样就可以被浏览器或者 Node.js 运行环境识别和执行。

语法区别

插值使用

在 JSX 中，可以使用大括号 {} 来插入变量或表达式：

const name = 'John';
const greeting = 
Hello, {name}!
;

在 Template 中，则使用双花括号 {{}}：

条件循环

在 JSX 中，可以使用 JavaScript 的条件语句和循环语句，例如 if、for、while 等：

const items = [1, 2, 3];
const list = (
  

    {items.map((item) => (
      
{item}
    ))}
  
);

在 Template 中，则使用指令来实现条件语句和循环语句，例如 v-if、v-for、v-while 等：

传递属性和事件

在 JSX 中，可以直接将 JavaScript 对象作为 props 传递给组件,也可以直接将事件处理函数作为 props 传递给组件：

const person = { name: 'John', age: 30 };
const myComponent = ;

const handleClick = () => console.log('Clicked!');
const myButton = ;

在 Template 中，则使用 v-bind 来传递属性和 v-on 来绑定事件：

自定义组件引入

在 JSX 中，可以直接使用组件的名称引入：

import MyComponent from './MyComponent';

const App = () => ;

在 Template 中，则需要使用 kebab-case 的方式引入，并在组件内使用 PascalCase 的方式：

其他区别

使用方式：

• 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 语法适合大多数开发者，特别是在开发简单的业务组件时。