Explication détaillée de la façon d'utiliser JSX dans Vue3+Vite

Comment utiliser JSX dans Vue+Vite ? L'article suivant vous présentera comment utiliser JSX dans Vue3+Vite. J'espère qu'il vous sera utile !

【Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

Introduction à JSX

JSX (JavaScript et XML) est une extension de syntaxe de HTML-in-JavaScript, introduite pour la première fois dans Réagissez Entrée. JSX est un excellent moyen de décrire comment une interface utilisateur doit se comporter, essentiellement comment elle doit interagir. JSX est une extension de la syntaxe JavaScript, donc du code de type HTML peut coexister avec JS. Par exemple :

const button = <MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

La constante du bouton est appelée une expression JSX. Nous pouvons l'utiliser pour afficher la balise 3c45ec991a34a5c936634b431885c5ff dans notre application. Les navigateurs ne peuvent pas lire et analyser JSX directement. L'expression JSX ressemble à ceci après avoir été compilée (avec des outils comme Babel ou Parcel) : 3c45ec991a34a5c936634b431885c5ff 标签。浏览器是无法读取直接解析 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 编译成为其设置过程的一部分。除非您愿意，否则不必自己配置编译。如果你想测试一些特定的 JSX 会转换成什么样的 JavaScript，你可以尝试使用 在线的 Babel 编译器。

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

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById(&#39;root&#39;));
root.render(<Hello toWhat="World" />);

可以编写为不使用 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）处理。

d477f9ce7bf77f53fbcf36bec1b69b7a 元素包含了所有的标记结构和组件的展示逻辑。template 可以包含任何合法的 HTML，以及 Vue 特定的语法。通过设置 d477f9ce7bf77f53fbcf36bec1b69b7a 标签的 lang 属性，例如可以通过设置 4b3892c5b6f20c7a5b49316152e126a5 就可以在使用 Pug 模板来替代标准 HTML。

而 .vue 文件中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签包含组件中所有的非显示逻辑，并且需要默认导出一个 JS 对象。该对象是在本地注册组件、定义属性、处理本地状态、定义方法等的地方。在构建阶段这个包含了 template 模板的对象会被处理和转换成为一个有 render() 函数的 Vue 组件。

组件的 CSS 样式写在 c9ccee2e6ea535a969eb3f532ad9fe89 标签里，如果添加了 scoped 属性，Vue 会把样式的范围限制到单文件组件的内容里。这是类似于 CSS-in-JS 的解决方案，只不过允许书写纯粹的 CSS。如果通过 CLI 创建项目时选择了 CSS 预处理器，则可以将 lang 属性添加到 c9ccee2e6ea535a969eb3f532ad9fe89

npm i @vitejs/plugin-vue-jsx -D

En fait, JSX n'est que du sucre syntaxique pour la fonction React.createElement(component, props, ...children). Vous pouvez ignorer l'étape de compilation en écrivant vous-même l'interface utilisateur à l'aide de React.createElement(). Cependant, cela perd les avantages déclaratifs de JSX et le code devient plus difficile à lire. La compilation est une étape supplémentaire dans le processus de développement, mais de nombreux développeurs de la communauté React pensent que la lisibilité de JSX en vaut la peine. De plus, les outils populaires intègrent la compilation JSX vers JavaScript dans leur processus de configuration. Vous n'êtes pas obligé de configurer la compilation vous-même, sauf si vous le souhaitez. Si vous souhaitez tester dans quel type de JavaScript un JSX spécifique sera converti, vous pouvez essayer d'utiliser Compilateur Babel en ligne

.

React ne nécessite pas l'utilisation de JSX. Ne pas utiliser JSX dans React est plus pratique lorsque vous ne souhaitez pas configurer la compilation JSX dans votre environnement de build. Par exemple, le code écrit en JSX :

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

peut être écrit sous forme de code sans JSX : 🎜

import HelloWorld from './HelloWorld.vue'
export default {
  setup() {
    return () => <HelloWorld msg="11" />;
  },
};

🎜Utilisation de JSX dans Vue3🎜🎜🎜Vue utilise des composants de fichier unique, mettez le modèle le modèle, les scripts associés et le CSS sont intégrés dans un seul fichier se terminant par .vue. Ces fichiers sont finalement traités par des outils de packaging ou de build JS (par exemple Webpack, Vite). L'élément 🎜

🎜d477f9ce7bf77f53fbcf36bec1b69b7a contient toute la structure de balisage et la logique d'affichage des composants. Le modèle peut contenir n'importe quel HTML valide, ainsi qu'une syntaxe spécifique à Vue. En définissant l'attribut lang de la balise d477f9ce7bf77f53fbcf36bec1b69b7a, par exemple, vous pouvez l'utiliser en définissant 885a744315c58b9af712dd38b4d61be6 Modèles Pug pour remplacer le HTML standard. 🎜🎜La balise <code>3f1c4e4b6b16bbbd69b2ee476dc4f83a dans le fichier .vue contient toute la logique de non-affichage du composant et doit exporter un objet JS par défaut. Cet objet est l'endroit où les composants sont enregistrés localement, les propriétés sont définies, l'état local est géré, les méthodes sont définies, etc. Pendant la phase de construction, cet objet contenant le modèle sera traité et converti en un composant Vue avec une fonction render(). 🎜🎜Le style CSS du composant est écrit dans la balise c9ccee2e6ea535a969eb3f532ad9fe89 Si l'attribut scoped est ajouté, Vue limitera la portée du style au contenu. du composant mono-fichier. Il s'agit d'une solution similaire à CSS-in-JS, mais qui permet d'écrire du CSS pur. Si vous avez sélectionné le préprocesseur CSS lors de la création de votre projet via la CLI, vous pouvez ajouter l'attribut lang à la balise c9ccee2e6ea535a969eb3f532ad9fe89 afin que Webpack puisse traiter le contenu lors de la construction. temps. 🎜🎜🎜Bien que jsx ait été introduit pour la première fois par React, en fait, la syntaxe JSX ne définit pas la sémantique d'exécution et peut être compilée sous diverses formes de sortie. Si vous avez déjà utilisé la syntaxe JSX, veuillez noter que la méthode de compilation JSX de 🎜Vue est différente de la méthode de compilation JSX dans React🎜, vous ne pouvez donc pas utiliser la compilation JSX de React dans les applications Vue. Certaines différences notables par rapport à la syntaxe React JSX incluent : 🎜

• 可以使用 HTML attributes 比如 class 和 for 作为 props - 不需要使用 className 或 htmlFor。
• 传递子元素给组件 (比如 slots) 的方式不同。

Vue 的类型定义也提供了 TSX 语法的类型推导支持。当使用 TSX 语法时，确保在 tsconfig.json 中配置了 "jsx": "preserve"，这样的 TypeScript 就能保证 Vue JSX 语法编译过程中的完整性。

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

vite 官方提供了官方的插件来支持在 vue3 中使用 jsx/tsx，直接安装就行。

npm i @vitejs/plugin-vue-jsx -D

安装完之后在 vite.config.js 文件中的 plugins 字段中添加 jsx 支持：

import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [
    vueJsx(),
  ]
})

这样就可以在项目中使用 jsx/tsx 了。

新建 jsx 文件

在项目中新建 jsx 或 tsx 后缀的文件，语法和 js 文件类似，但是和 .vue 文件中的 3f1c4e4b6b16bbbd69b2ee476dc4f83a 标签一样需要默认导出一个 JS 对象。该对象是在本地注册组件、定义属性、处理本地状态、定义方法等的地方。

import HelloWorld from './HelloWorld.vue'
export default {
  setup() {
    return () => <HelloWorld msg="11" />;
  },
};

语法

1、插值。与 vue 模板语法中的插值一样，但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表达式，比如：2 + 2，user.firstName，formatName(user) 等。

// 模板语法
<span>{{ a + b }}</span>

// jsx/tsx
<span>{ a + b }</span>

2、class 类名绑定。有两种方式，使用模板字符串或者使用数组。

// 模板字符串
<div className={ `header ${ isBg ? &#39;headerBg&#39; : &#39;&#39; }` }>header</div>
// 数组
<div class={ [ &#39;header&#39;, isBg && &#39;headerBg&#39; ] } >header</div>

3、style 样式绑定。需要使用双大括号。

const color = 'red'
const element = <sapn style={{ color, fontSize: &#39;16px&#39; }}>style</sapn>

4、条件渲染。由于 jsx 本身具有 js 语法，所以不再需要使用 v-if 指令，使用 if/else 和三元表达式都可以实现。但是支持 v-show 指令。

const element = (name) => {
  if (name) {
    return <h1>Hello, { name }</h1>
  } else {
    return <h1>Hello, Stranger</h1>
  }
}

const element = icon ? <span class="icon"></span> : null;
// 以上代码等效于：
const element = icon && <span class="icon"></span>;

5、列表渲染。同样，由于 jsx 本身具有 js 语法，所以不再需要使用 v-for 指令，使用 JS 数组的 map 方法即可。

const listData = [
   {name: 'Tom', age: 18},
   {name: 'Jim', age: 20},
   {name: 'Lucy', age: 16}
]
return () => (
   <div>
     <div class={&#39;box&#39;}>
       <span>姓名</span>
       <span>年龄</span>
     </div>
   {
   prop.listData.map(item => <div class={&#39;box&#39;}>
       <span>{item.name}</span>
       <span>{item.age}</span>
     </div>
     })
   </div>
)

6、标签属性绑定。也是使用大括号包裹，不能使用 v-bind 指令。而 vue 组件中通过 7a49b8a1571104a37acffe1450d6cc1e16b28748ea4df4d9c2150843fecfba68 批量绑定标签属性，在 JSX 中需要使用 04eaf629e1aa69a83352c6b37941496316b28748ea4df4d9c2150843fecfba68。

const href = 'https://cn.vuejs.org/'
const element = <a href={href}>Vue3</a>

7、事件绑定。使用的也是 单大括号 {}，不过事件绑定不是以 @为前缀了，而是改成了 on，与原生相同。例如：click 事件是 onClick 或 onclick。

const confirm = () => {
  // 确认提交
}
<button onClick={confirm}>确定</button>

如果要带参数，需要使用箭头函数进行包裹：

const confirm = (name) => {
  // 确认提交
}
<button onClick={() => confirm(&#39;Are you sure&#39;)}>确定</button>

8、事件修饰符。需要使用 withModifiers 方法，接收两个参数，第一个参数是绑定的事件，第二个参数是需要使用的事件修饰符。

import { withModifiers, defineComponent, ref } from 'vue'

const App = defineComponent({
  setup() {
    const count = ref(0);

    const inc = () => {
      count.value++;
    };

    return () => (
      <div onClick={ withModifiers(inc, [&#39;self&#39;]) }>{ count.value }</div>
    );
  },
})
export default App

注意：Vue 模板中 ref 变量是可以直接解构的，但是在 jsx 中不行，需要添加 .value，比如上面的 { count.value }。

9、v-model 双向绑定。需要使用单大括号 {}。如果绑定属性则需要一个数组，第一个元素为绑定的值，第二个元素为绑定的属性。

// 绑定值
<input v-model="show" /> // vue
<input v-model={show.value} /> // jsx

// 绑定属性
<input v-model:prop="show" /> // vue
<input v-model={[show.value,&#39;prop&#39;]} /> // jsx

// 修饰符写法
<input v-model:prop.trim="show" /> // vue
<input v-model={[show.value,&#39;prop&#39;,[&#39;trim&#39;]]} /> // jsx

10、slot 插槽。jsx/tsx 中无法使用 slot 标签，定义插槽方式一：通过 setup 函数的第一个参数 ctx 上下文对象的 slots 的属性，setup 函数默认接收两个参数：

• props - 组件传入的参数对象。
• ctx - 上下文对象，上下文对象暴露了其他一些在 setup 中可能会用到的值，包括：
  • attrs - 透传的 Attributes（非响应式的对象，等价于 $attrs）。
  • slots - 插槽（非响应式的对象，等价于 $slots）。
  • emit - 触发事件的函数（等价于 $emit）。
  • expose - 暴露公共属性的函数。

如果解构了 props 对象，解构出的变量将会丢失响应性，因此推荐通过 props.xxx 的形式来使用其中的 props。如果确实需要解构 props 对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，可以使用 toRefs() 和 toRef() 这两个工具函数：

import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)

    // 或者，将 `props` 的单个属性转为一个 ref
    const title = toRef(props, 'title')
  }
}

ctx 上下文对象是非响应式的，可以安全地解构：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs 和 slots 都是响应式（有状态）的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过 attrs.x 或 slots.x 的形式使用其中的属性。此外，和 props 不同，attrs 和 slots 的属性都不是响应式的。如果想要基于 attrs 或 slots 的改变来执行副作用，那么应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容：

export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}

通过 ctx 上下文对象的 slots 的属性可以获取插槽对象后，就可以定义插槽了。

import { defineComponent } from 'vue'

export default defineComponent({
  setup(props, { slots }) { // 逻辑
    return () => {
      return <p>
     <button>{ slots.test?.() }</button>
     <button>{ slots.default?.() }</button>
     </p>
    }
  },
})

// 在引用的组件中
<template #test>slot-test</template>
<template #>slot-default</template>

定义插槽方式二：使用 renderSlot 函数。

import { renderSlot } from 'vue'

<button>
  { renderSlot(slots, &#39;default&#39;) }
</button>

而如果在 jsx 中使用插槽，可以直接通过标签属性 slot，或通过 v-slots 指令。

import HelloWorld from './HelloWorld'  
export default defineComponent({  
    setup() {  
        return () => (  
            <div class={&#39;box&#39;}>  
                <HelloWorld v-slots={{  
                    title: () => {  
                        return <p>我是title插槽</p>  
                    },  
                    default: () => {  
                        return <p>我是default插槽</p>  
                    }  
                }} />  
            </div>  
        )  
    }  
})

11、CSS Modules。引入局部样式，相当于 vue 组件中 c9ccee2e6ea535a969eb3f532ad9fe89 标签的 scoped 属性。

import styles from './index.module.scss'

<div class={styles.wrap}></div>

GitHub 源码

• Vue3 中自定义组件

（学习视频分享：vuejs入门教程、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!