Artikel yang menerangkan secara terperinci cara menggunakan JSX dalam vue3

Bagaimana untuk menggunakan JSX dalam

vue? Artikel berikut akan memperkenalkan kepada anda cara menggunakan JSX dalam vue3. Saya harap ia akan membantu anda!

Dalam kebanyakan kes, Vue mengesyorkan menggunakan templat <template> sintaks untuk mencipta aplikasi.

Dalam pembangunan projek Vue 3, templat ialah kaedah penulisan lalai Vue 3. Walaupun templat kelihatan seperti HTML, Vue sebenarnya menghuraikan templat ke dalam fungsi pemaparan Kemudian, apabila komponen sedang berjalan, fungsi pemaparan mengembalikan DOM maya. [Belajar perkongsian video: tutorial video vue, video bahagian hadapan web]

Walau bagaimanapun, dalam beberapa senario penggunaan, kami benar-benar perlu menggunakan keupayaan pengaturcaraan lengkap JavaScript. Di sinilah fungsi pemaparan berguna.

fungsi h

Vue menyediakan fungsi h() untuk mencipta dom maya vnodes. Contoh berikut: Bagaimana untuk menggunakan

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

dalam komponen?

Sebelum ini apabila API gubahan digunakan dengan templat, nilai pulangan cangkuk setup() telah digunakan untuk mendedahkan data kepada templat. Tetapi apabila menggunakan h(), cangkuk setup() mengembalikan fungsi pemaparan :

import { ref, h } from 'vue'

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // 返回渲染函数
    return () => h('div', props.msg + count.value)
  }
}

fungsi h tulisan tangan, yang boleh mengendalikan adegan yang lebih dinamik. Tetapi jika ia adalah adegan yang kompleks, fungsi h sangat menyusahkan untuk ditulis, dan anda perlu menukar semua atribut kepada objek sendiri. Dan apabila komponen bersarang, objek akan menjadi sangat kompleks. Walau bagaimanapun, kerana fungsi h juga mengembalikan DOM maya, adakah terdapat cara yang lebih mudah untuk menulis fungsi h? Jawapannya ya, caranya ialah JSX.

JSX

JSX ialah sambungan JavaScript seperti XML Dengannya, kami boleh mencipta vnod dengan cara yang mudah:

const vnode = <div id="app">hello</div>

Sintaks untuk menulis HTML dalam JavaScript ini dipanggil JSX, yang merupakan lanjutan sintaks JavaScript. Apabila kod di atas dijalankan terus dalam persekitaran JavaScript, ralat akan dilaporkan. Intipati JSX ialah gula sintaksis untuk kod berikut.

const vnode = createVnode('div',{id:"app"}, 'hello')

Malah, createVnode juga dipanggil di dalam fungsi h untuk mengembalikan DOM maya.

Jadi, bagaimana untuk menggunakan JSX dalam projek Vue?

Secara lalai, projek vue3 vite tidak menyokong jsx Jika anda mahu menyokong jsx, anda perlu memasang pemalam @vitejs/plugin-vue-jsx

Pasang

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

import vueJsx from "@vitejs/plugin-vue-jsx"; // 配置vue使用jsx

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

// render.vue
<script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(100);
    return () => <div>count is: {count.value}</div>;
  },
};
</script>

Nota: lang dalam skrip mesti ditukar kepada jsx.

// render.jsx
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div>jsx文件</div>
  }
})

Templat vs JSX

Rujukan:

Mekanisme pemaparan Vue

Ringkasan

@vitejs/plugin-vue-jsx

Akhir sekali, kelebihan dan kekurangan template dan JSX dibandingkan. Kelebihan templat ialah sintaksnya tetap dan mudah ditulis Pada peringkat kompilasi, Vue3 telah membuat banyak pengoptimuman untuk penyusunan templat. Kelebihan JSX ialah fleksibiliti Dalam sesetengah kes apabila keperluan dinamik tinggi, JSX telah menjadi konfigurasi standard.

Seperti kata pepatah, terdapat pengkhususan dalam industri.

(Tamat)

(Perkongsian video pembelajaran: Pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Artikel yang menerangkan secara terperinci cara menggunakan JSX dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!