[Kompilasi dan ringkasan] 45+ soalan temuduga Vue untuk membantu anda menyatukan mata pengetahuan anda!

Artikel ini meringkaskan dan berkongsi beberapa Vue soalan temu bual (dengan analisis jawapan) untuk membantu anda menyusun pengetahuan asas dan meningkatkan rizab pengetahuan Vue anda Adalah berbaloi untuk dikumpulkan, datang dan lihat!

1. Terangkan secara ringkas kitaran hayat Vue

Idea jawapan:

• Vue Apakah kitaran hayat?

• Vue Apakah peringkat kitaran hayat?

• Vue Proses kitaran hayat?

• Digabungkan dengan amalan

• Pelanjutan: Perubahan dalam Vue3Vue Perubahan kitaran hayat [Cadangan berkaitan: tutorial video vuejs , pembangunan bahagian hadapan web]

Contoh jawapan:

• Perkataan kitaran hayat sepatutnya mudah untuk memahami , kita sering menghadapinya dalam kehidupan kita Contohnya, apabila bercakap tentang kitaran hidup seseorang, kita akan mengatakan bahawa seseorang itu akan melalui beberapa peringkat dalam hidupnya: bayi, kanak-kanak, remaja, belia, pertengahan umur dan tua. umur. Perkara yang sama berlaku untuk kitaran hayat Vue Setiap komponen dalam Vue akan melalui proses daripada buat kepada lekapkan kepada kemas kini dan kemudiannya untuk Musnahkan peringkat , dan dalam peringkat ini, Vue akan menjalankan fungsi yang dipanggil cangkuk kitaran hayat , supaya kami berpeluang menambah kod kami sendiri pada peringkat tertentu .

• Kitaran hayat Vue boleh dibahagikan kepada 8 peringkat: sebelum dan selepas penciptaan, sebelum dan selepas pemasangan, sebelum dan selepas kemas kini, sebelum dan selepas pemusnahan, dan kitaran hayat beberapa senario istimewa (keep-alive apabila diaktifkan, apabila menangkap ralat komponen keturunan ). Vue3 Turut ditambah ialah tiga adegan baharu untuk penyahpepijatan dan pemaparan sebelah pelayan.

• API fungsi cangkuk yang sepadan dengan peringkat ini ialah: beforeCreate create beforeMount mounted beforeUpdate updated activated(keep-alive 激活时调用) deactivated(keep-alive 停用时调用) beforeDestory destoryed errorCaptured（捕获子孙组件错误时调用）. Kebanyakan perubahan dalam

  dalam Vue3 hanya perlu diawali dengan pada, sebagai contoh, mounted menjadi onMounted, kecuali beforeDestroy dan destroyed dinamakan semula kepada beforeUnmount dan unMounted (supaya ia berbeza daripada sebelumnya beforeMount Sepadan dengan mounted, gangguan obsesif-kompulsif bermakna hebat?)

• beforeCreate dipanggil sebelum penciptaan komponen , biasanya digunakan Lakukan beberapa tugasan permulaan semasa pembangunan pemalam; created dipanggil selepas komponen dibuat, dan boleh mengakses pelbagai data, meminta data antara muka, dsb.; 🎜> dipanggil apabila komponen dipasang untuk mengakses data , elemen, sub-komponen, dll.; mounteddom dipanggil sebelum kemas kini dan boleh digunakan untuk mendapatkan pelbagai keadaan sebelum kemas kini; beforeUpdate Dipanggil apabila kemas kini selesai >view Dipanggil sebelum kejadian dimusnahkan, yang boleh digunakan untuk membatalkan beberapa pemasa atau langganan updated Dipanggil apabila kejadian dimusnahkan, ia boleh membersihkan pautan dengan kejadian lain; , lepaskan semua arahan dan pendengar acaranya. beforeUnmountunMounted Dalam Vue3:

  dilaksanakan sebelum
• ; dan tiada

  dan setup. createdbeforeCreatecreated2 Cara melakukan pengurusan kebenaran dalam Vue

Keperluan umum untuk pengurusan kebenaran ialah kebenaran halaman dan butang Pengurusan kebenaran

Pelaksanaan khusus dibahagikan kepada dua penyelesaian: pelaksanaan bahagian hadapan dan pelaksanaan bahagian belakang: Penyelesaian bahagian hadapan akan mengkonfigurasikan semua maklumat penghalaan pada bahagian hadapan , dan memerlukan pengguna untuk log masuk melalui pengawal laluan Selepas pengguna log masuk, jadual penghalaan akan ditapis keluar berdasarkan pada peranan , dan kemudian laluan akan ditambahkan secara dinamik dalam >. Sebagai contoh, saya akan mengkonfigurasi tatasusunan asyncRoutes dan untuk halaman yang memerlukan pengesahan, tambahkan medan meta dalam penghalaan roles, dan seterusnya untuk mendapatkan peranan pengguna Kemudian ambil persimpangan kedua-duanya Jika hasilnya tidak kosong, ini bermakna ia boleh diakses. Selepas menapis, laluan yang tinggal ialah halaman yang boleh diakses oleh pengguna Akhirnya, laluan boleh ditambah secara dinamik melalui router.addRoutes(accessRoutes).

Penyelesaian bahagian belakang akan menyimpan semua maklumat penghalaan halaman dalam pangkalan data Apabila pengguna log masuk, semua maklumat penghalaan yang boleh diaksesnya akan dikembalikan ke bahagian hadapan pada pertanyaan peranannya, dan bahagian hadapan akan lulus addRoute Tambahkan maklumat penghalaan secara dinamik.

Kawalan kebenaran butang biasanya melaksanakan perintah, seperti v-permission dan menyerahkan peranan yang diperlukan butang kepada v-permission mengikut nilai Arahan, dalam cangkuk mounted arahan, anda boleh menentukan sama ada terdapat persilangan antara peranan pengguna semasa dan butang Jika terdapat persimpangan, butang akan dikekalkan tidak, butang akan dialih keluar.

Kelebihan penyelesaian bahagian hadapan tulen ialah ianya mudah dan tidak memerlukan kebenaran tambahan untuk mengurus halaman, penyelenggaraan adalah masalah besar Terdapat halaman baharu dan keperluan peranan memerlukan pengubahsuaian kod bahagian hadapan dan pembungkusan semula dan penggunaanpenyelesaian pelayan tidak mempunyai masalah ini maklumat kebenaran butang melalui halaman pengurusan peranan dan kebenaran khusus Kepada pangkalan data, aplikasi memperoleh maklumat laluan terkini setiap kali ia log masuk.

Dalam perkataan saya sendiri: Pengurusan kebenaran biasanya dibahagikan kepada kebenaran halaman dan kebenaran butang, dan pelan pelaksanaan khusus dibahagikan kepada pelaksanaan bahagian hadapan dan belakang- pelaksanaan akhir. Pelaksanaan bahagian hadapan akan berada di hujung hadapan Mengekalkan tatasusunan penghalaan dinamik, menapis halaman dengan kebenaran berdasarkan peranan pengguna selepas log masuk, dan akhirnya menambah dinamik pada melalui addRoute; dalam pelaksanaan bahagian belakang ialah laluan ini dikembalikan oleh bahagian belakang Ke bahagian hadapan, bahagian hadapan menambahkannya secara dinamik. Kebenaran butang biasanya melaksanakan router untuk mengawal sama ada butang dipaparkan dengan menentukan sama ada pengguna mempunyai kebenaran. Kelebihan penyelesaian bahagian hadapan tulen ialah ia mudah untuk dilaksanakan, tetapi ia mempunyai masalah penyelenggaraan yang besar. Jika terdapat keperluan halaman dan peranan baharu, kod tersebut perlu ditukar dan dibungkus semula dan digunakan Masalah ini tidak wujud bahagian pelayan. v-permission

3. Penggunaan dan prinsip pengikatan dua hala dalam Vue

Idea jawapan:

• Apakah pengikatan dua hala?

• Apakah faedah pengikatan dua hala?

• Di manakah hendak menggunakan pengikatan dua hala?

• Cara menggunakan pengikatan dua hala, butiran penggunaan, perubahan dalam Vue3

• Penerangan pelaksanaan prinsip

Jawapan:

• Pengikatan dua hala dalam Vue ialah arahan

  yang boleh mengikat data reaktif pada paparan manakala dalam paparan Perubahan boleh juga menukar nilai ini. v-model

• ialah gula sintaks (secara lalai) adalah untuk menggantung pembolehubah pada v-model melalui :value, dan kemudian mendengar acara dom Perubahan. dalam input menukar nilai pembolehubah. Kelebihan menggunakan dom ialah ia mudah, mengurangkan banyak pemprosesan acara yang membosankan dan meningkatkan kecekapan pembangunan. v-model

• biasanya digunakan pada borang

  juga boleh digunakan pada komponen tersuai untuk mewakili kawalan input dan output nilai tertentu. v-model

• boleh digabungkan dengan pengubah suai untuk kelayakan lanjut (malas/nombor/trim Ia sedikit berbeza apabila digunakan pada komponen tersuai Ia bersamaan dengan memberikan atribut

  ). sub-komponen. dan peristiwa modelValue; dalam Vue3, anda juga boleh menentukan berbilang pengikatan yang berbeza dalam bentuk parameter. peristiwa. update:modelValuev-model:foofooupdate:foo

  sebagai arahan, prinsipnya ialah pengkompil Vue akan menukarnya menjadi
peristiwa pengikatan atribut nilai dan pendengaran input
• , seperti yang dinyatakan di atas Secara lalai, pengkompil sebenarnya akan memperuntukkan peristiwa yang berbeza mengikut elemen bentuk yang berbeza Contohnya,

  dan v-model jenis akan ditukar kepada acara dan checkbox. radioinputcheckedchange

  4. Apakah komunikasi antara komponen Vue?

Terdapat jenis komunikasi berikut antara komponen Vue:

• $emit, $on, $off, $once (tiga yang terakhir telah dimansuhkan dalam Vue3)

• $children(ditamatkan dalam Vue3), $parent

• $attrs, $listeners (ditamatkan dalam Vue3)

• ref

• $root

• eventbus ( Ini tidak mudah digunakan dalam Vue3, anda perlu merangkumnya sendiri) >

• Senario penggunaan tekan lama kaedah di atas boleh dibahagikan kepada:

  vuexpinia

Boleh digunakan antara komponen ibu bapa dan anak

• provide + inject /

  /
/

/

boleh digunakan antara komponen adik beradik

• /

  / props / $emit$parentref$attrs

  Boleh digunakan merentas lapisan dan antara komponen

• /

  /

  $parent$rooteventbusvuex

  5 Apakah kaedah pengoptimuman prestasi Vue yang anda tahu?

• Laluan pemuatan malas: pecahkan saiz eventbus dengan berkesan, apabila diakses Muatkan secara tak segerak vuex piniaprovide + inject

Halaman cache: elakkan membuat komponen berulang kali kejadian dan simpan status komponen cache

• App

Gunakan

untuk menggunakan semula

const router = createRouter({
    routes: [
        { path : '/foo', component: () => import('./foo.vue)}
    ]
})

: elakkan membuat komponen berulang kali

• keep-alive

  traversal untuk mengelak daripada menggunakan
pada masa yang sama ( Sebenarnya, ini adalah cara yang salah untuk menulisnya dalam Vue3)

<keep-alive>
  <router-view v-if="$route.meta.keepAlive == true"></router-view>
</keep-alive>
<router-view v-if="$route.meta.keepAlive != true"></router-view>

• dan v-show: gunakan DOM untuk data yang tidak lagi berubah; gunakan

• Pengoptimuman prestasi senarai panjang: Jika senarai panjang data besar, tatal maya boleh digunakan untuk membuat hanya sebahagian kecil kandungan. Pemusnahan beberapa pustaka sumber terbuka (v-for / v-if)

• peristiwa: Apabila komponen Vue dimusnahkan, semua arahan dan pendengar acaranya akan dilepaskan secara automatik, tetapi hanya untuk komponen itu sendiri. v-oncev-memov-oncev-memoMalas memuatkan imej, tersuai

  arahan (projek rujukan:
)

• vue-virtual-scrollervue-virtual-scroll-gridPemalam pihak ketiga diperkenalkan atas permintaan

  Elakkan terlalu besar

• Strategi pemisahan subkomponen: Komponen keadaan yang lebih berat sesuai untuk pemisahan

• v-lazyvue-lazyload Pelayan -penyelesaian render sisi dahulu Masalah rendering skrin lambat

• element-plus 6. Bagaimana untuk menyelesaikan masalah kehilangan keadaan Vuex selepas menyegarkan?

• Idea:

• SSRMengapa keadaan Vuex hilang selepas disegarkan?

Penyelesaian

Perbincangan mengenai perpustakaan dan prinsip pihak ketiga

Pemahaman peribadi
• Jawapan:

• Oleh kerana Vuex hanya menyimpan keadaan dalam ingatan, ia akan hilang selepas menyegarkan semula , anda perlu menyimpannya.

• boleh menggunakan

  untuk menyimpan status
, mengambil nilai daripada

sebagai nilai awal

dan menyimpannya apabila menyerahkan .

• Anda boleh menggunakan pemalam seperti

  dan
, dan anda boleh mengawal pemalam yang perlu diteruskan melalui pilihan pemalam. Prinsip dalaman adalah untuk melaksanakan pemprosesan bersatu dengan melanggan perubahan
• .

  localStorageVuexstoreAda dua soalan di sini. Satu ialah bagaimana jika pengguna menukar secara manual state? Kemudian bukankah status dalam mutation saya juga berubah? Kedua, kerana localStorage hanya boleh menyimpan rentetan, kami hanya boleh menukar data menjadi rentetan melalui

  dan apabila data yang kami simpan adalah rujukan seperti
,
• dan

  taip data, vuex-persist akan menjadi vuex-persistedstate dan hilang selepas penukaran. mutation

• Penyelesaian saya untuk masalah pertama ialah mengosongkan data dengan mendengar acara

  localStorageVuexlocalStorage APITiada penyelesaian untuk masalah kedua Anda hanya boleh memilih untuk tidak menggunakan jenis rujukan JSON.stringify dan Map. SetFunctionJSON.stringify7. Mengapakah Vue3 menggunakan Proxy dan bukannya defineProperty?{}

Idea:

storage

window.addEventListener("storage", function () {
    localStorage.clear();
    window.location.href = '/login'
    console.error("不要修改localStorage的值~~~");
});

Atribut pemintasan Beberapa caraMapSet

Masalah dengan defineProperty

Kelebihan Proksi

Pertimbangan lain
• Jawapan:

• Terdapat tiga cara biasa untuk melakukan pemintasan atribut:
,
• dan

• Vue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。

• 以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。

• Proxy 有兼容性问题，完全不支持IE

8. 怎么实现路由懒加载？

思路：

• 必要性

• 何时用

• 怎么用

• 使用细节

回答：

• 当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。

• 一般来说，对于所有的路由都使用动态导入是个好主意

• 给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：

{
  path: '/login',
  component: () => import('../views/login/Login.vue')
},

• 结合注释

{
  path: '/login',
  component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},

vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件

9. history模式 和 hash 模式有何区别？

• Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，

• hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。

• 在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。

10. 说说 nextTick 的使用和原理？

• 在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。

• Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态 在开发时，有两个场景我们会用到 nextTick ：

  • created 中想要获取 DOM;
  • 响应式数据变化后获取 DOM 更新后的状态;

• nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。

11. v-for 和 v-if 优先级

先回答答案：在 vue2 中， v-for 的优先级更高 但是在 vue3 中， v-if 的优先级更高

拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起， 怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中

dokumentasi vue2dokumentasi vue3

12.

• tonton

• store.subscribe()

watch cara, Anda boleh memantau $store.state.xx dalam bentuk rentetan; parameter kaedah subscribe ialah fungsi panggil balik menerima objek mutation dan objek state. Kaedah wtach adalah lebih mudah dan lebih mudah untuk digunakan, mutation.type sedikit lebih rumit, dan biasanya digunakan dalam pemalam subscribe (anda boleh menyebut pemalam vuex persistence vuex, vuex-persist) vuex-persistedstate

13 Anda Apakah pada pendapat anda kekurangan Vuex?

• Tidak menyokong kegigihan dan keadaan muat semula halaman akan hilang

• Menggunakan modul adalah menyusahkan

• Tidak disokong

  (atau sangat tidak mesra)ts

vue3 + pinia akan menjadi gabungan yang lebih baik.

14 Apakah persamaan dan perbezaan antara ref dan reaktif?

• Kedua-duanya boleh mengembalikan objek reaktif,

  mengembalikan objek reaktif. ref objek, Ref mengembalikan objek proksi reaktif. reactive

• biasanya reaktif untuk memproses nilai tunggal, ref digunakan untuk memproses data reaktif jenis objek reactive

• Ia perlu diakses melalui ref dan .value akan dialih keluar secara automatik dalam paparan ref tidak diperlukan .value tetapi masih dilaksanakan secara dalaman oleh ref jika ia menerima objek reactive Ia akan mengalih keluar reactive secara automatik; menggunakan operator spread untuk mengembangkan objek responsif yang dikembalikan Ref akan menyebabkan ia kehilangan responsifnya. Anda boleh menggabungkannya dengan ref untuk menukar nilai ke objek reactive dan kemudian kembangkannya. toRefs()Ref

• secara dalaman menggunakan proksi

  untuk memintas pelbagai operasi pada objek, manakala reactive secara dalaman merangkum kelas Prxoy dan menetapkan ref untuk memintas akses pengguna kepada objek. RefImplget value/set value

16. Bagaimana untuk melanjutkan komponen dalam Vue?

Peluasan logik:
• ,

  , mixins:extendscomposition api

Peluasan kandungan: slot

Sangat fleksibel, tetapi bercanggah dan mengelirukan.

ialah pilihan yang kurang biasa digunakan Perbezaan dengan mixins ialah ia hanya boleh mengembangkan satu objek dan mempunyai keutamaan yang lebih tinggi daripada extends. mixinsmixinsData dan kaedah bercampur

tidak dapat menentukan sumber dengan jelas

dan boleh menyebabkan konflik penamaan dengan pembolehubah dalam komponen semasa , api komposisi Masalah ini boleh diselesaikan dengan baik Modul responsif bebas boleh digunakan untuk menulis logik bebas dan menyediakan data responsif, yang meningkatkan kebolehbacaan dan kebolehselenggaraan kod.

Sambungan: Vue.mixin (global mixin) Vue.extend (sedikit seperti warisan kelas/komponen untuk mencipta subkelas)

17 vue Apakah itu -loader?

• ialah pemuat webpack untuk mengendalikan komponen fail tunggal (SFC)

  vue-loader

Disebabkan
• , Kami boleh tulis kod dalam bentuk

  fail dan bahagikan kod kepada vue-loader .vue templatescriptstyle

• Apabila pembungkusan, ia akan berakhir dengan

  Apabila panggilan kaedah webpackloadervue-loader

• dilaksanakan, ia akan memproses setiap blok bahasa dalam

  dengan rantai vue-loader yang berasingan, dan akhirnya memproses Blok berasingan ini dipasang ke dalam modul komponen akhir SFCloader

18. Bolehkah komponen anak mengubah suai data komponen induk

tidak boleh diubah suai secara langsung?

Terdapat prinsip aliran data sehala dalam pembangunan komponen Adalah wajar untuk tidak mengubah suai data komponen induk dalam komponen anak

Jika anda benar-benar perlu membuat perubahan, sila hantar acara kepada komponen induk melalui emit

dalam komponen induk

19. Bagaimana untuk menentukan penghalaan dinamik dan bagaimana untuk mendapatkan parameter dinamik yang diluluskan?

Kita boleh menggunakan medan dinamik dalam laluan untuk mencapai ini, seperti /users/:id dengan :id ialah parameter laluan. Ia boleh diperolehi melalui this.$route.parmas, dan boleh terdapat berbilang parameter Objek $route juga mendedahkan maklumat berguna lain seperti query hash, dsb.

20 Bercakap tentang pemahaman anda tentang responsif data Vue

Pemikiran:

• Apakah responsif?

• Mengapa vue perlu responsif?

• Apakah faedahnya?

• Bagaimanakah responsif vue dilaksanakan, dan apakah kelebihan dan kekurangannya?

• Perubahan baharu dalam responsif dalam vue3

Jawapan:

• Responsif data ialah mekanisme yang boleh mengesan perubahan data dan bertindak balas

• Masalah utama yang perlu diselesaikan dalam vue ialah menyambungkan lapisan data dan lapisan paparan dipacu oleh perubahan data. Untuk melakukan ini, data perlu diproses secara responsif.

• Dengan responsif data dan algoritma DOM dan patch maya, kami hanya perlu mengendalikan data dan mengambil berat tentang perniagaan, dan tidak perlu menyentuh operasi dan menaip Peningkatan kecekapan pembangunan dan mengurangkan kesukaran pembangunan. Teras pelaksanaan responsif data dalam DOM

• ialah memintas data melalui kaedah vue2 Apabila Object.defineProperty() data dikumpul, kebergantungan dikumpul dan apabila get data dikumpul, pemberitahuan kemas kini dibuat. Mekanisme ini sangat baik untuk menyelesaikan masalah responsif data, tetapi terdapat juga kekurangan dalam penggunaan sebenar Sebagai contoh, rekursif traversal semasa set permulaan akan menyebabkan kehilangan prestasi tidak dapat memantau atribut baharu atau dipadam. , dalam , anda perlu menggunakan tertentu seperti vue untuk menambah dan memadam atribut tatasusunan objek, dan struktur data Vue.set/delete dan API tidak disokong, MaSet

Untuk menyelesaikan masalah ini,
• tulis semula bahagian pelaksanaan ini, menggunakan

  dalam Vue3 untuk memproksi data agar responsif. Ia mempunyai banyak faedah, prestasi permulaan dan ingatan dipertingkatkan dengan baik, dan tiada ES6 khas diperlukan, tetapi penyemak imbas Proxy tidak disokong. APIIE

21 Perkara yang perlu dilakukan daripada templat untuk dipaparkan

Tanya

Proses untuk

sebenarnya bertanya tentang vue template Bagaimana ia berfungsi. render编译器

Idea:

Perkenalkan konsep penyusun
Jelaskan keperluan penyusun
Terangkan aliran kerja pengkompil

Jawapan:

• Terdapat modul kompilasi unik yang dipanggil

  , fungsi utamanya adalah untuk menyusun Vue ke dalam compiler executable template fungsi jsrender

diperlukan Proses penyusunan ini adalah untuk memudahkan penulisan templat pandangan di universiti kami. Sebagai perbandingan, kami masih lebih suka menggunakan
• untuk menulis pandangan, yang intuitif dan cekap. Fungsi

  tulisan tangan bukan sahaja tidak cekap, tetapi juga kehilangan keupayaan untuk dioptimumkan oleh pengkompil. HTMLrender

• Pengkompil akan mula-mula memproses

  ( Vue ), dan kemudian mendapatkan pepohon sintaks abstrak template进行解析 dan kemudian melakukan pemprosesan dan penukaran mendalam pada Parse ( AST), dan akhirnya menjana AST yang terhasil ke dalam kod transform, iaitu fungsi AST jsrender

22 komponen

Komponen cache boleh menggunakan komponen
• , dan termasuk dan tidak termasuk boleh menentukan komponen yang hendak disertakan dan dikecualikan. Penggunaan

  keep-alive

• digabungkan dengan

  telah banyak berubah sebelum ini Vue3 mengandungi vue-router, kini keep-alive mengandungi router-view<.>router-viewkeep-alive

  Jika anda ingin mendapatkan data selepas caching, anda boleh menggunakan cangkuk
atau
• (pengawal

  ) activedbeforeRouteEntervue-router

ialah komponen umum Ia mentakrifkan
• secara dalaman untuk cache contoh komponen yang dibuat komponen wujud dalam peta, ia akan dikembalikan terus. Memandangkan atribut

  keep-alive ialah data reaktif, apabila ia berubah, fungsi map component akan dilaksanakan semula. vnode

23 DOM Maya

• Maya DOM Apakah itu? Intipati DOM maya ialah objek Javascript.

• Mengapa memperkenalkan maya DOM? (faedah) Ia boleh mengurangkan bilangan operasi DOM dengan berkesan dan memudahkan platform merentas

• Bagaimana untuk menjana DOM maya? compiler Pengkompil akan menyusun templat template ke dalam fungsi pemaparan ini kemudiannya akan dipanggil semasa proses pemasangan mount, dan objek yang dikembalikan ialah 虚拟DOM. Selepas pemasangan selesai, proses kemas kini akan masuk. Jika beberapa data responsif berubah, ia akan menyebabkan komponen di-render Pada masa ini, 虚拟DOM baharu akan dijana dan hasil pemaparan terakhir akan diff dikendalikan, dengan jumlah operasi minimum. dom, dengan itu mengemas kini paparan dengan cekap.

24 Apakah itu komponen tak segerak? Komponen yang dimuatkan. Dalam aplikasi yang besar, kita perlu membahagikan kod kepada ketulan yang lebih kecil dan menggunakan komponen tak segerak.

• Bukan sahaja anda boleh malas memuatkan komponen apabila penghalaan ditukar, anda juga boleh menggunakan komponen tak segerak dalam komponen untuk membahagikan kod dengan lebih halus.

• Cara paling mudah untuk menggunakan komponen tak segerak ialah dengan menetapkan fungsi

  terus kepada

  , yang boleh dilaksanakan dengan cepat dalam kombinasi dengan fungsi yang diimport secara dinamik modul ES
.
• juga boleh digabungkan dengan komponen

  untuk menggunakan komponen tak segerak. defineAsyncComponetloaderimportVue3Komponen tak segerak mudah dikelirukan dengan penghalaan pemuatan malas, yang sebenarnya bukan perkara yang sama. Komponen tak segerak tidak boleh digunakan untuk menentukan laluan pemuatan malas Ia dikendalikan oleh rangka kerja Suspense dan pemuatan komponen penghalaan dikendalikan oleh

  . Tetapi anda boleh menggunakan komponen tak segerak dalam komponen penghalaan yang dimuatkan malas.

• Vuevue-router25 Mari kita bincangkan tentang idea pengoptimuman senarai panjang Vue

Elakkan jumlah data yang banyak: Anda boleh menggunakan halaman untuk mendapatkannya. Elakkan daripada memaparkan sejumlah besar data: penyelesaian tatal maya seperti vue-virtual-scroller hanya memaparkan data dalam julat port pandang

Elakkan mengemas kini: anda boleh menggunakan kaedah
• untuk memaparkan sahaja sekali
• Kemas kini Optimumkan: Gunakan v-memo untuk cache nombor kumpulan, kemas kini bersyarat, tingkatkan penggunaan dan elakkan kemas kini yang tidak perlu
• Muatkan data atas permintaan: Anda boleh menggunakan kaedah v-once untuk memuatkan data apabila pengguna memerlukannya.
• 26 dikira & tonton懒加载

ialah sifat yang dikira dan

ialah pendengar.

• computedwatch biasanya digunakan untuk mengendalikan logik kompleks dalam templat, manakala

  biasanya digunakan apabila anda perlu memantau perubahan dalam objek responsif dan melakukan beberapa operasi

• computedwatch boleh melakukan operasi tak segerak,

  tidak boleh.

• watchSifat yang dikira melepasi objek dengan dua pilihan: computed dan

  , yang dipanggil sifat yang boleh dibaca dan boleh ditulis Jika sesuatu fungsi diluluskan, lalainya ialah Ia adalah Pilihan
• boleh melepasi objek dan menetapkan pilihan seperti dalam dan serta-merta. tidak lagi mengesan a Untuk ungkapan rentetan selain daripada pengendali titik,

  dan set baharu dalam get boleh menggantikan sepenuhnya pilihan get dan lebih berkuasa watch

• 27. Apakah perbezaan antara SPA dan SSR? vue3watchreactivity APIwatchwatchEffectwatch (Permohonan Halaman Tunggal) ialah

  aplikasi satu halaman
. Ia juga biasanya dipanggil

pemaparan sebelah pelanggan

, atau ringkasnya . SSR (Server Side Render) ialah server side rendering

. Ia juga biasanya dipanggil

Aplikasi Berbilang Halaman
• (Aplikasi Halaman Berganda), dirujuk sebagai MPA.

  SPA hanya akan meminta fail buat kali pertama, dan kemudian hanya CSR data akan diminta, jadi pengalaman pengguna lebih baik, lalu lintas disimpan , dan tekanan pelayan adalah kurang . Tetapi skrin pertama akan mengambil masa yang lebih lama untuk dimuatkan dan tidak mesra pengguna. Untuk menyelesaikan kekurangan di atas, terdapat penyelesaian Memandangkan kandungan dijana sekali pada pelayan, skrin pertama dimuatkan dengan cepat, dan enjin carian juga boleh merangkak maklumat halaman dengan mudah. Tetapi pada masa yang sama, penyelesaian juga akan menghadapi masalah seperti prestasi dan pembangunan terhad.

• Dari segi pemilihan, jika terdapat keperluan pengoptimuman pemuatan skrin pertama dan keperluan SEO, anda boleh mempertimbangkan SSR. SPAhtmlJSONSEOTetapi ini bukan satu-satunya alternatif Sebagai contoh, untuk sesetengah tapak web statik yang tidak kerap berubah, SSR membazirkan sumber. Selain itu, SSR memberikan kami penyelesaian penjanaan laman web statik SSG, yang juga merupakan penyelesaian laman web statik yang baik Digabungkan dengan beberapa kaedah CI, ia boleh mencapai kesan pengoptimuman yang baik. HTML

28. diff 算法

回答思路：

• diff算法是干什么的？

• 必要性

• 何时执行

• 具体执行方式

• 拔高：说一下vue3中的优化

回答：

• Vue 中的 diff 算法称为 patching 算法，虚拟DOM要想转化为真实DOM就需要通过 patch 方法转换。

• 最初 Vue1.x 视图中农每个依赖均有更新函数对应，可以做到精确更新，因此不需要 虚拟DOM 和 patching 算法支持，但是这样粒度过细导致 Vue1.x 无法承载较大应用；Vue2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，此时就需要引入 patching 算法才能精确找到发生变化的地方并高效更新。

• vue 中 diff 执行的时刻是组件内响应式数据变更触发实例执行其更新函数时，更新函数会再次执行 render函数 获得最新的 虚拟DOM ，然后执行 patch函数，对比新旧虚拟DOM，将其转化为对应的 DOM 操作。

• patch 过程是一个递归过程，遵循深度优先、同层比较的策略；以 vue3 的patch 为例：

  • 首先判断两个节点是否为相同同类节点，不同则删除重新创建
  • 如果双方都是文本则更新文本内容
  • 如果双方都是元素节点则递归更新子元素，同时更新元素属性
  • 更新子节点时又分了几种情况：
    • 新的子节点是文本，老的子节点是数组则清空，并设置文本；
    • 新的子节点是文本，老的子节点是文本则直接更新文本；
    • 新的子节点是数组，老的子节点是文本则清空文本，并创建新子节点数组中的子元素；
    • 新的子节点是数组，老的子节点也是数组，那么比较两组子节点，更新细节blabla

• vue3 中引入的更新策略：编译期优化 patchFlags、block等

29. 如何从0到1架构一个Vue项目，说说有哪些步骤，插件，目录结构怎么组织

• 从 0 创建项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

• 目前vue3项目我会用vite或者create-vue创建项目

• 接下来引入必要插件：vue-router、vuex/pinia、element-plus、antd-vue、axios等等

• 其他常用的库有 像lodash、dayjs、nprogress等等..

• 下面是代码规范: editorconfig、prettier、eslint

• 最后是提交规范，可以使用husky、Commitizen

• 目录结构我喜欢按照下面的结构来

+ |- /src
+   |- /assets 存放资源
+     |- /img   
+     |- /css   
+     |- /font   
+     |- /data   
+   |- base-ui  存放多个项目中都会用到的公共组件
+   |- components 存放这个项目用到的公共组件
+   |- hooks 存放自定义hook
+   |- views 视图
+   |- store 状态管理
+   |- router 路由
+   |- service 网络请求
+   |- utils 工具
+   |- global 全局注册、全局常量..

30. 你如何实现一个Vue-Router

一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：

• 首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；

  • 保存用户传入的配置项
  • 监听 hash 或者 popstate 事件
  • 回调里根据 path 匹配对应路由

• 将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：

  • 实现两个全局组件：router-link和 router-view，分别实现页面跳转和内容显示
  • 定义两个全局变量：$router 和 $route，组件内可以访问当前路由和路由器实例

31. 什么情况需要使用Vuex模块？

• 在项目规模变大的之后，单独一个store对象会过于庞大臃肿，此时通过模块方式可以拆分来便于维护

• 可以按之前规则单独编写资规模代码，然后在主文件中通过 modules 选项组织起来：createStore({modules: {...}})

• Apabila menggunakannya, sila ambil perhatian bahawa anda perlu menambah nama modul berdaftar apabila mengakses status submodul. Tetapi pada masa yang sama, getters, mutations dan actions berada dalam ruang global dan boleh digunakan dengan cara yang sama seperti sebelum ini. Jika anda ingin mencapai pemisahan lengkap, anda perlu menambah pilihan namespace pada submodul Pada masa ini, anda perlu menambah awalan ruang nama apabila mengaksesnya.

• Kaedah modul boleh membahagikan kod, tetapi kelemahannya juga jelas ia menyusahkan untuk digunakan, terdedah kepada ralat, dan sokongan sistem jenis sangat lemah, yang tidak dapat membantu kami . Pinia jelas telah banyak bertambah baik dalam bidang ini dan sudah tiba masanya untuk beralih.

32 Mengapa komponen vue hanya boleh mempunyai 1 nod akar

• vue2 Komponen sederhana boleh sahaja? Terdapat satu pengikut, tetapi komponen dalam vue3 sudah boleh mempunyai berbilang komponen.

• Sebab mengapa ini diperlukan adalah kerana vdom ialah struktur pokok berakar tunggal Kaedah patch bermula dari nod akar apabila merentasi, dan ia hanya memerlukan satu punca nod. Komponen juga akan ditukar kepada vdom, yang semestinya memenuhi keperluan ini. Sebab mengapa berbilang nod akar boleh ditulis dalam

• vue3 adalah kerana konsep Fragment diperkenalkan, iaitu nod abstrak Jika komponen didapati mempunyai berbilang roots, Hanya buat Fragment nod dan gunakan berbilang nod akar sebagai childrennya. Pada masa hadapan, jika pathch didapati sebagai nod Fragment, ia akan terus melintasi children untuk mencipta atau mengemas kini.

33. Apakah senario penggunaan v-once?

• v-once ialah arahan terbina dalam vue, yang menjadikan komponen atau elemen yang ditentukan sekali sahaja dan melangkau kemas kini masa hadapan kepadanya.

• Jika kita mempunyai beberapa elemen atau komponen yang tidak lagi perlu diubah selepas pemaparan awal, ia sesuai digunakan v-once dalam kes ini, supaya walaupun data ini berubah, vue akan melompat Pengemaskinian berlebihan ialah kaedah pengoptimuman kod.

• Kita hanya perlu menambah v-once pada komponen atau elemen yang berfungsi.

Ditambahkan:

• vue3.2 Kemudian, v-memo telah ditambahkan dengan syarat ini boleh menyimpan templat dan mengawal pembaharuannya. Prinsip

• v-once: Apabila pengkompil mendapati terdapat v-once, ia akan menyimpan hasil pengiraan pertama dalam objek cache Apabila komponen dipaparkan semula, ia akan diperolehi daripada cache, dengan itu mengelakkan pengiraan berulang.

34 Apakah senario yang menggunakan penghalaan bersarang? digunakan dalam untuk menyatakan perhubungan ini.

Ungkapannya ialah apabila bertukar antara dua laluan, mereka mempunyai kandungan paparan biasa. Pada masa ini, komponen induk biasanya diekstrak dan
• diletakkan di dalam untuk membentuk sarang fizikal yang sepadan dengan sarang logik. Apabila mentakrifkan laluan bersarang, gunakan atribut url untuk mengatur hubungan bersarang vue-router
Pada dasarnya, kedalaman bersarang ditentukan dalam komponen
• dan kedalaman ini digunakan sebagai indeks padanan. tatasusunan komponen view-router , dapatkan komponen pemaparan yang sepadan dan jadikannya. children
• router-viewJika anda tidak dapat menjelaskannya, berikan sahaja contoh. Apabila saya membangunkan halaman, jika saya perlu memaparkan bar navigasi teratas dan melompat ke halaman berbeza melalui bar navigasi, dan bar navigasi teratas mesti dipaparkan pada setiap halaman, saya boleh menggunakan penghalaan bersarang, saya juga boleh memberikan contoh , apabila saya perlu melihat halaman butiran senarai, saya sering memerlukan penghalaan bersarang (matched)

35. Bagaimana untuk memantau perubahan status Vuex? detail/:id

tonton

• store.subscribe()

• cara, Anda boleh memantau

  dalam bentuk rentetan; parameter kaedah
ialah fungsi panggil balik menerima objek

dan objek

. Kaedah wtach adalah lebih mudah dan lebih mudah untuk digunakan, watch lebih menyusahkan sedikit, secara amnya $store.state.xxsubscribemutation 36. Apakah yang berlaku semasa proses pemasangan instance Vue? statemutation.typesubscribe

Proses memasang tika ialah proses app.mount(). Kemas kini mekanisme

• Pemula akan

  membuat contoh komponen, memulakan keadaan komponen, mencipta pelbagai data responsif

• Langkah mekanisme kemas kini resume ini akan segera melaksanakan fungsi kemas kini komponen, yang akan melaksanakan fungsi pemaparan buat kali pertama dan melaksanakan patch untuk menukar vnode sebelumnya kepada dom ; pada masa yang sama, ia akan menciptanya secara dalaman Kebergantungan antara data responsif dan fungsi kemas kini komponen membolehkan fungsi kemas kini yang sepadan dilaksanakan apabila data berubah pada masa hadapan.

37 Peranan kunci

• key terutamanya untuk mengemas kini virtualisasi dengan lebih cekapDOM .

• key ialah syarat utama vue dalam proses patch untuk menentukan sama ada dua nod adalah nod yang sama (yang satu lagi ialah jenis elemen), jika key tidak ditetapkan , nilainya ialah undefined, vue mungkin sentiasa dianggap sebagai dua nod yang sama, dan hanya boleh dikemas kini Ini mengakibatkan sejumlah besar operasi kemas kini dom, yang jelas tidak diingini.

• key mesti ditetapkan semasa penggunaan sebenar dan pengindeksan tatasusunan harus dielakkan sebanyak mungkin, yang mungkin membawa kepada beberapa bug tersembunyi.

38 tonton dan tontonEffect

• watchEffectJalankan fungsi dengan segera, jejak kebergantungannya secara pasif, luluskan fungsi yang dimasukkan bergantung pada sumber data yang dikumpul dan juga merupakan fungsi panggil balik watch mengesan satu atau lebih sumber data responsif dan memanggil fungsi panggil balik apabila sumber data berubah Pilihan immediate juga boleh ditetapkan untuk dilaksanakan sekali. .

• watchEffect ialah sejenis watch yang istimewa. Jika anda tidak mengambil berat tentang nilai sebelum dan selepas data responsif, anda boleh menggunakan watchEffect. Anda boleh menggunakan watch dalam situasi lain.

39 Penciptaan komponen ibu bapa-anak dan urutan pemasangan

ibu bapa dibuat -> dipasang

Sebab: Vue Penciptaan ialah proses rekursif Buat komponen induk terlebih dahulu Jika mempunyai komponen anak, ia akan mencipta komponen anak , komponen induk mesti dibuat dahulu Komponen mempunyai subkomponen; apabila subkomponen mula-mula dibuat, Mounted cangkuk akan ditambahkan pada baris gilir, dan ia akan dilaksanakan sehingga patch tamat mounted cangkuk subkomponen dipilih ke dalam baris gilir , jadi tunggu sehingga patch selesai melaksanakan cangkuk ini.

40 Bercakap tentang pemahaman anda tentang Vuex

• vuex ialah perpustakaan corak pengurusan negeri yang dibangunkan khas untuk aplikasi vue,

• Apabila anda menghadapi keadaan perkongsian berbilang komponen atau apabila komponen dalam projek sukar diurus, anda boleh menggunakan vuex, yang menguruskan keadaan global dalam mod tunggal global.

• Konsep teras asas termasuk keadaan, mutasi, tindakan, getter, modul, dll.

• Beritahu saya tentang pengalaman menggunakan proses ts tidak mesra dan modul menyusahkan untuk digunakan Data juga akan hilang apabila halaman dimuat semula

41. Apakah komponen rekursif? Apakah senario penggunaan?

• Jika komponen merujuk kepada dirinya sendiri dengan nama komponen, ini ialah komponen rekursif.

• Serupa dengan komponen Tree dan Menu, nod mereka selalunya mengandungi nod anak dan struktur nod anak selalunya sama dengan nod induk. Data komponen tersebut selalunya dalam struktur pokok, yang merupakan senario biasa untuk menggunakan komponen rekursif.

42. Adakah anda pernah menulis arahan tersuai?

Penggunaan arahan tersuai terbahagi kepada takrifan, pendaftaran dan penggunaan

• Terdapat dua cara untuk mentakrif, objek dan bentuk fungsi, Yang pertama adalah serupa dengan definisi komponen dan mempunyai pelbagai kitaran hayat; yang kedua hanya akan dilaksanakan apabila mounted dan updated

• pendaftaran: anda boleh menggunakan app.directive pendaftaran global atau melalui pilihan Apabila menggunakan pendaftaran separa

• cuma tambah v- sebelum nama pendaftaran.

• v-copy Salin dan tampal

• v-lazy Imej malas memuat

• v-debounce Anti goncang

• v-permission Kebenaran butang

• v-longpress Tekan lama

43. Ciri baharu Vue3

Tahap API

• Composition API

• setup Gula sintaktik

• Teleport Portal

• Fragments Boleh mempunyai berbilang nod akar

)

Emits

• Selain itu, Vue3 juga mempunyai banyak dua mata dan penambahbaikan pada peringkat rangka kerja

  createRenderer

  • Lebih Pantas
    • MayaDOM Tulis Semula
    • Pengoptimuman Pengkompil: Peningkatan statik, patchFlags, block, dsb.
    • Berdasarkan Proxy Sistem responsif
  • Lebih kecil: pengoptimuman gegaran pokok yang lebih baik
  • Lebih mudah diselenggara: TS + modulariti
  • lebih mudah untuk dilanjutkan
    • Modul responsif bebas
    • Perender tersuai

  44 matlamat reka bentuk dan titik pengoptimuman Vue3

  reka bentuk terbesar. matlamatnya adalah untuk menggantikan Vue2 Untuk mencapai matlamat ini, Vue3 telah membuat peningkatan yang hebat dalam aspek berikut, seperti: kemudahan penggunaan, prestasi rangka kerja, kebolehskalaan, kebolehselenggaraan, Pengalaman pembangunan, dll.

  • Kemudahan penggunaan: terutamanya

    dipermudahkan API menjadi gabungan v-model dan v-model pengubah suai. Begitu juga, terdapat sync dalam fungsi h(type,props,children) Tidak perlu mempertimbangkan untuk membezakan atribut, ciri, peristiwa, dll., rangka kerja membuat pertimbangan untuk kita, meningkatkan kemudahan penggunaan. props

  • Dari segi pengalaman pembangunan: komponen baharu

    Teleport Fragment akan memudahkan penulisan kod untuk senario tertentu. Suspense Gula sintaksis telah banyak meningkatkan pengalaman pembangunan kami. setup

  • Dari segi peningkatan kebolehskalaan: seperti modul

    bebas, reactivity, dsb.custom render API

  • aspek kebolehselenggaraan terutamanya

    , lebih mudah untuk menulis logik perniagaan yang sangat boleh diguna semula. Terdapat juga penambahbaikan pada sokongan TS. Composition API

  • Prestasi: pengoptimuman pengkompil, sistem responsif berdasarkan

    . Proxy

  • . . .

  45 Dalam aspek apakah peningkatan prestasi Vue3 dicerminkan?

  • Aspek kod: API responsif serba baharu, dilaksanakan berdasarkan

    , peristiwa permulaan dan penggunaan memori telah dipertingkatkan dengan sangat baik; 🎜 >Kompilasi: Lebih banyak pemprosesan pengoptimuman kompilasi telah dilakukan, seperti promosi statik, penandaan kandungan dinamik, caching acara, blok, dll., yang boleh melangkau sejumlah besar proses perbezaan dengan berkesan Proxy

  • Pembungkusan: lebih Sokongan yang baik

    , jadi saiznya lebih kecil dan pemuatan lebih cepat (

    Kerana semua API vue3 diperkenalkan melalui modularisasi ES6, yang menjadikan alat pembungkusan seperti webpack atau rollup tidak berguna apabila pembungkusan. API untuk menghapuskan dan meminimumkan saiz berkas
  )

  • tree-shaking 46. Apakah yang

    dan
  lakukan?

  $attrs mendapat atribut yang tidak ditakrifkan dalam $listeners boleh digunakan untuk penghantaran telus atribut telah dialih keluar digabungkan menjadi

  , lebih mudah digunakan

  $attrsprops47. Apakah perbezaan antara API Komposisi dan API Pilihan? v-bind="$attrs"$listenersvue3attrs ialah satu set API, termasuk

  , cangkuk hayat dan suntikan kebergantungan, membenarkan pengguna menulis komponen dengan mengimport fungsi, manakala

  mengisytiharkan pilihan komponen dalam bentuk objek Tulis komponen.

  Penggunaan semula logik yang lebih ringkas dan lebih cekap. Ia menyelesaikan pelbagai kekurangan

  pada masa lalu Composition API (konflik dan kekeliruan di samping itu, Reactivity API lebih bebas, tidak mempunyai kaedah penulisan tetap seperti Options API, dan boleh menyusun kod logik bersama-sama lebih banyak); dengan berkesan. Tiada lagi kekusutan di sana sini, akhirnya

  mempunyai inferens jenis yang lebih baik dan mesra kepada

  sokongan. Composition APIOptions APImixins48. Apakah amalan terbaik Vue yang anda tahuComposition APIOptions APIComposition APItsGaya pengekodan:

  Penggunaan Komponen gaya berbilang perkataan apabila menamakan untuk mengelakkan konflik dengan elemen html
  nama atribut penamaan puncak, gunakan lidi daging dalam templat atau penamaan jsx

  • v- for mesti menambah kunci dan jangan tuliskannya bersama-sama dengan v-if''
  Prestasi:

  Penghalaan Pemuatan malas mengurangkan saiz aplikasi
  Mengurangkan acara pemuatan skrin pertama

  • SSR

  • Teknologi tatal maya senarai panjang

    v-oncev-memo

    Untuk data besar dengan objek bersarang dalam, anda boleh menggunakan
  atau
  • untuk mengurangkan overhed

  • Elakkan pengabstrakan komponen yang tidak perlu

    shallowRefshallowReactive

  49. Apakah perbezaan antara mutasi dan tindakan?
  digunakan untuk mengubah suai

  digunakan untuk menyerahkan dan boleh mengandungi operasi tak segerak

  mutation50. Bagaimana untuk mendapatkan daripada 0 Implement vuexstateactionmutationaction

  Untuk melaksanakan

  untuk menyimpan keadaan global

  Untuk menyediakan API yang diperlukan untuk ubah suai keadaan:
  • ,

    Store

  melaksanakan Store dan boleh mentakrifkan kelas Store Pembina menerima pilihan options, menetapkan atribut state untuk mendedahkan keadaan kepada dunia luar dan menyediakan commit dan untuk mengubah suai atribut. Di sini anda perlu menetapkan dispatch sebagai objek responsif dan mentakrifkan state sebagai pemalam Store (kaedah pemasangan). Vue

  boleh mendapatkan input pengguna commit dan melaksanakannya, supaya keadaan boleh diubah suai mengikut kaedah yang disediakan oleh pengguna mutations adalah serupa, tetapi dispatch perlu dikembalikan a dispatch kepada pengguna untuk Mengendalikan hasil tak segerak. Promise

  (Mempelajari perkongsian video:

  tutorial pengenalan vuejs, Video pengaturcaraan asas)

Atas ialah kandungan terperinci [Kompilasi dan ringkasan] 45+ soalan temuduga Vue untuk membantu anda menyatukan mata pengetahuan anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!