[Kompilasi dan Perkongsian] Beberapa soalan temu bual frekuensi tinggi Vue

Kali ini saya akan berkongsi dengan anda beberapa soalan temu bual biasa tentang Vue untuk membantu anda menyusun pengetahuan asas dan meningkatkan rizab pengetahuan Vue anda Adalah berbaloi untuk dikumpulkan, datang dan lihat!

Apa yang saya kongsikan ialah beberapa soalan temuduga Vue yang biasa, tetapi ia tidak mewakili semua. Jika ada sesuatu yang salah dalam artikel, sila nyatakan Jika anda mempunyai sebarang keraguan atau mempunyai soalan temuduga lain, anda juga boleh meninggalkan mesej di ruang komen untuk dikongsi bersama.

1. Apakah kaedah komunikasi untuk komponen vue2.0?

• Komunikasi komponen ibu bapa-anak: props dan event, v- model, .sync, ref, $parent dan $children. (Belajar perkongsian video: tutorial video vue)

• Komunikasi komponen bukan ibu bapa-anak: $attr dan $listeners, provide dan inject, eventbus, diakses melalui contoh akar $root, vuex, dispatch dan brodcast

2. Bagaimanakah model v melaksanakan pengikatan dua hala?

• vue 2.0v-model digunakan untuk mencipta pengikatan dua hala pada kawalan atau komponen borang. Intipatinya ialah gula sintaksis untuk v-bind dan v-on, dalam Jika anda menggunakan v-model pada komponen, komponen bernama value akan terikat pada komponen secara lalai. prop dan acara bernama input.

• Vue3.0 Dalam 3.x, mentakrifkan v-model pada komponen adalah bersamaan dengan menghantar modelValue prop dan menerima acara update:modelValue yang dilemparkan

3. Vuex and simple Apakah itu perbezaan antara objek global?

Terdapat dua perbezaan utama antara Vuex dan objek global:

• Storan keadaan Vuex adalah responsif. Apabila komponen Vue membaca keadaan dari kedai, jika kedai Status dalam isasi, maka komponen yang sepadan akan dikemas kini dengan cekap sewajarnya.

• Anda tidak boleh terus menukar keadaan dalam kedai. Satu-satunya cara untuk menukar keadaan dalam kedai adalah dengan melaksanakannya secara eksplisit (komit)mutasi. Ini membolehkan kami menjejaki perubahan dengan mudah dalam setiap negeri, membolehkan kami melaksanakan beberapa tugas Alat membantu kami memahami aplikasi kami dengan lebih baik.

4. Apakah susunan pelaksanaan cangkuk kitaran hayat komponen dan subkomponen Vue?

Proses pemaparan: Komponen mesti dipasang hanya selepas semua sub-komponen dipasang. Pemasangan selesai, jadi komponen yang dipasang dipasang selepas sub-komponen dipasang

⽗sebelumCreate -> ⼼dibuat -> ⼼beforeMount -> ⼦dilekapkan -> ⽗dipasang

⼦ proses kemas kini komponen:

1. mempengaruhi ⽗ komponen: ⽗beforeUpdate -> ⼼ dikemas kini -> ◆ dikemas kini
2. tidak menjejaskan ⽗ komponen: ⼦beforeUpdate -> ⼦updated

⽗ proses kemas kini komponen:

1. mempengaruhi Subkomponen: ⼗beforeUpdate -> ⼖beforeUpdate->⼼dikemas kini -> dikemas kini
2. tidak menjejaskan ⼦ komponen: ⽗sebelumKemas kini -> ⽗dikemas kini

Proses pemusnahan: ⽗sebelum Musnah -> dimusnahkan -> ⽗dimusnahkan

kelihatan seperti banyak dan sukar untuk diingati, selagi anda memahaminya, tidak kira apa keadaannya, ia mestilah komponen induk yang menunggu sub-. komponen untuk diselesaikan. Selepas selesai, cangkuk lengkap yang sepadan akan dilaksanakan, dan anda boleh mengingati dengan mudah

5. Apakah perbezaan antara v-show dan v-if?

• v-if akan memusnahkan dan membina semula pendengar acara dan sub-komponen blok bersyarat semasa proses penukaran, jika syarat awal adalah palsu , maka tiada apa yang akan dilakukan sehingga syarat itu benar buat kali pertama. Modul pencelupan.

• v-show Hanya tukar berdasarkan css, tanpa mengira keadaan awal Semuanya akan diberikan.

Jadi, v-if penukaran overhed adalah lebih besar, ⽽ v-show overhed pemaparan awal adalah lebih besar ⼼, lebih sesuai apabila anda perlu menukar dengan kerap atau bahagian DOM yang anda tukar sangat kompleks. sesuai. Jika ia jarang ditukar selepas rendering, lebih sesuai digunakan v-show. v-if

6 Apakah masalah yang akan ditimbulkan oleh v-html dalam Vue

Pemarahan dinamik HTML sewenang-wenangnya di tapak web,

boleh membawa kepada XSS dengan mudah? serangan. Jadi ia hanya boleh dalam kredibiliti Gunakan v-html pada kandungan dan tidak boleh digunakan pada kandungan yang diserahkan pengguna.

7. Apakah peranan kunci dalam v-for?

key ialah satu-satunya vnode yang dinyatakan untuk setiap id dan dalam yang sama Semasa proses vnode perbezaan, anda boleh membandingkan key dengan cepat untuk menentukan sama ada Sama ada mereka adalah nod yang sama, dan keunikan key boleh digunakan untuk menjana map untuk mendapatkan lebih cepat Dapatkan nod yang sepadan.

Selepas menyatakan key sebagai tambahan, strategi "guna semula di tempat" tidak akan digunakan lagi, yang boleh memastikan ketepatan pemaparan. .

8 Mengapa v-for dan v-if tidak disyorkan bersama

• apabila v-for dan v-if berada pada nod yang sama , keutamaan v- for adalah lebih tinggi daripada v-if, yang bermaksud v-if akan diulang secara berasingan Berjalan di dalam setiap gelung v-for. Jika tatasusunan yang akan dilalui adalah sangat besar, tetapi data sebenar yang akan dipaparkan adalah sangat kecil , yang akan menyebabkan banyak pembaziran prestasi.
• Dalam senario ini, disyorkan untuk menggunakan computed untuk menapis data terlebih dahulu.

9. Apakah perbezaan antara mod cincang vue-router dan mod sejarah?

Perbezaan:

• Paparan URL, mod cincang mempunyai "#", mod sejarah tidak

• memuat semula Apabila melihat halaman, mod cincang boleh dimuatkan secara normal ke halaman yang sepadan dengan nilai cincang, tetapi sejarah tidak mempunyai tempat. Jika dikendalikan dengan betul, 404 akan dikembalikan Secara amnya, bahagian belakang perlu dikonfigurasikan untuk mengubah hala semua halaman ke laluan halaman utama.

• Keserasian. Hash boleh menyokong pelayar versi rendah dan IE

10 Bagaimanakah mod cincang vue-router dan mod sejarah dilaksanakan?

• mod cincang:

# Perubahan dalam nilai cincang tidak akan menyebabkan penyemak imbas menghantar permintaan kepada pelayan dan penyemak imbas tidak akan menghantar permintaan. Jika diminta, halaman tidak akan dimuat semula. Pada masa yang sama, dengan mendengar peristiwa pertukaran hash, anda boleh mengetahui perubahan yang telah berlaku dalam cincang, dan kemudian berdasarkan Hash berubah untuk melaksanakan operasi mengemas kini sebahagian daripada kandungan pada halaman.

• mod sejarah:

Pelaksanaan mod sejarah terutamanya dua API yang dikeluarkan oleh standard HTML5, pushState dan replaceState , kedua-dua API ini boleh menukar url, tetapi tidak akan menghantar permintaan. Dengan cara ini anda boleh memantau Dengar perubahan url untuk mengemas kini sebahagian daripada kandungan pada halaman.

11. Apakah perubahan dalam vue3.0 berbanding vue2.x?

• Perubahan dalam mekanisme pemantauan (Object.defineProperty —> Proxy)
• Templat
• Pengisytiharan komponen gaya objek (kelas)
• Gunakan ts
• Perubahan lain: sokongan untuk pemapar tersuai, sokongan untuk Fragment (berbilang nod akar) dan Portal (dalam Bahagian lain komponen dom (merender dan membina kandungan), berdasarkan pengoptimuman treeshaking, menyediakan lebih banyak fungsi terbina dalam

12. Bolehkah anda bercakap tentang MVVM?

• MVVM ialah singkatan daripada Model-View-ViewModel, iaitu meletakkan MVC dalam Controller berkembang menjadi ViewModel .
• Lapisan Model mewakili model data, Paparan mewakili komponen UI dan ViewModel ialah jambatan antara lapisan Paparan dan Model Data akan terikat pada lapisan ViewModel dan memaparkannya secara automatik data ke dalam halaman. Paparan berubah Akan dimaklumkan apabila Lapisan viewModel mengemas kini data .

13 Mengapakah data komponen dalam vue merupakan fungsi yang mengembalikan objek, bukannya menjadi objek secara langsung?

• Jika data ditakrifkan sebagai objek, ini bermakna semua kejadian komponen berkongsi salinan data , oleh itu, tidak kira contoh komponen mana yang diubah suai Jika data hilang, ia akan menjejaskan semua contoh komponen.
• Data dalam komponen ditulis sebagai fungsi, dan data ditakrifkan dalam bentuk nilai pulangan fungsi, supaya setiap kompleks Apabila komponen digunakan sekali, sekeping data baharu akan dikembalikan, yang serupa dengan mencipta ruang data peribadi untuk setiap tika komponen, membenarkan setiap tika komponen mengekalkan datanya sendiri. Hanya menulisnya dalam bentuk objek menjadikannya biasa kepada semua contoh komponen. Jika anda mengetahui sekeping data, ia akan menghasilkan hasil yang mengubah segala-galanya.

14 Cara pengiraan dalam Vue dilaksanakan

Prosesnya diringkaskan seperti berikut:

1. Apabila komponen dimulakan, computed dan data akan dibuat masing-masing. Sistem tindak balas ⾃, Observer merentasi setiap tetapan atribut dalam data get/set Pemintasan data

2. Permulaan computed akan memanggil fungsi initComputed

• untuk mendaftarkan watcher contoh dan membuat seketika dalam Dep hilang Pelanggan maklumat digunakan sebagai kebergantungan pengumpulan berikutnya (seperti watcher fungsi pemaparan atau sifat terhitung diperhatikan yang lain. Berubah watcher )

• akan mencetuskan Object.defineProperty apabila memanggil sifat yang dikira getFungsi aksesori

• memanggil watcher.depend() kepada pelanggan mesejnya sendiri dep subs Tambahkan atribut lain pada watcher

• panggil ⽤ watcher kaedah evaluate (panggil ke ⽽ Kaedah watcher) menjadikan dirinya sebagai pelanggan pelanggan mesej get yang lain, mula-mula berikan watcher kepada watcher, dan kemudian Selepas melaksanakan fungsi penilaian Dep.target, apabila mengakses sifat di dalam fungsi penilaian (seperti Tathagata getter , data atau lain-lain props ), juga akan mencetuskan computed fungsi pengakses mereka daripada ⽽menambahkan get harta yang dikira kepada pelanggan mesej watcher harta itu watcher dalam fungsi penilaian, apabila ini Operasi selesai, dan akhirnya tutup dep dan tetapkan kepada Dep.target dan Mengembalikan hasil fungsi penilaian. null

3 Apabila sifat berubah, cetuskan fungsi pemintasan

, dan kemudian hubungi pelanggan mesejnya sendiri Kaedah set dep, semuanya berakhir Tatasusunan notify semua pelanggan wathcer disimpan dalam dep semasa, dan satu demi satu Panggil subs daripada watcher kaedah untuk melengkapkan kemas kini respons. update

15 Prinsip responsif Vue

Sekiranya anda ditanya soalan ini dan penerangannya tidak jelas, anda boleh melukisnya terus dari dokumen rasmi Vue, tengok gambar Penjelasan akan lebih baik.

Responsif Vue adalah untuk
• merampas dataObject.defineProperty dan menggabungkannya dengan mod pemerhati capai. Vue menggunakan
untuk mencipta
• Rampas semua sifat dan tukarkannya kepada Object.defineProperty dan observe. gettersetterSetiap tika komponen dalam Vue akan sepadan dengan tika
, yang akan dipaparkan semasa pemaparan komponen. Semasa proses, yang digunakan Atribut data dikumpul sebagai kebergantungan melalui
• . Kemudian apabila pergantungan watcher dicetuskan , akan memberitahu getter , menyebabkan komponen yang berkaitan dengannya dipaparkan semula. setterwatcher

16. Apakah kelemahan Object.defineProperty?

• hanya boleh merampas sifat

  objek Object.defineProperty, ⽽ ialah langsung objek proksi Proxy disebabkan oleh Hanya atribut boleh dirampas, dan setiap atribut objek perlu dilalui. Dan Proksi boleh secara langsung proksi objek. Object.defineProperty

• Atribut baharu perlu ditambah secara manual

  , kerana Object.defineProperty merampas sifat objek, Oleh itu, apabila menambah atribut, anda perlu melintasi objek sekali lagi dan menambah baharu Tambahkan atribut dan gunakan Observe untuk merampas. Itulah sebabnya menggunakan Apabila Vue menambah atribut pada tatasusunan atau objek dalam Object.defineProperty, anda perlu menggunakan Object.defineProperty untuk Pastikan atribut yang baru ditambah juga responsif. datavm.$set

• ⽀Menyokong 13 jenis operasi pemintasan

  , ini Proxy tidak mempunyai. defineProperty

  Proksi Bonus Prestasi Standard Baharu Sebagai standard baharu, dalam jangka masa panjang, enjin JS akan terus dioptimumkan
, tetapi
• dan

  pada dasarnya tidak lagi disasarkan Pengoptimuman seksual. Proxygettersetter

Keserasian yang lemah pada masa ini tiada sokongan lengkap untuk
• Penyelesaian polyfill dengan kaedah pemintasan

  ProxyProxy

17. Bagaimana untuk mengesan perubahan tatasusunan dalam Vue2.0?

Vue's memproses tatasusunan secara berasingan, menyusun kaedah tatasusunan dan menetapkannya kepada Pada atribut

atribut tatasusunan, kerana mekanisme rantai prototaip

Observer, yang sepadan Saya tidak akan terus mencari kaedah. Kaedah penyusunan akan merangkumi beberapa kaedah yang akan meningkatkan indeks (__proto__, , ) untuk pemerhatian manual. pushunshiftsplice18. Apa yang nextTick lakukan dan apakah prinsipnya

Prasyarat untuk menjawab soalan ini dengan jelas ialah memahami proses EventLoop.

• Laksanakan panggilan balik tertunda selepas kitaran kemas kini DOM seterusnya dan gunakan nextTick untuk mendapatkannya serta-merta selepas mengubah suai data. DOM yang dikemas kini.
• nextTick Untuk pelaksanaan tugas mikro, ia akan terlebih dahulu menyemak sama ada ia disokong. Promise, jika tidak disokong, tuding terus ke macrotask, dan pelaksanaan tugas makro akan disemak terlebih dahulu. Uji sama ada ia disokong setImmediate (disokong oleh versi IE dan Etage yang lebih tinggi Jika ia tidak disokong, semak sama ada ia disokong. MessageChannel disokong. Jika ia masih tidak disokong, ia akhirnya akan diturunkan kepada setTimeout 0;Secara lalai, ia akan dilaksanakan sebagai tugas mikro terlebih dahulu, kerana tugas mikro boleh diselesaikan dalam satu; tandakan. Pelaksanaan telah selesai, dan ia mempunyai prestasi yang lebih baik dalam beberapa adegan dengan lukisan semula dan animasi.
• Namun, disebabkan keutamaan tugas mikro yang tinggi, dalam beberapa kes, ia mungkin dicetuskan semasa proses menggelegak acara, mengakibatkan Ini mungkin menyebabkan beberapa masalah, jadi tugas makro (seperti
) terpaksa digunakan di sesetengah tempat.
• v-on

Nota

: Sebab mengapa fungsi panggil balik dimasukkan ke dalam tatasusunan sekali Daripada melaksanakan fungsi panggil balik terus dalam , ia adalah untuk memastikan berbilang panggilan boleh dilaksanakan dalam tanda yang sama. Jika nextTick dilaksanakan kali ini, berbilang tugas tak segerak tidak akan dimulakan, tetapi tugas tak segerak ini akan dimampatkan menjadi satu tugasan yang sama. Tugas langkah akan dilaksanakan dalam tanda seterusnya. nextTicknextTcik

19. Prinsip penyusunan templat Vue

Proses penyusunan templat vue dibahagikan kepada 3 peringkat:

Langkah ⼀: Analisis

• Menghuraikan rentetan templat ke dalam AST Nod elemen AST yang dihasilkan mempunyai jumlah 3 jenis, 1 ialah elemen biasa, 2 ialah Ungkapan, 3 ialah teks biasa.

Langkah 2: Optimumkan pepohon sintaks

• Tidak semua data dalam templat Vue responsif dan banyak data tidak akan dikemas kini selepas pemaparan pertama , kemudian DOM yang dijana oleh bahagian data ini tidak akan berubah dan kita boleh melangkau membandingkannya semasa proses tampalan.

Pada peringkat ini, pokok AST yang dijana akan dilalui secara mendalam untuk mengesan sama ada setiap subpokoknya adalah nod statik Jika ia adalah nod statik. DOM yang mereka hasilkan tidak perlu diubah, yang sangat mengoptimumkan kemas kini templat pada masa jalan.

1. Ke dalam kod

Gunakan kaedah jana untuk menukar ast ke dalam fungsi render.

const code = generate(ast, options)

20 Adakah anda tahu prinsip data responsif Vue3.x?

Vue3.x ditukar kepada

untuk menggantikan Object.defineProperty. Kerana Proksi boleh terus memantau Terdapat perubahan pada objek dan tatasusunan, dan terdapat sebanyak 13 kaedah pemintasan. Dan sebagai standard baharu, ia akan tertakluk kepada pengoptimuman prestasi berterusan oleh pengeluar penyemak imbas. berubah.

Proxy

Proksi hanya akan memproksi lapisan pertama objek, jadi bagaimanakah Vue3 menangani masalah ini?

Tentukan sama ada nilai pulangan semasa Reflect.get ialah Object Jika ya, gunakan kaedah reaktif sebagai proksi Ini Dengan cara ini, pemerhatian yang mendalam dicapai.

Apabila memantau tatasusunan, get/set mungkin dicetuskan beberapa kali, jadi bagaimana untuk menghalang berbilang pencetus?

Kami boleh menentukan sama ada kunci ialah sifat sasaran objek proksi semasa dan kami juga boleh menentukan sama ada nilai lama dan nilai baharu adalah sama. Hanya apabila salah satu daripada dua syarat di atas dipenuhi, adalah mungkin untuk melaksanakan pencetus.

21. Apakah pengoptimuman prestasi yang telah anda lakukan untuk Vue?

Peringkat pengekodan

Cuba kurangkan data dalam data Data dalam data akan menambah pemerhati dan penyetel, dan pemerhati yang sepadan akan dikumpul

• v-if dan v-for tidak boleh digunakan bersama
• Jika anda perlu menggunakan v-for untuk mengikat acara pada setiap elemen, gunakan proksi acara
• SPA ⻚⾯ menggunakan komponen cache keep -alive
• Dalam lebih banyak kes, gunakan v-if dan bukannya v-show
• kunci untuk memastikan keunikan
• Gunakan ⽤laluan pemuatan malas , komponen tak segerak
• Anti goncang, pendikit
• Import modul pihak ketiga atas permintaan
• ⻓Tatal senarai ke kawasan yang boleh dilihat dan muatkannya secara dinamik
• Malas memuatkan imej

Pengoptimuman SEO

Prapemarahan

• Pemarahan sisi pelayan SSR

Pengoptimuman pembungkusan

Kod mampatan

• Gegar Pokok/Pengangkat Skop
• Dayakan ⽤cdn untuk memuatkan modul ketiga
• Happypack pembungkusan berbilang benang
• splitChunks mengekstrak fail awam
• pengoptimuman SourceMap

Pengalaman pengguna

Skrin rangka

• PWA
• juga boleh menggunakan pengoptimuman cache (cache pelanggan, cache pelayan), mendayakan pemampatan gzip pada pelayan, dsb.

(Mempelajari perkongsian video:

pembangunan bahagian hadapan web

, Video pengaturcaraan asas)

Atas ialah kandungan terperinci [Kompilasi dan Perkongsian] Beberapa soalan temu bual frekuensi tinggi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!