浅析：如何在Vue3+Vite中使用JSX

目录

0. Vue3，Vite，JSX 三者的关系

JSX介绍

在 Vue3 中使用 JSX

安装插件（@vitejs/plugin-vue-jsx）

新建 jsx 文件

语法

补充知识：注意事项

---

0. Vue3，Vite，JSX 三者的关系

Vue3、Vite 和 JSX 都是现代前端开发中常用的技术。

Vue3 是一款流行的 JavaScript 前端框架，它通过提供组件化开发的方式，使得构建复杂的用户界面变得更加容易。Vue3 还引入了一些新的功能，如更快的渲染速度、更好的类型支持以及更好的可组合性，使得开发人员可以更加轻松地构建高质量的应用程序。

Vite 是一个基于现代浏览器原生 ES 模块导入的开发服务器，旨在提供快速的开发体验和优化的构建结果。Vite 支持热重载，能够在开发过程中快速反映代码更改，并且能够快速构建和打包代码，使得部署应用程序变得更加容易。

JSX 是一种在 JavaScript 语法基础上的语法扩展，结合了 HTML 和 JavaScript 的功能。它提供了一种声明式的方式来描述 UI 应该呈现出其交互本质的形式。与传统的 JavaScript 操作 DOM 相比，使用 JSX 使开发人员可以更轻松地编写组件化的代码，可以与 Vue3 配合使用。

JSX介绍

JSX（JavaScript 和 XML）是一种语法扩展，它结合了 HTML 和 JavaScript 的功能。最初，它是在 React 中引入的，用于描述 UI 应该呈现出其交互本质的形式。由于 JSX 是在 JavaScript 语法上的扩展，因此类似于 HTML 的代码可以与 JavaScript 代码混合使用。例如：

const button = 
  Click Me

 该 button 常量称为 JSX 表达式。可以使用它在我们的应用程序中渲染  标签。浏览器是无法读取直接解析 JSX 的。JSX 表达式经过（ Babel 或 Parcel 之类的工具）编译之后是这样的：

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

 实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。可以使用 React.createElement() 自己编写 UI 来跳过编译步骤。但是，这样做会失去 JSX 的声明性优势，并且代码变得更难以阅读。编译是开发过程中的一个额外步骤，但是 React 社区中的许多开发人员都认为 JSX 的可读性值得。另外，流行的工具使 JSX-to-JavaScript 编译成为其设置过程的一部分。除非您愿意，否则不必自己配置编译

React 并不强制要求使用 JSX。当你不想在构建环境中配置有关 JSX 编译时，不在 React 中使用 JSX 会更加方便。例如，用 JSX 编写的代码：

class Hello extends React.Component {
  render() {
    return 
Hello {this.props.toWhat}
;
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

 可以编写为不使用 JSX 的代码：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

在 Vue3 中使用 JSX

Vue 使用单文件组件，把 template 模板、相关脚本和 CSS 一起整合放在 .vue 结尾的一个单文件中。这些文件最终会通过 JS 打包或构建工具（例如 Webpack、Vite）处理。