Penjelasan terperinci tentang cara menggunakan JSX dalam Vue3+Vite

Bagaimana untuk menggunakan JSX dalam Vue+Vite? Artikel berikut akan memperkenalkan kepada anda cara menggunakan JSX dalam Vue3+Vite saya harap ia akan membantu anda!

[Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Pengenalan JSX

JSX (JavaScript dan XML), ialah sambungan sintaks HTML-dalam-JavaScript yang pertama kali diperkenalkan dalam React. JSX ialah cara yang bagus untuk menerangkan cara UI harus membentangkan intipati cara ia harus berinteraksi. JSX ialah lanjutan sintaks JavaScript, jadi kod seperti HTML boleh wujud bersama JS. Contohnya:

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

Pemalar butang dipanggil ungkapan JSX. Kami boleh menggunakan ini untuk memaparkan 3c45ec991a34a5c936634b431885c5ff teg dalam aplikasi kami. Pelayar tidak boleh membaca dan menghuraikan JSX secara langsung. Ungkapan JSX kelihatan seperti ini selepas disusun (dengan alatan seperti Babel atau Parcel):

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

Malah, JSX hanyalah sintaks React.createElement(komponen, props, ...children) gula berfungsi. Anda boleh melangkau langkah kompilasi dengan menulis UI sendiri menggunakan React.createElement(). Walau bagaimanapun, berbuat demikian kehilangan faedah pengisytiharan JSX dan kod menjadi lebih sukar untuk dibaca. Penyusunan ialah langkah tambahan dalam proses pembangunan, tetapi ramai pembangun dalam komuniti React percaya kebolehbacaan JSX adalah berbaloi. Selain itu, alatan popular menjadikan kompilasi JSX-ke-JavaScript sebahagian daripada proses persediaan mereka. Anda tidak perlu mengkonfigurasi kompilasi sendiri melainkan anda mahu. Jika anda ingin menguji beberapa JSX tertentu yang akan ditukar kepada JavaScript, anda boleh cuba menggunakan pengkompil Babel dalam talian.

React tidak memerlukan penggunaan JSX. Tidak menggunakan JSX dalam React adalah lebih mudah apabila anda tidak mahu mengkonfigurasi kompilasi JSX dalam persekitaran binaan. Contohnya, kod yang ditulis dalam 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" />);

boleh ditulis sebagai kod tanpa 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));

Menggunakan JSX dalam Vue3

Vue menggunakan komponen fail tunggal untuk menyepadukan templat, skrip berkaitan dan CSS ke dalam satu fail yang berakhir dengan .vue. Fail ini akhirnya diproses oleh alat pembungkusan atau binaan JS (cth. Webpack, Vite). Elemen

d477f9ce7bf77f53fbcf36bec1b69b7a mengandungi semua struktur penanda dan logik paparan komponen. Templat boleh mengandungi sebarang HTML yang sah, serta sintaks khusus Vue. Dengan menetapkan atribut d477f9ce7bf77f53fbcf36bec1b69b7a teg lang, sebagai contoh, anda boleh menggunakan templat Pug dan bukannya HTML standard dengan menetapkan 4b3892c5b6f20c7a5b49316152e126a5 .

Teg 3f1c4e4b6b16bbbd69b2ee476dc4f83a dalam fail .vue mengandungi semua logik bukan paparan dalam komponen dan perlu mengeksport objek JS secara lalai. Objek ini adalah tempat komponen didaftarkan secara tempatan, sifat ditakrifkan, keadaan setempat dikendalikan, kaedah ditakrifkan, dsb. Semasa fasa binaan objek yang mengandungi templat ini akan diproses dan ditukar menjadi komponen Vue dengan fungsi render(). Gaya CSS komponen

ditulis dalam teg c9ccee2e6ea535a969eb3f532ad9fe89 Jika atribut scoped ditambahkan, Vue akan mengehadkan skop gaya kepada kandungan komponen fail tunggal. Ini ialah penyelesaian yang serupa dengan CSS-in-JS, tetapi membenarkan penulisan CSS tulen. Jika anda memilih prapemproses CSS semasa membuat projek anda melalui CLI, anda boleh menambah atribut lang pada teg c9ccee2e6ea535a969eb3f532ad9fe89 supaya Webpack boleh memproses kandungan pada masa binaan.

Walaupun jsx pertama kali diperkenalkan oleh React, sintaks JSX sebenarnya tidak mentakrifkan semantik masa jalan dan boleh disusun ke dalam pelbagai bentuk output. Jika anda pernah menggunakan sintaks JSX sebelum ini, sila ambil perhatian bahawa kaedah kompilasi JSX Vue berbeza daripada kaedah kompilasi JSX dalam React, jadi anda tidak boleh menggunakan kompilasi JSX React dalam aplikasi Vue. Beberapa perbezaan ketara daripada sintaks React JSX termasuk:

• 可以使用 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入门教程、编程基础视频）

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara menggunakan JSX dalam Vue3+Vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!