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!
![[Kompilasi dan ringkasan] 45+ soalan temuduga Vue untuk membantu anda menyatukan mata pengetahuan anda!](https://img.php.cn/upload/article/000/000/024/63b41959a5fed714.jpg)
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:
dan setup. createdbeforeCreatecreated2 Cara melakukan pengurusan kebenaran dalam Vue
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
Idea jawapan:
Jawapan:
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
juga boleh digunakan pada komponen tersuai untuk mewakili kawalan input dan output nilai tertentu. v-model
). sub-komponen. dan peristiwa modelValue; dalam Vue3, anda juga boleh menentukan berbilang pengikatan yang berbeza dalam bentuk parameter. peristiwa. update:modelValuev-model:foofooupdate:foo
dan v-model jenis akan ditukar kepada acara dan checkbox. radioinputcheckedchange
$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) >
vuexpinia
provide + inject /
/ props / $emit$parentref$attrs
/
/$parent$rooteventbusvuex
Laluan pemuatan malas: pecahkan saiz eventbus dengan berkesan, apabila diakses Muatkan secara tak segerak vuex piniaprovide + inject
App
const router = createRouter({
routes: [
{ path : '/foo', component: () => import('./foo.vue)}
]
}) keep-alive
<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 <🎜 apabila melangkau kemas kini secara bersyarat >
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
vue-virtual-scrollervue-virtual-scroll-gridPemalam pihak ketiga diperkenalkan atas permintaan
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?
Perbincangan mengenai perpustakaan dan prinsip pihak ketiga
Oleh kerana Vuex hanya menyimpan keadaan dalam ingatan, ia akan hilang selepas menyegarkan semula , anda perlu menyimpannya.
boleh menggunakan
untuk menyimpan statusdan menyimpannya apabila menyerahkan .
Anda boleh menggunakan pemalam seperti
danlocalStorageVuexstoreAda 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
taip data, vuex-persist akan menjadi vuex-persistedstate dan hilang selepas penukaran. mutation
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?{}
storage
window.addEventListener("storage", function () {
localStorage.clear();
window.location.href = '/login'
console.error("不要修改localStorage的值~~~");
});Atribut pemintasan Beberapa caraMapSet
Kelebihan Proksi
Vue2 中使用 defineProperty 的原因是， 2013 年只能使用这种方式，由于该 API 存在一些局限性，比如对于数组的拦截有问题，为此 Vue 需要专门为数组响应式做一套实现。另外不能拦截那些新增、删除属性；最后 defineProperty 方案在初始化时需要深度递归遍历处理对象才能对它进行完全拦截，明显增加了初始化的时间。
以上两点在 Proxy 出现后迎刃而解，不仅可以对数组实现拦截，还能对 Map、Set 实现拦截；另外 Proxy 的拦截也是懒处理行为，如果用户没有访问嵌套对象，那么也不会实施拦截，这就让初始化的速度和内存占用改善了。
Proxy 有兼容性问题，完全不支持IE
思路：
必要性
何时用
怎么用
使用细节
回答：
当打包构建时，Javascript 抱回变得非常大，影响页面加载。利用路由懒加载我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应最贱，这样更加高效，是一种优化手段。
一般来说，对于所有的路由都使用动态导入是个好主意
给 component 选项配置一个返回 Promise组件的函数就可以定义懒加载路由.例如：
{
path: '/login',
component: () => import('../views/login/Login.vue')
},结合注释
{
path: '/login',
component: () => import(/* webpackChunkName: "login" */'../views/login/Login.vue')
},vite中结合rollupOptions定义分块 5. 路由中不能使用异步组件
Vue-Router 有三个模式，其中 history 和 hash 更为常用。两者差别主要在显示形式和部署上，
hash模式在地址栏现实的时候有一个 #，这种方式使用和部署都较简单；history模式url看起来更优雅没关，但是应用在部署时需要做特殊配置，web服务器需要做回退处理，否则会出现刷新页面404的问题。
在实现上 hash模式是监听hashchange事件触发路由跳转，history模式是监听popstate 事件触发路由跳转。
在 Vue 中 nextTick 是等待下一次 DOM 更新刷新的工具方法。
Vue 有一个异步更新策略，意思是如果数据变化，Vue 不会立刻更新 DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一时间循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在 DOM 上，此时如果想要获取更新后的 DOM 状态，就需要使用 nextTicknextTick 接受一个函数，我们可以在这个函数内部访问最新的 DOM 状态
在开发时，有两个场景我们会用到 nextTick ：
created 中想要获取 DOM;DOM 更新后的状态;nextTick 的原理：在 Vue 内部，nextTick 之所以能够让我们看到 DOM 更新后的结果，是因为我们传入的 callback 会被添加到队列刷新函数的后面，这样等队列内部的更新函数都执行完毕，所有 DOM 操作也就结束了，callback 自然能够获取最新的 DOM 值。
先回答答案：在 vue2 中， v-for 的优先级更高
但是在 vue3 中， v-if 的优先级更高
拓展：无论什么时候，我们都不应该把 v-for 和 v-if 放在一起，
怎么解决呢？一是可以定义一个计算属性，让 v-for 遍历计算属性。二是可以把 if 移到内部容器里（ul ol）或者把v-for移植外部容器(template)中
dokumentasi vue2dokumentasi vue3
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
(atau sangat tidak mesra)ts
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
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
, mixins:extendscomposition api
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
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?
vue-loader
fail dan bahagikan kod kepada vue-loader .vue templatescriptstyle
Apabila panggilan kaedah webpackloadervue-loader
dengan rantai vue-loader yang berasingan, dan akhirnya memproses Blok berasingan ini dipasang ke dalam modul komponen akhir SFCloader
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 indukKita 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.
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 <🎜 yang membosankan > 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
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
sebenarnya bertanya tentang vue template Bagaimana ia berfungsi. render编译器
, fungsi utamanya adalah untuk menyusun Vue ke dalam compiler executable template fungsi jsrender
tulisan tangan bukan sahaja tidak cekap, tetapi juga kehilangan keupayaan untuk dioptimumkan oleh pengkompil. HTMLrender
( 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
keep-alive
telah banyak berubah sebelum ini Vue3 mengandungi vue-router, kini keep-alive mengandungi router-view<. 🎜>router-viewkeep-alive
) activedbeforeRouteEntervue-router
keep-alive ialah data reaktif, apabila ia berubah, fungsi map component akan dilaksanakan semula. vnode
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.
terus kepada
, yang boleh dilaksanakan dengan cepat dalam kombinasi dengan fungsi yang diimport secara dinamik modul ES 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
Vuevue-router25 Mari kita bincangkan tentang idea pengoptimuman senarai panjang Vue
v-once untuk memuatkan data apabila pengguna memerlukannya. 懒加载computedwatch biasanya digunakan untuk mengendalikan logik kompleks dalam templat, manakala
computedwatch boleh melakukan operasi tak segerak,
watchSifat yang dikira melepasi objek dengan dua pilihan: computed dan
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
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
回答思路：
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 为例：
vue3 中引入的更新策略：编译期优化 patchFlags、block等
从 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 全局注册、全局常量..
一个 SPA 应用的路由需要解决的问题时页面跳转内容改变同时不刷新，同时路由还需要已插件形式存在，所以：
首先我会定义一个 createRouter 函数，返回路由器实例，实例内部做几件事；
hash 或者 popstate 事件path 匹配对应路由将 router 定义成一个 Vue 插件，即实现 install 方法，内部做两件事：
router-link和 router-view，分别实现页面跳转和内容显示$router 和 $route，组件内可以访问当前路由和路由器实例在项目规模变大的之后，单独一个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.
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.
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.
url untuk mengatur hubungan bersarang vue-router
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
cara, Anda boleh memantau
dalam bentuk rentetan; parameter kaedah.
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
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.
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.
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.
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.
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
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.
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
Tahap API
Composition API
setup Gula sintaktik
Teleport Portal
Fragments Boleh mempunyai berbilang nod akar
Emits
createRenderer
DOM Tulis SemulapatchFlags, block, dsb.Proxy Sistem responsif 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.
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
Teleport Fragment akan memudahkan penulisan kod untuk senario tertentu. Suspense Gula sintaksis telah banyak meningkatkan pengalaman pembangunan kami. setup
bebas, reactivity, dsb.custom render API
, lebih mudah untuk menulis logik perniagaan yang sangat boleh diguna semula. Terdapat juga penambahbaikan pada sokongan TS. Composition API
. Proxy
, 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
, 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 berkastree-shaking 46. Apakah yang
$attrs mendapat atribut yang tidak ditakrifkan dalam $listeners boleh digunakan untuk penghantaran telus atribut telah dialih keluar digabungkan menjadi $attrsprops47. Apakah perbezaan antara API Komposisi dan API Pilihan? v-bind="$attrs"$listenersvue3attrs ialah satu set API, termasuk
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
sokongan. Composition APIOptions APImixins48. Apakah amalan terbaik Vue yang anda tahuComposition APIOptions APIComposition APItsGaya pengekodan:
nama atribut penamaan puncak, gunakan lidi daging dalam templat atau penamaan jsx
SSR
v-oncev-memo
shallowRefshallowReactive
mutation50. Bagaimana untuk mendapatkan daripada 0 Implement vuexstateactionmutationaction
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
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!
Mengapakah vue.js melaporkan ralat?
Apakah kegunaan slot vue.js?
Cara melompat dengan parameter dalam vue.js
OuYi tukar harga usdt
Apakah carian sorotan?
Apakah masalah dengan menggunakan php
Bagaimana untuk menyelesaikan masalah bahawa wlan tidak mempunyai konfigurasi ip yang sah
Mengapa Amazon tidak boleh dibuka
![Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]](https://img.php.cn/upload/course/000/000/068/632ae26b9b376240.png)
![Pertempuran sebenar Vue3 bahagian hadapan [projek vue tulisan tangan]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
