[Disusun dan dikongsi] Beberapa soalan temu bual Vue biasa (dengan analisis jawapan)

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!

Ringkasan soalan temuduga biasa Vue

Model MVVM?

MVVM ialah singkatan Model-View-ViewModel, yang pada asasnya ialah versi dinaik taraf bagi model MVC. Antaranya, Model mewakili model data, View mewakili halaman yang anda lihat dan ViewModel ialah jambatan antara View dan Model Data akan terikat pada lapisan ViewModel dan dipaparkan secara automatik data ke dalam halaman , apabila paparan berubah, lapisan ViewModel akan dimaklumkan untuk mengemas kini data. Sebelum ini, paparan dikemas kini dengan mengendalikan DOM, kini 数据驱动视图.

Kitaran hayat Vue

Setiap tika komponen Vue akan melalui satu siri proses pemulaan selepas ia dibuat Semasa proses ini, fungsi yang dipanggil cangkuk kitaran hayat akan dijalankan. Ini memberi pengguna peluang untuk menambah kod mereka sendiri pada peringkat tertentu.

Kitaran hayat Vue boleh dibahagikan kepada 8 peringkat: sebelum dan selepas penciptaan, sebelum dan selepas pemasangan, sebelum dan selepas mengemas kini, sebelum dan selepas pemusnahan, serta kitaran hayat beberapa senario istimewa. Vue 3 juga menambah tiga adegan baharu untuk penyahpepijatan dan pemaparan sebelah pelayan. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

diaktifkan

Kitaran hayat dalam Vue 2

Kitaran hayat dalam Vue 3

Penerangan

beforeCreate

beforeCreate

Sebelum penciptaan, data data dan kaedah belum dimulakan lagi .

dibuat

dibuat

Selepas dibuat, Terdapat nilai dalam data, tetapi ia belum dipasang lagi Anda boleh membuat beberapa permintaan Ajax

beforeMount

beforeMount

Sebelum dipasang,

Vue 2中的生命周期	Vue 3中的生命周期	描述
beforeCreate	beforeCreate	创建前，此时data和 methods的数据都还没有初始化
created	created	创建后，data中有值，尚未挂载，可以进行一些Ajax请求
beforeMount	beforeMount	挂载前，会找到虚拟DOM，编译成Render
mounted	mounted	挂载后，DOM已创建，可用于获取访问数据和DOM元素
beforeUpdate	beforeUpdate	更新前，可用于获取更新前各种状态
updated	updated	更新后，所有状态已是最新
beforeDestroy	beforeUnmount	销毁前，可用于一些定时器或订阅的取消
destroyed	unmounted	销毁后，可用于一些定时器或订阅的取消
activated	activated	keep-alive缓存的组件激活时
deactivated	deactivated	keep-alive缓存的组件停用时
errorCaptured	errorCaptured	捕获一个来自子孙组件的错误时调用
—	renderTracked	调试钩子，响应式依赖被收集时调用
—	renderTriggered	调试钩子，响应式依赖被触发时调用
—	serverPrefetch	组件实例在服务器上被渲染前调用

maya akan ditemui dan disusun ke dalam Render

dilekapkan

dilekapkan

Selepas dipasang, mempunyai telah dibuat dan boleh digunakan untuk mendapatkan data akses dan Elemen

beforeUpdate

beforeUpdate code>

Sebelum kemas kini , boleh digunakan untuk mendapatkan pelbagai status sebelum kemas kini

dikemas kini

dikemas kini

Selepas kemas kini, semua status adalah terkini

sebelum Musnah

beforeUnmount td>

Boleh digunakan untuk membatalkan beberapa pemasa atau langganan sebelum pemusnahan

dimusnahkan code>

dinyahlekapkan

Selepas pemusnahan, ia boleh digunakan untuk membatalkan beberapa pemasa atau langganan

diaktifkan

kekal-hidupApabila komponen cache diaktifkan

dinyahaktifkan

dinyahaktifkan

kekalkan hidupApabila komponen cache dinyahaktifkan

errorCaptured

errorCaptured

Dipanggil semasa menangkap ralat daripada komponen turunan

—

renderTracked

Kait nyahpepijat, dipanggil apabila kebergantungan reaktif dikumpul

—

renderTriggered

Kait nyahpepijat, dipanggil apabila reaktif kebergantungan dicetuskan

—

serverPrefetch

Dipanggil sebelum contoh komponen dipaparkan pada pelayan

Kitaran hayat komponen ibu bapa-anak:

• 加载渲染阶段: ibu bapa sebelumCreate -> -> ; kanak-kanak dibuat -> kanak-kanak dipasang ->
• : ibu bapa sebelum Musnah -> anak sebelum Musnah -> 🎜> Laksanakan panggilan balik tertunda selepas kitaran kemas kini DOM seterusnya. Gunakan kaedah ini serta-merta selepas mengubah suai data untuk mendapatkan DOM yang dikemas kini. 更新阶段
• 销毁阶段 ialah API global yang disediakan oleh Vue Disebabkan oleh strategi kemas kini tak segerak Vue, pengubahsuaian data kami tidak akan ditunjukkan secara langsung pada DOM pada masa ini, jika kami ingin mendapatkan kemas kini segera keadaan DOM, anda perlu menggunakan kaedah ini.

Vue dilaksanakan secara tak segerak apabila mengemas kini DOM. Apabila data berubah, Vue akan membuka baris gilir kemas kini tak segerak dan menampan semua perubahan data yang berlaku dalam gelung peristiwa yang sama. Jika

yang sama dicetuskan beberapa kali, ia hanya akan ditolak ke dalam baris gilir sekali. Penyahduaan ini semasa penimbalan adalah penting untuk mengelakkan pengiraan dan operasi DOM yang tidak perlu. Kaedah akan menambah fungsi panggil balik pada baris gilir untuk memastikan fungsi dipanggil hanya selepas operasi DOM sebelumnya selesai.

Senario penggunaan:

Jika anda ingin mendapatkan struktur

yang dikemas kini serta-merta selepas mengubah suai data, anda boleh menggunakan nextTick

watchernextTickMelaksanakan

operasi dalam

kitaran hayat

• DOM Apakah yang berlaku semasa proses pemasangan contoh Vue? Vue.nextTick()

Proses pelekap merujuk kepada proses
• , yang merupakan proses permulaan dan melakukan dua perkara secara keseluruhan:

  dan created. DOM

  Permulaan akan mencipta tika komponen, memulakan keadaan komponen dan mencipta pelbagai data responsif.

Langkah mewujudkan mekanisme kemas kini akan segera melaksanakan fungsi kemas kini komponen Ini akan melaksanakan fungsi pemaparan komponen untuk kali pertama dan melaksanakan

untuk menukar kepada ; pada masa yang sama, melaksanakan fungsi pemaparan untuk kali pertama akan mewujudkannya Kebergantungan antara data reaktif dalaman dan fungsi kemas kini komponen membolehkan fungsi kemas kini yang sepadan dilaksanakan apabila data berubah pada masa hadapan.

app.mount()Prinsip penyusunan templat Vue初始化建立更新机制

Terdapat modul pengkompil unik dalam Vue yang dipanggil

, fungsi utamanya adalah untuk menyusun tulisan pengguna

Disusun menjadi fungsi

boleh laku dalam js. patchDalam Vue, pengkompil akan terlebih dahulu menghuraikan vnode Langkah ini dipanggil dom Selepas tamat, objek JS akan diperoleh, dipanggil

kemudiannya akan diproses dan ditukar . Prosesnya, langkah ini dipanggil

, dan akhirnya yang diperoleh sebelum ini dijana ke dalam kod JS, iaitu fungsi .

compilerPrinsip responsif Vuetemplaterender
templateparseResponsif data dalam Vue 2 akan diproses secara berbeza mengikut jenis data. Jika ia adalah objek, pintas akses atribut objek melalui 抽象语法树AST, dan rasa dan bertindak balas apabila data itu diakses atau diubah jika ia adalah tatasusunan, lanjutkan 7 kaedah perubahannya (tekan, pop) dengan mengatasi kaedah prototaip tatasusunan. , shift, unshift, splice, sort, reverse), supaya kaedah ini boleh melakukan pemberitahuan kemas kini tambahan untuk bertindak balas. ASTKelemahan: transformASTrender Traversal rekursif semasa pemula akan menyebabkan kehilangan prestasi

proses kemas kini pemberitahuan perlu mengekalkan sejumlah besar kejadian dan , yang mana menggunakan banyak memori tambahan Untuk

yang baru dijana,

Struktur data ini tidak disokong.

• Object.defineProperty(obj,key,descriptor)
  

  Vue 3 menggunakan mekanisme
  • untuk proksi data yang perlu responsif. Ia boleh menyokong objek dan tatasusunan pada masa yang sama Penambahan atribut dinamik dan pemadaman boleh dipintas Semua struktur data baharu disokong secara rekursif pada masa jalan dan hanya diproksikan apabila digunakan bilangan kebergantungan, dan prestasi telah meningkat dengan pesat.
  • depwatcher
  DOM maya
  • Vue.setdelete
  • Konsep: ES6DOM maya, seperti namanya, ialah objek DOM maya , yang itu sendiri adalah objek JS hanya menerangkan struktur pandangan melalui atribut yang berbeza. Map

  • Manfaat DOM maya:
    (1) Peningkatan prestasi
    Terdapat pengehadan untuk mengendalikan DOM secara langsung. Jika anda mengendalikannya secara langsung, ia akan Banyak kandungan atribut tambahan dimanipulasi, yang tidak diperlukan. Jika operasi ini dipindahkan ke objek JS, ia akan menjadi lebih mudah. Di samping itu, mengendalikan DOM agak mahal, dan operasi DOM yang kerap boleh menyebabkan lukisan semula halaman dan pengaliran semula dengan mudah. Jika pemprosesan perantaraan dilakukan melalui VNode abstrak, bilangan operasi DOM langsung boleh dikurangkan dengan berkesan, dengan itu mengurangkan lukisan semula halaman dan aliran semula.
    (2) Mudah untuk pelaksanaan merentas platform
    Nod VNod yang sama boleh dipaparkan ke dalam kandungan yang sepadan pada platform yang berbeza Contohnya: apabila dipaparkan dalam penyemak imbas, ia adalah nod elemen DOM dan apabila dipaparkan dalam Native (iOS, Android) ia menjadi kawalan yang sepadan. Vue 3 membolehkan pembangun melaksanakan pemapar tersuai berdasarkan VNode untuk memudahkan pemaparan untuk platform yang berbeza.
    

  • Struktur: Tiada standard bersatu untuk
    , yang secara amnya merangkumi tiga item: tag, props dan children.
    tag: Diperlukan. Ia adalah label, atau ia boleh menjadi komponen, atau fungsi.
    props: Pilihan. Ia adalah sifat dan kaedah pada label ini.
    children: Pilihan. Ia ialah kandungan atau nod anak bagi teg ini. Jika ia adalah nod teks, ia adalah rentetan; jika ia mempunyai nod anak, ia adalah tatasusunan. Dalam erti kata lain, jika children dinilai sebagai rentetan, ini bermakna ia mestilah nod teks dan nod ini mesti tiada unsur anak.
    

  algoritma perbezaan

  1 Konsep:

  diff algoritma perbandingan DOM maya lama dan DOM maya baharu untuk mengetahui nod maya mana yang telah berubah Cari nod maya ini dan hanya kemas kini nod sebenar yang sepadan dengan nod maya ini tanpa mengemas kini nod lain yang tidak berubah untuk mencapai ketepatan. sekali gus meningkatkan kecekapan.
  

  2. Kaedah perbandingan:

  diffStrategi keseluruhan algoritma ialah: 深度优先，同层比较. Perbandingan hanya akan dilakukan pada tahap yang sama, dan tidak akan dibandingkan merentasi peringkat semasa proses perbandingan, gelung akan mengecut dari kedua-dua belah ke tengah.

  • Mula-mula tentukan sama ada tag kedua-dua nod adalah sama Jika ia berbeza, padamkan nod dan buat semula nod untuk penggantian.
  • tagApabila ia adalah sama, gantikan atribut dahulu, dan kemudian bandingkan sub-elemen, yang dibahagikan kepada situasi berikut:
    • Apabila nod lama dan baharu mempunyai sub -elemen, penunjuk berganda digunakan untuk perbandingan. Bandingkan penuding kepala dan ekor lama dan baharu, gelung lebih dekat ke tengah, panggil patchVnode untuk mengulangi proses mengikut situasi, panggil patch untuk mencipta nod baharu, cari createElem nod key yang konsisten daripada jadual cincang, dan kemudian bahagikan mereka operasi situasi. VNode
    Nod baharu mempunyai unsur anak, dan nod lama tiada unsur anak, maka nod maya unsur anak boleh ditukar menjadi nod sebenar dan dimasukkan.
    • Nod baharu tiada unsur anak Jika nod lama mempunyai unsur anak, unsur anak akan dikosongkan dan ditetapkan kepada kandungan teks nod baharu.
    • Apabila kedua-dua nod lama dan baharu tidak mempunyai elemen anak, iaitu, kedua-duanya adalah nod teks, kandungan teks akan dibandingkan secara langsung, dan jika ia berbeza, ia akan dikemas kini.

  Apakah peranan kunci dalam Vue? Fungsi utama

  ialah key. 为了更加高效的更新虚拟 DOM

  Apabila Vue menilai sama ada dua nod adalah sama, ia terutamanya menilai

  dan key kedua-dua nod itu. Oleh itu, jika 元素类型tag tidak ditetapkan, nilainya tidak ditentukan dan ia mungkin sentiasa dianggap bahawa ini adalah dua nod yang sama dan hanya operasi kemas kini boleh dilakukan, yang akan menyebabkan sejumlah besar operasi kemas kini DOM. key

  Mengapakah data dalam komponen berfungsi?

  Dalam Vue() baharu, ia boleh menjadi fungsi atau objek, kerana hanya terdapat satu tika akar dan tiada pencemaran data akan berlaku.
  Dalam komponen, data mestilah fungsi Tujuannya adalah untuk menghalang objek contoh berbilang komponen daripada berkongsi data yang sama dan menyebabkan pencemaran data Dalam bentuk fungsi, initData akan mengembalikannya sebagai fungsi kilang .

  Bagaimana untuk berkomunikasi antara komponen dalam Vue?

  • Komunikasi komponen ibu bapa-anak:
    Ibu bapa menghantar data kepada anak melalui

    dan anak kepada ibu bapa mencetuskan peristiwa melalui props; melalui rantaian induk / Subchain juga boleh berkomunikasi ($emit/$parent) juga boleh mengakses contoh komponen; $childrenrefprovideinjectKomunikasi komponen adik-beradik: $attrs$listenersBas acara global

    ,
  .

  • Komunikasi komponen merentas peringkat: EventBusVuexBas acara global

    ,
  ,
  • /

    .

  Apakah perbezaan antara v-show dan v-if?

  • Kaedah kawalan adalah berbeza. v-show adalah dengan menambahkan atribut css display: none pada elemen, tetapi elemen masih wujud manakala v-if mengawal paparan atau menyembunyikan elemen dengan menambah atau memadam keseluruhan elemen.

  • Proses penyusunan adalah berbeza. v-ifPenukaran mempunyai proses penyusunan/penyahpasangan separa Semasa proses pensuisan, pendengar acara dalaman dan sub-komponen dimusnahkan dan dibina semula dengan sewajarnya v-showIa hanyalah pensuisan mudah berdasarkan css.

  • Syarat kompilasi adalah berbeza. v-if ialah pemaparan bersyarat benar Ia akan memastikan pendengar acara dan subkomponen dalam blok bersyarat dimusnahkan dengan betul dan dibina semula semasa proses penukaran Apabila keadaan pemaparan adalah palsu, tiada operasi akan dilakukan sehingga ia benar.

  • Kitaran hayat pencetus adalah berbeza. Apabila v-show berubah daripada palsu kepada benar, kitaran hayat komponen tidak akan dicetuskan; apabila v-if berubah daripada palsu kepada benar, cangkuk beforeCreate, created, beforeMount dan mounted bagi komponen akan dicetuskan Apabila benar berubah kepada palsu, cangkuk beforeDestory dan destoryed komponen akan dicetuskan.

  • Penggunaan prestasi adalah berbeza. v-ifmempunyai kos penukaran yang lebih tinggi; v-showmempunyai kos pemaparan awal yang lebih tinggi.

  Senario penggunaan:
  Jika anda perlu menukar sangat kerap, lebih baik menggunakan v-show, seperti: menu akordion, halaman tab, dsb.; Jika keadaan jarang berubah semasa runtime, lebih baik gunakan v-if Contohnya, selepas pengguna log masuk, kandungan yang berbeza akan dipaparkan mengikut kebenaran yang berbeza.

  Apakah perbezaan antara dikira dan jam tangan?

  • computed Sifat yang dikira bergantung pada sifat lain untuk mengira nilai Perubahan dalam sebarang kebergantungan dalaman akan melaksanakan semula fungsi yang dikira dicache apabila sifat yang dikira digunakan semula. Dapatkan nilai pulangan daripada cache dan atribut yang dikira mesti mempunyai kata kunci return.
  • watch Kesan perubahan dalam data tertentu untuk mencetuskan fungsi. Apabila data ialah jenis objek, anda perlu menggunakan atribut pendengaran mendalam deep apabila nilai atribut dalam objek berubah atau anda boleh menggunakan atribut immdiate pendengaran segera apabila halaman pertama kali dimuatkan.

  Senario aplikasi:
  Sifat yang dikira biasanya digunakan dalam pemaparan templat Nilai tertentu bergantung pada objek tindak balas lain atau sifat yang dikira sesuai untuk memerhatikan nilai tertentu melengkapkan logik perniagaan yang kompleks.

  Mengapa v-if dan v-for tidak disyorkan untuk digunakan bersama?

  Dalam Vue 2, v-for mempunyai keutamaan yang lebih tinggi daripada v-if, yang bermaksud bahawa v-if akan dijalankan berulang kali dalam setiap gelung v-for. Jika tatasusunan yang akan dilalui adalah besar dan data sebenar yang akan dipaparkan adalah sangat kecil, ia akan menyebabkan pembaziran prestasi yang besar.

  Dalam Vue 3, ia betul-betul bertentangan dengan v-if mempunyai keutamaan yang lebih tinggi daripada v-for, jadi apabila v-if dilaksanakan, pembolehubah yang dipanggilnya belum wujud lagi, yang akan menyebabkan pengecualian. .

  Biasanya terdapat dua situasi yang membawa kepada melakukan perkara ini:

  • Untuk menapis item dalam senarai, seperti: v-for = "user in users" v-if = "user.active". Dalam kes ini, anda boleh menentukan sifat yang dikira dan biarkan ia mengembalikan senarai yang ditapis.
  • Untuk mengelak daripada memaparkan senarai yang sepatutnya disembunyikan, seperti v-for = "user in users"  v-if = "showUsersFlag". Dalam kes ini, anda boleh mengalihkan v-if ke elemen bekas atau membalutnya dengan lapisan template.

  $set

  Anda boleh menambah data responsif secara manual untuk menyelesaikan masalah paparan perubahan data tidak mengemas kini. Apabila anda menetapkan secara langsung nilai item dalam tatasusunan atau secara langsung menetapkan nilai harta objek dalam projek, anda akan mendapati halaman itu tidak dikemas kini. Ini kerana had Object.defineProperty(), perubahan data tidak boleh dipantau, yang boleh diselesaikan oleh this.$set(数组或对象，数组下标或对象的属性名，更新后的值).

  Apa itu keep-alive?

  • Fungsi: Laksanakan caching komponen, kekalkan status komponen dan elakkan masalah prestasi yang disebabkan oleh pemaparan berulang.
  • Prinsip kerja: Vue.js mengabstrakkan nod DOM secara dalaman ke dalam nod VNode individu keep-aliveCache komponen juga berdasarkan nod VNode. Ia menyimpan cache komponen yang memenuhi syarat dalam objek cache, dan kemudian mengeluarkan nod VNode daripada objek cache dan menjadikannya apabila memaparkan semula.
  • boleh menetapkan atribut berikut:
    ① include: rentetan atau ungkapan biasa, hanya komponen dengan nama yang sepadan akan dicache.
    ② exclude: Rentetan atau ungkapan biasa, mana-mana komponen dengan nama yang sepadan tidak akan dicache.
    ③ max: Nombor, bilangan maksimum kejadian komponen yang boleh dicache.
    padanan terlebih dahulu menyemak pilihan name komponen Jika pilihan name tidak tersedia, ia sepadan dengan nama pendaftaran setempatnya (nilai utama komponen komponen induk tidak boleh dipadankan.

  Komponen dengan keep-alive set cache akan mempunyai dua lagi cangkuk kitaran hayat: activated, deactivated.
  Apabila memasukkan komponen untuk kali pertama: sebelumBuat --> >Memasukkan komponen sekali lagi Apabila: diaktifkan --> sebelumKemas kini --> menyediakan cara yang sangat Fleksibel untuk mengedarkan fungsi boleh guna semula dalam komponen Vue.
  

  Senario penggunaan: Kod yang sama atau serupa selalunya digunakan dalam komponen yang berbeza dan fungsi kod ini agak bebas. Kod yang sama atau serupa boleh diekstrak melalui mixin.

  Kelemahan:

  mixinSumber pembolehubah yang tidak jelas

  Berbilang campuran boleh menyebabkan konflik penamaan (penyelesaian: API Gabungan Vue 3)

  • Terdapat berbilang pasangan perhubungan antara mixin dan lubang komponen, menjadikan projek lebih kompleks.

  • Slot

  • Slot biasanya digunakan di dalam komponen apabila membungkus komponen, ia tidak pasti sama ada kedudukannya berada di dalam komponen. Apabila memaparkan elemen dalam sebarang bentuk, anda boleh menggunakan
  untuk menduduki kedudukan ini. Elemen pada kedudukan ini perlu dihantar dalam bentuk kandungan daripada komponen induk.
  dibahagikan kepada:
  : Komponen kanak-kanak menggunakan tag

  untuk menentukan kedudukan pemaparan Struktur slot boleh diletakkan dalam teg sebagai kandungan sandaran komponen induk sedang menggunakan Pada masa ini, anda boleh menulis kandungan terus dalam teg subkomponen dan bahagian kandungan ini akan dimasukkan ke dalam kedudukan teg slot subkomponen. Jika komponen induk tidak menghantar kandungan ke slot apabila ia digunakan, kandungan sandaran akan dipaparkan pada halaman. slot

  : Subkomponen menggunakan atribut
  • untuk mewakili nama slot yang tidak menyatakan 默认插槽 akan mempunyai nama tersirat <slot>. Apabila digunakan dalam komponen induk, arahan DOM menentukan slot elemen mana yang perlu diletakkan berdasarkan slot lalai Nilai <slot> ialah nilai atribut slot komponen anak
  . Gunakan arahan
  • untuk menentukan slot mana elemen diletakkan. Ia mesti sepadan dengan elemen 具名插槽 dan satu elemen name hanya boleh sepadan dengan satu slot yang ditempah, iaitu berbilang name elemen tidak boleh menggunakan default arahan menyatakan slot yang sama. Singkatan v-slot ialah v-slot, contohnya, name boleh disingkatkan sebagai v-slot. <template><template><template>: Subkomponen mengikat v-slot data pada teg v-slot untuk menghantar data subkomponen kepada komponen induk untuk digunakan. Kaedah untuk komponen induk mendapatkan data prop mengikat slot: #v-slot:header#header
  scope="received variable name":
  • 作用域插槽<slot>props
    slot-scope= "menerima nama pembolehubah":

    • <template scope="接收的变量名">

      v-slot: slot name="received variable name":

    • <template slot-scope="接收的变量名">

    • Apakah pengubah suai dalam Vue? <template v-slot:插槽名="接收的变量名">

    Dalam Vue, pengubah suai mengendalikan banyak butiran acara DOM, supaya kita tidak perlu lagi menghabiskan banyak masa menangani perkara yang menjengkelkan ini, dan boleh mempunyai lebih banyak tenaga untuk memfokus pada program pemprosesan. Pengubah suai dalam Vue dibahagikan kepada jenis berikut:

    • Pengubah suai borang
      lazy Selepas mengisi maklumat, nilai akan diberikan kepada nilai hanya apabila kursor meninggalkan label, iaitu maklumat akan disegerakkan selepas change acara.
      number secara automatik menukar nilai input pengguna kepada jenis angka, tetapi jika nilai itu tidak dapat dihuraikan oleh parseFloat, nilai asal akan dikembalikan.
      trim Secara automatik menapis ruang pertama dan terakhir yang dimasukkan oleh pengguna, tetapi ruang di tengah tidak akan ditapis.

    • Pengubah suai acara
      stop menghalang acara menggelegak, yang bersamaan dengan memanggil kaedah event.stopPropagation.
      prevent menghalang kelakuan lalai acara, yang setara dengan memanggil kaedah event.preventDefault.
      self hanya dicetuskan apabila event.target ialah elemen semasa itu sendiri.
      once Selepas mengikat acara, ia hanya boleh dicetuskan sekali, dan ia tidak akan dicetuskan untuk kali kedua.
      capture Gunakan mod tangkapan peristiwa, iaitu peristiwa yang dicetuskan oleh elemen itu sendiri diproses di sini dahulu, dan kemudian diserahkan kepada elemen dalaman untuk diproses.
      passive memberitahu penyemak imbas bahawa anda tidak mahu menyekat kelakuan lalai acara.
      native membenarkan komponen mendengar peristiwa asli unsur akar seperti html teg terbina dalam Jika tidak, menggunakan v-on pada komponen hanya akan mendengar acara tersuai.
      

    • Pengubah suai butang tetikus
      left Klik kiri.
      right Klik kanan.
      middle Klik tengah.
      

    • Pengubah nilai utama
      Pengubah suai papan kekunci digunakan untuk mengubah suai acara papan kekunci (onkeyup, onkeydown), seperti berikut: keyCodeTerdapat banyak , tetapi vue memberikan kami alias, yang dibahagikan kepada dua jenis berikut:

      • Kunci biasa (masuk, tab, padam, ruang, esc, atas...)
      • Kekunci pengubah suai sistem (ctrl, alt, meta, shift...)

    Memahami SPA?

    • Konsep:
      SPA（Single-page  application）, iaitu aplikasi satu halaman, iaitu model aplikasi web atau tapak web yang berinteraksi dengan pengguna dengan menulis semula secara dinamik halaman semasa Interaktif, pendekatan ini mengelak daripada mengganggu pengalaman pengguna apabila bertukar antara halaman. Dalam SPA, semua kod yang diperlukan (HTML, JavaScript dan CSS) diambil dengan memuatkan halaman tunggal, atau sumber yang sesuai dimuatkan secara dinamik dan ditambahkan pada halaman mengikut keperluan (biasanya sebagai tindak balas kepada tindakan pengguna). Halaman tidak dimuatkan semula pada bila-bila masa, dan juga tidak mengawal pemindahan ke halaman lain. Sebagai contoh, seperti secawan, ia mengandungi susu pada waktu pagi, kopi pada waktu tengah hari, dan teh pada sebelah petang Ia sentiasa mempunyai kandungan dan cawan itu tidak berubah. Perbezaan antara

    • SPA dan MPA:
      MPA（Muti-page application） ialah aplikasi berbilang halaman. Dalam MPA, setiap halaman ialah halaman utama dan adalah bebas Setiap kali halaman diakses, fail Html, CSS dan JS perlu dimuat semula dan fail awam dimuatkan atas permintaan.

      td>

      SPA Kelebihan dan Kekurangan:
      Kelebihan:
      

      • Mempunyai kemestian aplikasi desktop, kemudahalihan dan kebolehaksesan tapak web
        
      • Pengalaman pengguna adalah baik dan pantas, dan perubahan kandungan tidak memerlukan muat semula keseluruhan halaman
        
      • Pemisahan bahagian hadapan dan belakang yang baik, pembahagian kerja yang lebih jelas
        

      Kelemahan:
      

      • Tidak kondusif untuk merangkak enjin carian
        
      • Kelajuan rendering pertama agak perlahan
        

      Ikatan dua hala?

      • Konsep:
        Pengikatan dua hala dalam Vue ialah arahan v-model yang boleh mengikat data responsif pada paparan dan perubahan dalam paparan boleh mengubah nilai . v-model ialah gula sintaks, bersamaan dengan :value dan @input secara lalai Menggunakan v-model boleh mengurangkan banyak kod pemprosesan acara yang membosankan dan meningkatkan kecekapan pembangunan.

      • Penggunaan:
        biasanya digunakan pada item borang v-model juga boleh digunakan pada komponen tersuai untuk mewakili kawalan input dan output bagi nilai tertentu.

      • Prinsip:
        v-model ialah arahan pengikatan dua hala sebenarnya dilakukan oleh pengkompil Vue Ia sebenarnya mengeluarkan fungsi pemaparan komponen yang mengandungi templat v-model. Di atas masih merupakan pengikatan atribut value dan pemantauan acara input Pembolehubah yang sepadan akan dikemas kini dalam fungsi panggil balik acara.

      Bolehkah komponen anak secara langsung menukar data komponen induk?

      • Semua prop mengikut prinsip pengikat tunggal props perubahan disebabkan oleh kemas kini komponen induk, dan secara semula jadi mengalirkan keadaan baharu ke bawah ke komponen anak. tanpa dilalui ke belakang. Ini menghalang komponen anak daripada mengubah suai keadaan komponen induk secara tidak sengaja, jika tidak, aliran data aplikasi akan mudah menjadi mengelirukan dan sukar untuk difahami.
        Selain itu, setiap kali komponen induk dikemas kini, props dalam semua komponen anak akan dikemas kini kepada nilai terkini, yang bermaksud anda tidak boleh mengubah suai prop dalam komponen anak jika anda melakukan ini , Vue akan memberikan amaran pada konsol.

      • Dalam proses pembangunan sebenar, biasanya terdapat dua senario yang membawa kepada pengubahsuaian prop:

        • prop digunakan untuk lulus dalam nilai awal dan sub Komponen ingin menggunakannya kemudian sebagai sifat data setempat. Dalam kes ini, yang terbaik adalah untuk mentakrifkan atribut data setempat baharu dan dapatkan nilai awal daripada props.
        • memerlukan penukaran selanjutnya pada nilai prop masuk. Adalah lebih baik untuk menentukan sifat yang dikira berdasarkan nilai prop.

      • Dalam amalan, jika anda benar-benar ingin menukar sifat komponen induk, anda harus emit mencipta acara untuk membenarkan komponen induk berubah. Apabila objek atau tatasusunan dihantar masuk sebagai props, walaupun komponen anak tidak boleh menukar pengikatan props, masih boleh menukar nilai di dalam objek atau tatasusunan. Ini kerana objek dan tatasusunan JS diluluskan melalui rujukan, dan untuk Vue, walaupun ada kemungkinan untuk melarang perubahan tersebut, ia akan menyebabkan kehilangan prestasi yang besar, dan keuntungan melebihi keuntungan.

      Apakah mod dan prinsip penghalaan biasa dalam Penghala Vue?

      1. Mod cincang: Nilai

      • location.hash ialah perkara selepas # dalam url. Cirinya ialah walaupun cincangan muncul dalam URL, ia tidak akan disertakan dalam permintaan HTTP dan tidak mempunyai kesan pada bahagian belakang sama sekali, jadi menukar cincang tidak akan memuatkan semula halaman.
      • Anda boleh menambah acara pemantauan window.addEventListener("hashchange", funcRef, false) untuk perubahan dalam cincangan Setiap kali hash (window.location.hash) ditukar, rekod akan ditambahkan pada sejarah akses penyemak imbas Menggunakan ciri cincang di atas, anda boleh melaksanakan bahagian hadapan Laluan mengemas kini paparan tetapi tidak meminta semula halaman .
        Ciri: Keserasian yang baik tetapi tidak cantik
        

      2. Mod sejarah:

      Gunakan kaedah pushState() dan replaceState() baharu dalam Antara Muka Sejarah HTML5 .
      Kedua-dua kaedah ini digunakan pada timbunan sejarah penyemak imbas Berdasarkan back, forward dan go yang sedia ada, ia menyediakan fungsi mengubah suai rekod sejarah.
      Kedua-dua kaedah ini mempunyai satu persamaan: apabila mereka dipanggil untuk mengubah suai timbunan sejarah penyemak imbas, walaupun url semasa telah berubah, penyemak imbas tidak akan menyegarkan halaman Ini menyebabkan masalah "mengemas kini paparan tetapi tidak mengemas kini the view" untuk penghalaan bahagian hadapan aplikasi satu halaman. "Halaman Permintaan" menyediakan
      Ciri asas: Walaupun ia cantik, 404 akan muncul apabila menyegarkan dan memerlukan konfigurasi bahagian belakang.

      Penghalaan dinamik?

      Banyak kali, kita perlu memetakan laluan untuk corak padanan yang diberikan kepada komponen yang sama, kita perlu menentukan penghalaan dinamik. Sebagai contoh, kami mempunyai komponen Pengguna, yang mesti digunakan untuk memaparkan semua pengguna dengan ID yang berbeza. Kemudian, kita boleh menggunakan 动态路径参数（dynamic segment） dalam laluan penghalaan vue-router untuk mencapai kesan ini: {path: '/user/:id', compenent: User}, dengan :id ialah parameter laluan dinamik.

      Memahami Vuex?

      • Konsep:
        Vuex ialah perpustakaan pengurusan negeri yang didedikasikan untuk Vue secara berpusat mengurus keadaan aplikasi secara global dan menggunakan peraturan yang sepadan untuk memastikan bahawa negeri dikekalkan dengan cara yang boleh dipercayai.
        

      • Masalah diselesaikan:
        Masalah utama yang diselesaikan Vuex ialah perkongsian keadaan antara berbilang komponen. Walaupun perkongsian keadaan juga boleh dicapai menggunakan pelbagai kaedah komunikasi, selalunya perlu mengekalkan ketekalan keadaan di antara pelbagai komponen Model ini terdedah kepada masalah dan merumitkan logik program. Vuex mengekstrak keadaan komponen yang dikongsi dan mengurusnya dalam mod tunggal global, supaya mana-mana komponen boleh memperoleh dan mengubah suai keadaan dengan cara yang konsisten juga boleh memastikan aliran sehala yang mudah, menjadikan kod itu lebih cekap dan mudah untuk mengekalkan.
        

      • Bila menggunakan:
        Vuex tidak perlu, ia boleh mengurus keadaan, tetapi ia juga membawa lebih banyak konsep dan rangka kerja. Jika kami tidak bercadang untuk membangunkan aplikasi satu halaman yang besar atau tidak terdapat sejumlah besar keadaan global untuk dikekalkan dalam aplikasi, tidak perlu menggunakan Vuex Mod kedai yang mudah sudah memadai. Jika tidak, Vuex akan menjadi pilihan semula jadi.

      • Penggunaan:
        Vuex meletakkan keadaan global ke dalam objek state, yang dengan sendirinya ialah pepohon keadaan Gunakan contoh store dalam komponen untuk akses status ini; kemudian gunakan kaedah state yang sepadan untuk mengubah suai status ini, dan hanya gunakan mutation untuk mengubah suai status dan panggil kaedah mutation dalam komponen untuk menyerahkan commit jika terdapat operasi tak segerak atau kombinasi logik kompleks dalam aplikasi, anda perlu menulis mutation, selepas pelaksanaan, jika terdapat pengubahsuaian keadaan, action masih perlu diserahkan, dan mutation dihantar melalui dispatch dalam komponen. Langkah terakhir ialah pemodulatan Gunakan pilihan action untuk mengatur sub-modul berpecah Apabila mengakses keadaan, anda perlu menambah nama sub-modul Jika sub-modul mempunyai tetapan modules. kemudian serahkan namespace dan hantar mutation memerlukan awalan ruang nama tambahan. action

      Bagaimana untuk menyelesaikan masalah kehilangan status Vuex selepas muat semula halaman?

      Vuex hanya menyimpan keadaan dalam ingatan, yang akan hilang selepas disegarkan Jika ia mahu diteruskan, ia perlu disimpan.

      sangat sesuai Apabila menyerahkan localStorage, simpan mutation pada masa yang sama, dan ambil nilai daripada localStorage sebagai nilai awal store. state

      Anda juga boleh menggunakan pemalam pihak ketiga Adalah disyorkan untuk menggunakan pemalam

      Ia adalah pemalam untuk storan berterusan Vuex. Ia tidak memerlukan anda mengakses secara manual 🎜>, tetapi terus menyimpan keadaan ke vuex-persist atau storage. cookielocalStorage

      Mengenai Vue SSR?
      atau

      bermaksud Vue memaparkan teg ke dalam html pada bahagian klien dan melengkapkannya pada bahagian pelayan, dan kemudian mengembalikan html terus kepada klien. SSR

      • Kelebihan:
        Mempunyai SEO yang lebih baik dan skrin pertama dimuatkan dengan lebih pantas.
      • Kelemahan:
        Syarat pembangunan akan dihadkan hanya menyokong dua cangkuk, sebelumCreate dan dibuat Apabila kami memerlukan beberapa pustaka sambungan luaran, aplikasi pemaparan sisi pelayan juga diperlukan berada dalam persekitaran berjalan Node. Pelayan akan mempunyai keperluan beban yang lebih besar.

      Apakah kaedah pengoptimuman prestasi yang anda tahu tentang Vue?

      • Malas memuatkan laluan. Bahagikan saiz aplikasi dengan berkesan dan muatkannya secara tidak segerak apabila diakses.
      • keep-aliveCache halaman. Elakkan penciptaan pendua contoh komponen dan kekalkan keadaan komponen cache.
      • v-for traversal mengelak menggunakan v-if pada masa yang sama. Malah, ia sudah menjadi penggunaan yang salah dalam Vue 3.
      • Pengoptimuman prestasi senarai panjang, senarai maya boleh digunakan.
      • v-once. Gunakan v-once untuk data yang tidak lagi berubah.
      • Acara musnah. Selepas komponen dimusnahkan, pembolehubah global dan pemasa dimusnahkan.
      • Imej dimuatkan dengan malas.
      • Pemalam pihak ketiga diperkenalkan atas permintaan.
      • Pecahan subkomponen. Komponen keadaan yang lebih berat sesuai untuk membelah.
      • Pemarahan bahagian pelayan.

      (Mempelajari perkongsian video: tutorial pengenalan vuejs, Video pengaturcaraan asas)

      	SPA	MPA
      组成	一个主页面和多个页面片段	多个主页面
      url模式	hash模式	history模式
      SEO搜索引擎优化	难实现，可使用SSR方式改善	容易实现
      数据传递	容易	通过url、cookie、localStorage等传递
      页面切换	速度快，用户体验良好	切换加载资源，速度慢，用户体验差
      维护成本	相对容易	相对复杂

      SPA

      MPA

      Komposisi

      Satu halaman utama dan berbilang serpihan halaman

      Berbilang halaman utama

      url mod

      mod cincang

      mod sejarah

      Pengoptimuman enjin carian SEO

      Sukar untuk dilaksanakan, tetapi boleh Gunakan kaedah SSR untuk menambah baik

      Mudah untuk dilaksanakan

      Pemindahan data

      Mudah

      melalui url, kuki , localStorage Menunggu penghantaran

      Penukaran halaman

      Kelajuan pantas, pengalaman pengguna yang baik

      Menukar sumber pemuatan, kelajuan perlahan, pengguna lemah pengalaman

      Kos penyelenggaraan

      Agak mudah

      Agak kompleks

Atas ialah kandungan terperinci [Disusun dan dikongsi] Beberapa soalan temu bual Vue biasa (dengan analisis jawapan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!