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

<🎜. > dalam vite.config Konfigurasikan dalam .js:

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

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

Kemudian anda boleh menggunakannya dalam komponen Vue:

// 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.

Atau fail jsx:

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

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

Templat vs JSX

Bagaimanakah kita harus memilih JSX dan templat?

Kelebihan templat: Sintaks templat adalah tetap, hanya v-if, v-for dan sebagainya. Kami menulis mengikut sintaks format tetap ini, supaya Vue3 boleh mengoptimumkan teg statik dengan mudah pada tahap kompilasi dan mengurangkan proses Diff. Contohnya, promosi statik, teg jenis, pengimbangan struktur pokok, dll. boleh meningkatkan prestasi masa jalan DOM maya. Ini juga merupakan sebab penting mengapa DOM maya Vue 3 lebih pantas daripada Vue 2.

Rujukan:

Mekanisme pemaparan Vue

Kelebihan JSX: templat tidak boleh menyokong keperluan yang lebih dinamik seperti JSX disebabkan oleh pengehadan sintaks. Ini juga merupakan kelebihan JSX berbanding templat.

JSX mempunyai kelebihan lain berbanding templat kerana ia boleh mengembalikan berbilang komponen dalam satu fail.

Jadi bagaimana untuk memilih?

Apabila merealisasikan keperluan perniagaan, beri keutamaan untuk menggunakan templat dan gunakan sepenuhnya pengoptimuman prestasi Vue sendiri. Komponen dengan keperluan dinamik yang lebih tinggi boleh dilaksanakan menggunakan JSX. (Sebagai contoh, kemudian, saya akan menggunakan JSX untuk melaksanakan penjana borang dinamik)

Ringkasan

Pertama sekali, kami biasanya menggunakan templat templat untuk mencipta aplikasi dalam projek , templat templat Akan disusun ke dalam fungsi pemaparan pemaparan semasa fasa binaan. Fungsi rendering ialah fungsi yang digunakan untuk mengembalikan DOM maya.

Kemudian kita sebenarnya boleh melangkau langkah ini dan terus menggunakan fungsi h untuk menjana DOM maya.

Pelaksanaan dalaman fungsi h sebenarnya ialah fungsi createVNode untuk menjana DOM maya Namun, memandangkan fungsi h sukar untuk ditulis, kami menggunakan JSX untuk menulisnya dengan lebih mudah dan cepat. Fungsi createVNode sebenarnya digunakan secara dalaman dalam JSX.

JSX tidak boleh dilaksanakan secara langsung dalam JavaScript Dalam projek vite, kami perlu memasang pemalam

@vitejs/plugin-vue-jsx

dan mengkonfigurasinya dengan sewajarnya.

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!