37 soalan temuduga Vue biasa untuk meningkatkan rizab pengetahuan Vue anda!

Artikel ini meringkaskan dan berkongsi 37 soalan temuduga Vue biasa dengan anda, membantu anda menyatukan asas dan meningkatkan rizab pengetahuan Vue anda, hanya menghafalnya dan anda selesai!

Cadangan berkaitan: Ringkasan Soalan Temuduga Hadapan Besar 2022 (Koleksi)

1 Apakah pemahaman anda tentang MVVM?

Perhubungan pemetaan yang dipermudahkan, pengawal tersembunyi MVVM menyembunyikan lapisan kawalan berdasarkan MVC.

Vue bukan rangka kerja MVVM, ia ialah rangka kerja lapisan paparan. [Cadangan berkaitan: tutorial video vue.js]

ViewModal ialah jambatan yang mengaitkan data dengan paparan.

2. Bercakap tentang pemahaman anda tentang data responsif dalam Vue?

Apabila nilai tatasusunan dan jenis objek berubah, semua atribut ditambah dengan defineReactive dan defineProperty melalui kaedah getter dengan bantuan setter. Pengguna boleh melakukan beberapa operasi apabila mendapatkan dan menetapkan nilai.

Kecacatan: Hanya atribut paling luar boleh dipantau Jika ia berbilang lapisan, rekursi penuh diperlukan.

Kutipan tanggungan akan dilakukan dalam get (dep[watcher, watcher]) Kemas kini data akan dilakukan dalam set (beritahu, maklumkan pemerhati kemas kini)

3. Bagaimana untuk mengesan perubahan dalam tatasusunan dalam Vue?

Vue tidak menentukanProperty untuk tatasusunan, tetapi menulis semula 7 kaedah tatasusunan. Ia adalah:

• tekan
• anjakan
• pop
• splice
• nyah anjakan
• isih
• terbalikkan

Kerana kaedah ini akan mengubah tatasusunan itu sendiri.

Indeks dan panjang dalam tatasusunan tidak boleh dipantau.

4. Bagaimana untuk mengumpul tanggungan dalam Vue?

Apabila Vue dimulakan, ia akan disusun selepas dipasang. Hasilkan renderFunction.

Apabila nilai diperoleh, pemerhati akan dikumpul dan diletakkan di dep.

Apabila pengguna menukar nilai, pemerhati akan dimaklumkan untuk mengemas kini paparan.

5. Bagaimana untuk memahami prinsip penyusunan templat dalam Vue?

Inti masalah ini ialah cara menukar templat kepada fungsi render.

1. Tukar modul templat kepada buku tatabahasa ast - parserHTML
2. Tandakan tatabahasa statik (sesetengah nod tidak berubah)
3. Jana semula kod - codeGen, gunakan The with syntax membungkus rentetan

6. Bagaimanakah cangkuk kitaran hayat Vue dilaksanakan

Cangkuk kitaran hayat Vue ialah fungsi panggil balik, yang akan dipanggil apabila mencipta tika komponen? kaedah cangkuk. Cangkuk akan diproses secara dalaman dan fungsi cangkuk akan dikekalkan dalam bentuk tatasusunan.

7. Apakah kitaran hayat komponen Vue?

• beforeCreate dipanggil selepas permulaan instance, sebelum pemerhatian data dan konfigurasi acara dan acara pemerhati
• dibuat Instance telah dibuat Pada langkah ini, konfigurasi berikut selesai
  • Pemerhatian data
  • Pengendalian sifat dan kaedah
  • panggilan balik masa tonton/acara
  • $el belum dijana lagi
• sebelum Dipanggil sebelum dipasang, render belum dipanggil lagi
• el yang dipasang digantikan dengan vm.$el yang baru dibuat, dan dipanggil selepas dipasang pada instance
• sebelum Kemas kini dipanggil apabila data dikemas kini , berlaku sebelum Dom maya dipaparkan semula dan ditampal
• kemas kini Dom maya dipaparkan semula dan ditampal kerana perubahan data, selepas itu
• sebelumDestroy dipanggil sebelum instance dimusnahkan
• dimusnahkan dipanggil selepas instance dimusnahkan Selepas panggilan, semua dalam instance Vue akan dinyahikat, semua pendengar acara akan dialih keluar dan sub-instance ini akan dimusnahkan tidak akan dipanggil semasa pemaparan sebelah pelayan
• kekal hidup (diaktifkan & dinyahaktifkan)

8 Senario dan prinsip penggunaan vue.mixin?

The. fungsi mixin Vue adalah untuk mengabstraksi logik perniagaan awam, dan prinsipnya adalah serupa dengan objek Inheritance, apabila komponen dimulakan, kaedah mergeOptions akan dipanggil untuk bergabung, dan mod strategi akan digunakan untuk menggabungkan atribut yang berbeza. Jika data bercampur bercanggah dengan data komponen sendiri, data sendiri akan diguna pakai.

Kelemahan: konflik penamaan, sumber data yang tidak jelas

9 Mengapakah data komponen Vue perlu menjadi fungsi

new Vue ialah mod tunggal, ia tidak? t Tiada operasi gabungan, jadi contoh akar tidak perlu mengesahkan bahawa data mestilah fungsi. Data komponen mestilah berfungsi untuk mengelakkan data kedua-dua komponen daripada tercemar. Jika semuanya adalah objek, mereka akan menunjuk ke alamat yang sama apabila digabungkan. Dan jika ia adalah fungsi, dua ruang akan dijana apabila dipanggil semasa penggabungan.

10. Sila jelaskan prinsip nextTick.

nextTick ialah tugasan mikro.

• Panggil balik dalam nextTick ialah panggilan balik tertunda yang dilaksanakan selepas kitaran kemas kini Dom seterusnya tamat
• Boleh digunakan untuk mendapatkan Dom yang dikemas kini
• Kemas kini data dalam Vue adalah tidak segerak , menggunakan nextTick boleh memastikan logik yang ditakrifkan pengguna dilaksanakan selepas kemas kini

11. Apakah perbezaan antara pengiraan dan jam tangan?

• Kedua-dua pengiraan dan jam tangan dilaksanakan berdasarkan pemerhati.
• Atribut yang dikira dicache, dan nilai bergantung tidak akan berubah Kaedah atribut yang dikira tidak akan dilaksanakan berulang kali apabila mengambil nilai
• Tonton adalah untuk memantau perubahan nilai. Apabila nilai berubah Apabila , fungsi panggil balik

akan dipanggil 12. Bagaimanakah kaedah Vue.set dilaksanakan?

• vue menambah atribut dep pada kedua-dua objek dan tatasusunan itu sendiri
• Apabila atribut yang tidak wujud ditambahkan pada objek, pemerhati yang objek bergantung akan dicetuskan untuk mengemas kini
• Apabila mengubah suai indeks tatasusunan, panggil kaedah sambatan tatasusunan itu sendiri untuk mengemas kini tatasusunan

13 Mengapa Vue menggunakan Dom maya

• Dom maya ialah Menggunakan objek js untuk menerangkan Dom sebenar ialah abstraksi Dom sebenar
• Memandangkan prestasi pengendalian langsung Dom adalah rendah, tetapi kecekapan operasi lapisan js adalah tinggi, Operasi Dom boleh ditukar kepada operasi objek. Akhirnya, perbezaan itu dikemas kini melalui algoritma perbezaan Dom
• Dom maya tidak bergantung pada persekitaran platform sebenar dan boleh mencapai platform merentas

14 Algoritma perbezaan Vue?

Algoritma perbezaan Vue ialah perbandingan rata dan tidak mengambil kira perbandingan merentas peringkat. Secara dalaman, kaedah penunjuk berganda rekursif dalam digunakan untuk membandingkan

• Mula-mula bandingkan sama ada dua nod adalah nod yang sama
• Bandingkan atribut nod yang sama, gunakan semula nod lama
• pertama Bandingkan nod anak, pertimbangkan keadaan nod lama dan anak nod baharu
• Optimumkan perbandingan: kepala-kepala, ekor-ke-ekor, kepala-ke-ekor, ekor- to-head
• Banding dan cari, guna semula

15 Memandangkan Vue boleh mengesan perubahan data dengan tepat melalui rampasan data, mengapa kita perlu melakukan perbezaan untuk mengesan perbezaan?

• Perubahan data responsif, Vue memang boleh tahu bila data berubah, sistem responsif serta merta boleh tahu. Tetapi jika pemerhati ditambahkan pada setiap atribut, prestasi akan menjadi sangat lemah.
• Jika butirannya terlalu halus, kemas kini akan menjadi tidak tepat

Jadi algoritma Diff pemerhati digunakan untuk mengesan perbezaan.

16 Sila terangkan fungsi dan prinsip kekunci

• Semasa proses tampalan, Vue boleh menentukan sama ada dua nod maya adalah nod yang sama melalui kekunci.
• Tiada kunci akan menyebabkan masalah semasa kemas kini
• Cuba jangan gunakan indeks sebagai kunci

17 daripada komponen

• Pembangunan berasaskan komponen boleh meningkatkan kecekapan pembangunan aplikasi, kebolehujian dan kebolehgunaan semula
• Teknologi berasaskan komponen yang biasa digunakan: sifat, acara tersuai, slot
• Kurangkan skop kemas kini dan tunjukkan semula komponen yang telah diubah
• Kepaduan tinggi, gandingan rendah, aliran data sehala

18. Sila huraikan proses pemaparan komponen

Jana nod maya komponen-> Cipta nod sebenar komponen->

Kemas kini atribut akan mencetuskan kaedah patchVnode, dan nod maya komponen akan memanggil cangkuk prapatch, kemudian mengemas kini atribut dan mengemas kini komponen.

20 Prinsip komponen tak segerak

Render nod pemegang tempat tak segerak dahulu ->

21 Kelebihan dan prinsip komponen berfungsi

Ciri-ciri komponen berfungsi: tanpa negara, tiada kitaran hayat, tiada ini. Jadi prestasi akan menjadi lebih tinggi sedikit.

Komponen biasa ialah kelas yang mewarisi Vue.

Komponen berfungsi ialah fungsi biasa.

• 22. Apakah kaedah menghantar nilai dalam komponen?

  1. perangkap dan $emit: Komponen induk menghantar data kepada komponen anak melalui prop. Komponen anak menghantar data kepada komponen induk melalui$memancarkan acara
  2. $ibu bapa,$kanak-kanak mendapat komponen induk bagi komponen semasa dan komponen anak bagi komponen semasa
  3. $attrs dan$pendengar .
  4. Komponen induk disediakan melalui provide, dan komponen anak menyuntik pembolehubah melalui inject
  5. $ref mendapat instance
  6. pemindahan data komponen peringkat eventBus
  7. Vuex

  23 Apakah masalah yang $attrs nampaknya dapat diselesaikan?

  Fungsi utama adalah untuk memindahkan data dalam kelompok.

  provide/inject adalah lebih sesuai untuk digunakan dalam pemalam, terutamanya untuk mencapai pemindahan data merentas peringkat.

  24. Yang manakah mempunyai keutamaan yang lebih tinggi, v-for atau v-if?

  Pertama sekali, v-for dan v-if tidak boleh digunakan dalam tag yang sama.

  Proses v-untuk dahulu, kemudian v-jika.

  Jika anda menemuinya pada masa yang sama, anda harus mempertimbangkan untuk menggunakan atribut yang dikira untuk memproses data dahulu, dan kemudian melakukan v-for untuk mengurangkan bilangan gelung.

  25. Bagaimanakah mod-v dilaksanakan?

  Model v yang digunakan pada komponen ialah model dan panggil balik

  

  Menggunakan model v pada elemen biasa akan menghasilkan arahan, dan mungkin juga kerana Berbeza elemen:

  • menjana nilai dan input
  • menjana perubahan dan radio
  • menjana perubahan dan diperiksa

  

  dipanggil?

  

  Kod sumber:

  

  26 Perbezaan antara Slot biasa Vue dan Slot skop
  Slot biasa
  Slot biasa digunakan untuk penggantian selepas rendering. Selepas komponen induk diberikan, gantikan kandungan komponen anak.

  

  Apabila menyusun templat, proseskan nod anak dan teg slot dalam komponen

  

  Apabila mencipta elemen , gantikan kandungan _v() dengan kaedah _t().

  

  Slot skop
  Slot skop boleh mendapatkan hartanah dalam subkomponen. Lulus sifat dalam komponen anak dan buat.

  

  

  Hasil kompilasi slot skop:

  

  

  28. Apakah yang dilakukan oleh Vue.use?

  digunakan untuk menggunakan pemalam. Kami boleh melanjutkan komponen global, arahan, kaedah prototaip, dsb. dalam pemalam. Kaedah Vue.use akan dipanggil untuk lulus dalam fungsi pembinaan Vue secara lalai Anda boleh menggunakan vue dalam pemalam tanpa bergantung pada pustaka vue. install

  Menambah atribut nama akan menambah komponen itu sendiri pada atribut komponen untuk melaksanakan panggilan rekursif komponen.

  boleh mewakili nama khusus komponen untuk memudahkan penyahpepijatan dan mencari komponen yang sepadan.
  30. Apakah pengubahsuai vue?
  • .hentikan
  .halang
  .tawan
  • .diri
  • .sekali
  • . pasif
  • .kanan
  • .tengah
  • .tengah
  • .alt
  • 31. Bagaimana untuk memahami arahan penyesuaian?
  • Apabila menjana pepohon sintaks ast, apabila menemui arahan, atribut arahan akan ditambahkan pada elemen semasa
  Jana kod arahan melalui genDirektif
  Sebelum menampal , tambahkan arahan Cangkuk diekstrak ke dalam cbs, dan cangkuk yang sepadan dipanggil semasa proses tampalan
  • Apabila cangkuk yang sepadan dengan cbs dilaksanakan, kaedah definisi arahan yang sepadan dipanggil
  • Tiga puluh dua, simpan-hidup biasanya Di mana hendak digunakan? Apakah prinsipnya?
  • Apabila menggunakan keep-alive untuk membalut komponen dinamik, komponen akan dicache untuk mengelakkan penciptaan semula komponen

  Terdapat dua senario penggunaan, satu adalah dinamik komponen dan satu lagi ialah paparan penghala

  Senarai putih dan senarai hitam dibuat di sini. Menunjukkan apa yang perlu dicache dan apa yang tidak perlu dicache. Dan bilangan maksimum cache.

  

  Apa yang dicache ialah tika komponen, yang disimpan dengan objek kunci dan nilai.
  Apabila memuatkan, pantau sertakan dan kecualikan.

  

  Jika caching tidak diperlukan, kembalikan nod maya secara terus.
  Jika anda perlu cache, gunakan id komponen dan nama teg untuk menjana kunci, gunakan contoh vnod semasa sebagai nilai dan simpannya sebagai objek. Ini ialah senarai cache

  Jika bilangan maksimum cache ditetapkan, padamkan cache ke-0. Tambahkan cache terkini.

  Dan tambahkan pembolehubah keepAlive pada komponen menjadi benar Apabila komponen dimulakan, ia tidak akan dimulakan lagi.

  33. Berapakah fungsi cangkuk yang terdapat pada vue-router? Bagaimana proses pelaksanaannya?

  Terdapat tiga jenis fungsi cangkuk:

  • Global Guard
  • Route Guard
  • Component Guard

  

  34 Perbezaan antara dua mod vuerouter

  • Terdapat tiga mod dalam vue-router iaitu hash, history, abstract
  • Abstrak tidak Menyokong penggunaan API penyemak imbas untuk menukar pemandangan
  • mod cincang mempunyai keserasian yang baik, tetapi tidak cantik dan tidak kondusif untuk SEO
  • sejarah cantik, historyAPI popState, tetapi 404 akan muncul apabila menyegarkan

  35. Apakah pengoptimuman prestasi Vue?

  • Jangan masuk terlalu dalam dalam hierarki data, tetapkan data responsif dengan sewajarnya
  • Apabila menggunakan data, cache hasil nilai dan jarang dapatkan semula nilainya
  • Tetapkan kunci dengan sewajarnya
  • Penggunaan rasional v-show (prestasi tinggi untuk penukaran yang kerap) dan v-if
  • Kawal kebutiran komponen-> Vue menggunakan kemas kini peringkat komponen
  • Menggunakan komponen berfungsi- > Pemasangan berfungsi mempunyai overhed yang rendah
  • Menggunakan komponen tak segerak-> >Tatal maya, perkongsian masa Filem dan strategi lain
  • Pengoptimuman pembungkusan
  • 36.
  • Vuex ialah sistem pengurusan keadaan global yang disediakan khas untuk Vue, digunakan untuk perkongsian data dan caching data dalam berbilang komponen.

  Masalah: Tidak dapat berterusan.

  mutasi terutamanya mengubah keadaan dan melaksanakannya secara serentak

  tindakan melaksanakan kod perniagaan untuk digunakan semula dengan mudah dan logiknya boleh menjadi tidak segerak. Status tidak boleh diubah suai secara langsung.
  • 37 Apakah corak reka bentuk yang digunakan dalam Vue?
  Mod kes tunggal: baharu beberapa kali, hanya satu kejadian

  Mod kilang: Anda boleh menciptanya dengan menghantar dalam Instance parameter (penciptaan nod maya)

  Mod terbitkan dan langgan: eventBus
  • Mod pemerhati: tonton dan dep
  • Mod proksi: _atribut data, proksi, anti goncang , pendikit
  • Mod perantara: vuex
  • Mod strategi
  • Mod penampilan
  • Alamat asal: https://juejin.cn / post/7043074656047202334
  Pengarang: Hai Mingyue

  (Belajar perkongsian video:

  bahagian hadapan web

  )