Fungsi persediaan dalam Vue3: kaedah konfigurasi komponen teras Vue3

Dengan kemajuan berterusan dan perubahan teknologi bahagian hadapan, semakin ramai pembangun mula menggunakan Vue.js sebagai alat penting untuk pembangunan bahagian hadapan. Dalam versi terkini Vue.js, Vue3, fungsi persediaan telah menjadi kaedah konfigurasi komponen teras Vue3.

Apakah fungsi persediaan Vue3?

Dalam Vue3, setiap komponen mempunyai fungsi persediaan. Fungsi persediaan ialah fungsi kitaran hayat dalam Vue3 Fungsinya adalah untuk memulakan komponen. Fungsi persediaan dipanggil sebelum fungsi beforeCreate, yang menggantikan data, pengiraan, kaedah dan pilihan lain dalam Vue2 dalam beberapa aspek.

Apakah kelebihan fungsi persediaan?

Menggunakan fungsi persediaan Vue3 mempunyai kelebihan berikut:

1. Kod eksplisit dan ringkas: Vue3 telah mengukuhkan sokongannya untuk paradigma pengaturcaraan berfungsi Fungsi persediaan ialah fungsi Javascript tulen berharap untuk mendedahkan seberapa sedikit butiran dalaman Vue kepada pembangun yang mungkin. Oleh itu, dalam fungsi persediaan, anda boleh menggunakan sintaks ES6+ untuk menulis kod dengan lebih mudah.
2. Inferens jenis yang lebih baik: Fungsi persediaan menyediakan inferens jenis yang lebih baik. Memandangkan fungsi persediaan dipanggil sebelum komponen dimulakan, Vue3 boleh menaip-semak komponen dengan lebih tepat, yang boleh mengoptimumkan kod kami dengan lebih cekap.
3. Data responsif yang lebih baik: Dalam Vue2, untuk menjadikan data tertentu responsif, anda perlu menambahkan atribut ini pada data atau mentakrifkannya secara langsung dalam komponen. Walau bagaimanapun, dalam Vue3, anda boleh menggunakan fungsi ref dalam fungsi persediaan untuk mencipta data reaktif.

Bagaimana untuk menggunakan fungsi persediaan Vue3?

Pertama, kita perlu menggunakan fungsi createApp untuk mencipta contoh Vue:

const app = Vue.createApp({
  // ...
})

Seterusnya, kami mentakrifkan fungsi persediaan di dalam komponen dan menghantar parameter yang diperlukan ke dalam fungsi ini:

const component = {
  props: {
    title: String,
    content: String
  },
  setup(props) {
    // ...
  }
}

Perkara yang paling penting dalam fungsi persediaan ialah nilai pulangan, yang mengembalikan objek yang mengandungi data, kaedah, dsb. yang digunakan dalam komponen. Contohnya:

setup(props) {
  const title = Vue.ref(props.title)
  const content = Vue.ref(props.content)

  const setTitle = (newTitle) => {
    title.value = newTitle
  }

  const setContent = (newContent) => {
    content.value = newContent
  }

  return {
    title,
    content,
    setTitle,
    setContent
  }
}

Dalam contoh ini, kami mencipta dua tajuk dan kandungan data responsif melalui fungsi ref Kami juga menentukan dua kaedah setTitle dan setContent dalam fungsi persediaan dan mengembalikannya kepada komponen .

Ringkasan

Fungsi persediaan dalam Vue3 ialah kaedah konfigurasi komponen teras Vue3 Ia mempunyai kelebihan kod eksplisit, minimalis, inferens jenis yang lebih baik dan data responsif yang lebih baik. Apa yang perlu diperhatikan apabila menggunakan fungsi persediaan ialah nilai pulangan mestilah objek, dan data, kaedah, dan lain-lain dalam objek perlu diproses secara responsif menggunakan fungsi ref dan fungsi reaktif. Akhir sekali, saya harap artikel ini dapat membantu pemula lebih memahami cara menggunakan fungsi persediaan dalam Vue3.

Atas ialah kandungan terperinci Fungsi persediaan dalam Vue3: kaedah konfigurasi komponen teras Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!