Lihat 3 soalan temuduga yang mesti ditanya ini untuk menguji penguasaan Vue anda!

Artikel ini akan berkongsi dengan anda 3 Vue soalan temuduga yang mesti ditanya untuk menguji penguasaan anda terhadap Vue dan lihat jika anda boleh menjawabnya dengan betul!

Soalan 1: Apakah perbezaan antara v-show dan v-if?

Soalan ini adalah untuk mengkaji asas Vue penemuduga Secara umumnya, sesiapa yang telah menggunakan Vue pasti akan menggunakan v-show dan v-if. (Belajar perkongsian video: tutorial video vue) Arahan

v-if digunakan untuk menghasilkan kandungan secara bersyarat dan v-show juga digunakan untuk memaparkan elemen secara bersyarat.

Elemen yang menggunakan v-show akan dipaparkan dan dikekalkan dalam DOM, dan paparan CSS akan digunakan untuk mengawal paparan dan penyembunyian elemen. v-show tidak menyokong elemen <template>, begitu juga v-else.

Menggunakan v-if ialah pemaparan bersyarat "benar", di mana pendengar dan subkomponen acara elemen dimusnahkan dan dibina semula. v-if juga malas Jika syarat awal palsu, ia tidak akan dipaparkan dan pemaparan pertama tidak akan dicetuskan sehingga ia menjadi benar. Dan v-show akan membuat tanpa mengira keadaan, dan mengawal paparan dan bersembunyi mengikut atribut paparan.

Secara umumnya, v-if mempunyai overhed pensuisan yang lebih besar, manakala v-show hanya mempunyai overhed pemaparan awal Jika elemen perlu ditukar dengan kerap, gunakan v-show Jika keadaan jarang berubah, gunakan v- jika lebih baik.

Soalan 2: Apakah prinsip model v? Arahan

v-model digunakan terutamanya untuk melaksanakan pengikatan dua hala data pada <input>, <select>, <textarea> elemen bentuk atau komponen. Ia tidak begitu ajaib, ia hanya mendengar peristiwa input pengguna untuk mengemas kini data.

v-model akan mencetuskan peristiwa berbeza berdasarkan elemen berbeza:

• elemen teks dan kawasan teks menggunakan peristiwa input
• kotak semak / radio dan pilih Gunakan change acara;

Ambil borang input sebagai contoh:

<input v-model=&#39;something&#39;>

<!-- 等价于 -->

<input v-bind:value="something" v-on:input="something = $event.target.value">

Jika dalam komponen tersuai:

<!-- 父组件： -->
<ModelChild v-model="message"></ModelChild>

<!-- 子组件： -->
<template>
  <div>{{value}}</div>
</template>

<script>
  export default {
    props:{
      value: String
    },
    methods: {
      test1(){
         this.$emit('input', '小红')
      },
    },
  }
</script>

dalam komponen induk , Ubah suai nilai mesej dan medan nilai prop dalam komponen anak akan ditukar secara automatik Jika peristiwa input dicetuskan dalam komponen anak, nilai mesej dalam komponen induk juga akan ditukar.

Soalan 3: Apakah cara komunikasi antara komponen Vue?

Soalan ini juga merupakan soalan yang sangat biasa dalam temu duga. Semakin banyak cara anda boleh menjawabnya, semakin mahir anda dalam Vue. Secara umumnya, komunikasi antara komponen dibahagikan secara kasar kepada tiga jenis: komunikasi komponen bapa-anak, komunikasi komponen datuk-cucu dan komunikasi komponen saudara lelaki Mari kita lihat secara berasingan:

• . props / $emit Sesuai untuk komunikasi antara komponen ibu bapa dan anak

  • Ini juga merupakan kaedah komunikasi data paling asas bagi Vue Jika anda tidak mengetahui perkara ini, anda tidak akan dapat melakukannya bercakap mengenainya kemudian.

• ref dan $parent / $children sesuai untuk komunikasi antara komponen ibu bapa dan anak

  • ref jika digunakan pada komponen , anda boleh mendapatkan objek contoh komponen dan mengendalikan data
  • $parent / $children: Anda juga boleh mengakses objek contoh ibu bapa/anak dan melakukan operasi data

• EventBus （$emit / $on） Sesuai untuk komunikasi komponen antara bapa dan anak, datuk dan cucu serta saudara lelaki

  • Kaedah ini menggunakan contoh Vue kosong di tempat kejadian sebagai pusat acara dan menggunakannya untuk mencetuskan acara dan mendengar acara untuk membolehkan komunikasi antara mana-mana komponen.
  • Terdapat banyak keburukan dalam menggunakan EventBus cara ini tidak disyorkan untuk semua orang menggunakannya dalam projek.

• $attrs/$listeners Sesuai untuk komunikasi komponen datuk-cucu

  • $attrs: Mengandungi skop induk Pengikatan dan peristiwa harta tidak digunakan sebagai prop komponen dan acara tersuai, dan boleh dihantar ke komponen dalaman melalui v-bind="$attrs".
  • $listeners: Mengandungi pendengar acara v-on (tanpa .pengubah suai asli) dalam skop induk. Ia boleh disalurkan ke dalam komponen dalaman melalui v-on="$listeners". Nota: Dialih keluar dalam Vue 3. Pendengar acara kini menjadi sebahagian daripada $attrs.

• provide / inject Sesuai untuk komunikasi komponen datuk-cucu

  • Sediakan pembolehubah melalui penyediaan pada komponen datuk, dan maka dalam Pembolehubah disuntik melalui suntikan dalam komponen cucu.

• Vuex sesuai untuk komunikasi komponen antara bapa dan anak lelaki, datuk dan cucu serta adik beradik lelaki

  • Vuex direka khusus untuk menyelesaikan masalah pengurusan negeri dalam aplikasi Vue.

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

Atas ialah kandungan terperinci Lihat 3 soalan temuduga yang mesti ditanya ini untuk menguji penguasaan Vue anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!