面试题：什么是 JSX？Vue 中怎么使用 JSX？

1. 什么是 JSX？

JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 代码中编写类似 HTML 的模板。它最初由 React 引入，但也可以在其他框架（如 Vue）中使用。

特点：

类似 HTML 的语法：可以直接在 JavaScript 中编写 HTML 标签。
JavaScript 表达式：可以在 JSX 中使用 {} 嵌入 JavaScript 表达式。
组件化：可以将 JSX 与组件结合使用，实现更灵活的模板逻辑。

示例：

const element = <h1>Hello, JSX!</h1>;

2. Vue 中如何使用 JSX？

Vue 默认使用模板语法，但也支持通过插件使用 JSX。以下是 Vue 中使用 JSX 的步骤：

方法 1：使用 `@vue/babel-preset-jsx`

@vue/babel-preset-jsx 是 Vue 官方提供的 Babel 插件，用于支持 JSX。

步骤：

安装插件：

   npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 Babel：
在 babel.config.js 中添加 @vue/babel-preset-jsx：

   module.exports = {
     presets: ['@vue/babel-preset-jsx'],
   };

在组件中使用 JSX：

   export default {
     data() {
       return {
         message: 'Hello, JSX!',
       };
     },
     render() {
       return <h1>{this.message}</h1>;
     },
   };

说明：

render 函数中使用 JSX 语法。
{} 用于嵌入 JavaScript 表达式。

方法 2：使用 `render` 函数

Vue 的 render 函数可以直接使用 JSX 语法，无需额外配置。

示例：

export default {
  data() {
    return {
      message: 'Hello, JSX!',
    };
  },
  render() {
    return (
      <div>
        <h1>{this.message}</h1>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    },
  },
};

说明：

render 函数中可以直接使用 JSX 语法。
事件处理函数通过 onClick 绑定。

方法 3：在单文件组件中使用 JSX

在 .vue 文件中，可以通过 <script> 标签的 lang 属性指定 JSX。

示例：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="jsx">
export default {
  data() {
    return {
      message: 'Hello, JSX!',
    };
  },
  render() {
    return <h1>{this.message}</h1>;
  },
};
</script>

说明：

在 <script> 标签中指定 lang="jsx"，即可使用 JSX 语法。

3. JSX 与 Vue 模板的对比

特性	JSX	Vue 模板
语法	类似 HTML，嵌入 JavaScript 表达式	类似 HTML，使用 Vue 指令
灵活性	高（纯 JavaScript）	较低（受限于模板语法）
学习成本	较高（需要熟悉 JavaScript）	较低（类似 HTML）
性能	较高（直接生成虚拟 DOM）	较低（需要编译）
适用场景	复杂逻辑、动态渲染	简单逻辑、静态内容

4. JSX 的优势

灵活性：可以直接使用 JavaScript 表达式和逻辑，适合复杂场景。
组件化：可以轻松实现高阶组件和动态渲染。
工具支持：与 TypeScript 和 Babel 集成良好，提供类型检查和代码提示。

5. 总结

JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的模板。
Vue 中使用 JSX：
- 通过 @vue/babel-preset-jsx 插件支持 JSX。
- 在 render 函数中直接使用 JSX。
- 在单文件组件中通过 lang="jsx" 使用 JSX。
适用场景：适合需要灵活性和复杂逻辑的场景。