Rumah >hujung hadapan web >View.js >[Kompilasi dan ringkasan] 20 soalan wawancara Vue frekuensi tinggi
Sebagai seorang pengaturcara, jika anda ingin mencari pekerjaan kegemaran anda, anda pasti akan ditanya banyak esei lapan bahagian Walaupun ada di antaranya tiada kaitan dengan kerja, tetapi anda Jika anda ingin lulus temuduga, anda mesti mengetahuinya. Jadi saya baru-baru ini mula merumuskan beberapa soalan temuduga, pertama untuk mengukuhkan pemahaman saya dan mencari pekerjaan yang baik, dan kedua untuk membantu seberapa ramai rakan yang mungkin untuk cepat menguasai pengetahuan yang berkaitan atau berjaya lulus temu duga?
Artikel ini memperkenalkan beberapa masalah biasa dengan vue. Saya cuba menyusun soalan ini mengikut kesukaran dan perkaitan untuk memudahkan peralihan dan difahami. Sudah tentu, artikel ini bukan sahaja semudah esei berkaki lapan, mata pengetahuan ini sering digunakan dalam kerja. [Cadangan berkaitan: tutorial video vuejs]
Soalan ini biasanya tidak banyak ditanya, tetapi jika ditanya, anda mesti kena jawab
Jawapan
Vue2(选项式API) | Vue3(setup) | 描述 |
---|---|---|
beforeCreate | - | 实例创建前 |
created | - | 实例创建后 |
beforeMount | onBeforeMount | DOM挂载前调用 |
mounted | onMounted | DOM挂载完成调用 |
beforeUpdate | onBeforeUpdate | 数据更新之前被调用 |
updated | onUpdated | 数据更新之后被调用 |
beforeDestroy | onBeforeUnmount | 组件销毁前调用 |
destroyed | onUnmounted | 组件销毁完成调用 |
Ini lebih rumit sedikit daripada soalan sebelumnya, anda boleh cuba memahami ingatan atau ingat terus sahaja
Proses Penyampaian
Proses kemas kini
Proses pemusnahan
NotaJika komponen anak adalah komponen tak segerak, susunan pelaksanaannya akan berubah Kitaran hayat komponen induk akan dilaksanakan terlebih dahulu dan kemudian kitaran hayat komponen anak akan dilaksanakan
Soalan ini dianggap sebagai soalan yang sangat asas dan mudah difahami Temu bual biasanya bertanya apakah perbezaan antara kedua-dua arahan ini senario apakah Perintah yang sesuai? jawapan
v-if
menunjukkan sama ada elemen dom dicipta dan v-show
mengawal atribut display
dom ini Sama ada ia none
biasanya digunakan di tempat yang statusnya kerap ditukar v-show
lebih sesuai untuk senario di mana keadaan tidak kerap berubah, kerana penukarannya. overhed agak besarv-if
Jawapan
dikira ialah atribut yang dikira, yang boleh digunakan apabila atribut dipengaruhi oleh satu atau lebih atribut .watch ialah pendengar Apabila kita perlu melakukan beberapa pemprosesan berdasarkan perubahan dalam atribut, kita boleh menggunakan watch untuk memantau. atribut ini
dikira mempunyai ciri caching, iaitu, ia hanya akan melaksanakan semula logik dalaman apabila sifat itu bergantung pada kod berikut
<template> <div>{{ addSum }}</div> <div>{{ addSum }}</div> <div>{{ addSum }}</div> </template> <script setup> import { computed, ref, watch } from "vue"; const a = ref(1) const b = ref(2) let addSum = computed(() => { console.log('内部逻辑执行') return a.value + b.value }) </script>Halaman menggunakan
beberapa kali, tetapi "pelaksanaan logik dalaman" hanya akan dicetak sekali addSum
watch tidak akan dicetak secara lalai apabila halaman pertama kali dimuatkan, anda perlu menetapkan untuk melaksanakan pemantauan buat kali pertama immediate:true
tonton<.> Secara lalai, ia hanya memantau satu lapisan data dan tidak memantau perubahan atribut dalam data berbilang lapisan Ia perlu ditetapkan akan melakukan pemantauan mendalamdeep:true
vue-router
vue-router
Soalan 1: Apakah vue-router, huraikan prinsipnya?
Vue Router ialah pengurus penghalaan rasmi Vue Ia mempunyai dua mod: cincang dan sejarah
mengemas kini sebahagian daripada kandungan halaman dengan mendengar acara Mod
, kecuali tiada url selepasnya akan muncul dan kelihatan lebih cantik. Pada masa yang sama, ia akan membawa masalah Kerana tiada nombor hash
, apabila pengguna menyegarkan halaman, permintaan akan dibuat kepada pelayan, menyebabkan permintaan 404 untuk sumber hashchange
perlu dilakukan, dan semua laluan perlu diubah hala ke halaman akar #
Soalan 2: Apakah kaedah lompatan penghalaan? history
popstate
hash
#
#
Lompat komponen terbina dalamnginx
,
router.push({ path: '/home' })
Pengawal laluan dibahagikan kepada router.replace({ path: '/home' })
pengawal laluan global
pengawal laluan komponen
Pengawal laluan global, menerima
tiga parameter, yang akan dicetuskan sebelum setiap lompatan laluan dan sering digunakan untuk pengesahan log masukbeforeEach
to、from、next
afterEach, dipanggil selepas lompatan laluan selesai, menerima dua parameter ke dan dari
beforeResolve
Pengawal eksklusif laluanbeforeEach
接收
to、from、next
三个参数
beforeRouteEnter
,进入该组件之前调用,无法获取到vue实例
beforeRouteUpdate
,在当前路由改变,但是该组件被复用时调用
beforeRouteLeave
, 在离开当前组件时调用
当面试问你会用vue3吗,如果你回答会用的话,那么大概率会问vue2和vue3有哪些区别,最近我去面试的时候百分之90都问了这个问题。
回答
写法上的区别:vue2使用的是options(选项)Api
,vue3的是composition Api
(当然vue3也兼容composition api
)。options Api
中methods,compute,data
等api都是分散的。而composition api
中的代码是根据逻辑功能来组织的,我们可以将一个功能所定义的methods,compute,data
等api会放在一起,让我们可以更灵活地组合组件逻辑。
vue2将响应式数据放到data函数中,而vue3则是使用ref
和reactive
将数据声明为响应式
响应式实现方式:vue2中是通过Object.defineProperty
对数据劫持实现的,vue3中则是使用Proxy
对数据代理实现的。
生命周期区别:vue3中将beforeCreate
和created
合并到了setup
函数中
根节点: vue3组件允许多个根节点,而vue2只允许一个
内置组件: vue3新增了传送组件Teleport
和异步依赖处理组件Suspense
面试一般会问你如何写一个vue插件,所以没写过vue插件的最好去亲自体验一下
回答:
vue
实例会有一个use
函数,它接受的是一个带有install
函数的对象和一个可选的选项对象,当我们使用 vue.use(plugin)
或者app.use(plugin)
会调用我们插件的install
属性的函数,并且将当前组件的实例传进来.所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能
插槽slot
可以理解为占坑,当使用一个组件的时候,在组件标签里的对应的内容就会替换掉这个组件中的slot
标签。
插槽分为默认插槽
,具名插槽
,作用域插槽
。
默认插槽子组件中用slot
标签来确定渲染位置,父组件使用它时直接在子组件的标签内写入内容即可
//子组件 <template> <slot /> </template> //父组件 <Child> <div>默认插槽</div> </Child>
具名插槽
顾名思义就是具有名字的插槽,子组件中可以用name
熟悉对slot
命名,父组件在使用的时候通过template
中的v-slot:name
或者#name
来定义这个插槽中的内容
//子组件 <template> <slot name="content"></slot> </template> //父组件 <Child> <template v-slot:content>具名插槽内容</template> </Child>
作用域插槽
子组件中的slot
可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中
(子组件标签内),在父组件使用子组件的时候要用v-slot
的值进行接收这些参数,默认插槽可以将其直接写在子组件标签上,具名插槽则写在template
上。而传过来的值只能在子组件标签中或者template
标签中使用。所以在父组件作用域中获取到了子组件作用域中的变量,可以认为作用域插槽延伸了子组件数据的作用范围,因此叫做作用域插槽
如果你想详细理解插槽的作用可以阅读这篇文章Vue3中插槽(slot)用法汇总 - 掘金 (juejin.cn)
这里我大概归纳了一下vue2和vue3的传参方式
方式 | Vue2 | Vue3 |
---|---|---|
父传子 | props | props |
子传父 | $emit | emits |
父传子 | $attrs | attrs |
子传父 | $listeners | 无(合并到 attrs方式) |
父传子 | provide/inject | provide/inject |
子组件访问父组件 | $parent | 无 |
父组件访问子组件 | $children | 无 |
父组件访问子组件 | $ref | expose&ref |
兄弟组件传值 | EventBus | mitt |
它们的具体用法可以参考我的这篇文章盘点Vue2和Vue3的10种组件通信方式(值得收藏) - 掘金 (juejin.cn)
除了上面的传参方式你也可以回答Vuex和Pinia,前提你了解这两个状态管理器,因为你说了大概率下个问题就会问你Vuex和Pinia
面试问到这个问题的时候,不要上来就开始说什么state
,mutation
...。你要先阐述Vuex干嘛用的,什么时候需要用Vuex。
回答
Vuex是Vue中的全局状态管理框架,它可以管理应用的所有组件的状态。并不是每个项目都需要引入Vuex的,当我们的项目有很多个页面,并且这些页面共享着多个数据状态,此时我们可以引入Vuex。
Vuex有三个核心的概念,state
,mutations
,actions
,其中state
为存放数据的地方,mutations
中的函数作用则是用来修改state
,actions
中一般是用了处理一些异步操作的函数。
Vuex除了上面三个概念还有getters
,moudles
,getters
就像Vue中的计算属性computed
一样用来描述依赖响应式状态state中的复杂逻辑。moudles
则是可以将store分割成模块(module),每个模块都拥有自己的state
,mutations
,actions
等,在大型应用中经常用到
场景:当我们异步获取结果并赋值给state的时候,比如数据请求,我们可以在actions
中进行数据请求,拿到结果通过它的dispatch
方法调用mutations
中修改state
的函数,从而将结果赋值给了state
这个现在问的好像不多,从我最近面试来看只有我提到了才会问一下,但是以后问的肯定会越来越多。关于pinia问的一般是它和Vuex的区别,确切的说应该是它和Vuex4之间的区别
回答
pinia
其实就是Vuex5,它和Vuex的主要区别有以下几点
Pinia使用更简单,更符合开发者的开发习惯
pinia
中没有了mutations
,状态state
的修改可以直接进行修改,或者在actions
中修改,或者使用它的$patch
方法进行修改
pinia
中没有了modules
,如果想使用多个store,直接使用defineStore
定义多个store传入不同的id即可
更好的TS支持,不需要创建自定义的复杂包装器来支持TS
vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。面试经常会问什么是自定义指令?你用自定义指令做过哪些功能?
回答1:什么是自定义指令?
自定义指令包含局部指令和全局指令,在模板中使用指令前必须先使用directives
选项注册。局部指令指在某个组件中注册,而全局则是将指令注册到全局,通常在main.js中注册。
自定义指令由一个包含类似组件生命周期钩子的对象来定义。它的生命周期钩子包含created
,beforeMount
,mounted
,beforeUpdate
,updated
,beforeUnmount
,unmounted
,
常用的钩子为mounted
和 updated
,它接受el
,binding
等参数.binding
参数的值一般包含绑定到这个元素上的信息,比如下面这个指令
<div v-example:foo.bar="baz">
它的binding会是这个对象
{ arg: 'foo', modifiers: { bar: true }, value: /* `baz` 的值 */, oldValue: /* 上一次更新时 `baz` 的值 */ }
回答2:你用自定义指令做过哪些功能?
数据埋点,通过绑定自定义事件传入点击当前元素需要埋点的事件名,在指令中监听当前元素的点击事件后调用后台接口将事件名传入
权限控制,通过绑定自定义事件传入控制当前元素的权限字段,在指令中获取到当前元素根据权限字段来控制该元素的状态(显示,隐藏等)
...
官网描述
<KeepAlive>
ialah komponen terbina dalam yang fungsinya adalah untuk cache kejadian komponen yang dialih keluar apabila bertukar secara dinamik antara berbilang komponen.
Jawapan
Biasanya apabila kita menukar komponen, komponen sebelumnya akan musnah, dan apabila kita menggunakan <KeepAlive>
Jika anda bungkusnya, komponen akan dicache, dan keadaan sebelumnya akan dikekalkan apabila komponen dipaparkan semula.
keep-alive
menerima dua atribut include
dan exclude
, yang masing-masing mewakili komponen yang perlu dicache dan yang tidak perlu dicache Ia menerima tatasusunan nama komponen , rentetan atau Secara kerap, apabila kami menggunakan komponen dinamik component
atau penghalaan router-view
, kami boleh menggunakan
keep-alive
dan juga menerima atribut max
untuk menunjukkan nombor maksimum contoh cache. Jika bilangan ini melebihi Contoh cache yang tidak diakses untuk masa yang paling lama akan dimusnahkan.
keep-alive
mempunyai dua kitaran hayat, iaitu activated
dan deactivated
Cangkuk activated
akan dimasukkan semula daripada cache apabila ia dipasang buat kali pertama atau setiap masa untuk menelefon. deactivated
Cangkuk dipanggil apabila komponen dialih keluar daripada DOM atau komponen dipunggah
ialah. tidak lagi tersedia dalam vue3 Mixin
Konsep ini telah diubah, jadi peluang untuk ditanya akan menjadi semakin kecil pada masa hadapan, tetapi kekerapan ditanya masih sangat tinggi pada masa ini. Secara umumnya, saya akan memahami konsep, kelebihan dan kekurangannya, dan kadangkala bertanya tentang susunan pelaksanaan kitaran hayatnya dan komponen induk
penerangan laman web rasmi vue:
Mixin menyediakan cara yang sangat Fleksibel untuk mengedarkan fungsi boleh guna semula dalam komponen Vue. Mixin boleh mengandungi pilihan komponen sewenang-wenangnya. Apabila komponen menggunakan mixin, semua pilihan mixin akan "bercampur" ke dalam pilihan komponen itu sendiri.
Jawapan1. Fungsi Mixin
adalah untuk mengekstrak logik awam komponen Apabila komponen perlu menggunakannya, hanya campurkan bahagian yang diekstrak ke dalam komponen .
2. Kitaran hayat Mixin
akan dilaksanakan sebelum kitaran hayat komponen induk Jika sifat atau kaedah dalam Mixin
bercanggah dengan komponen induk, sifat atau kaedah dalam komponen induk akan digunakan.
2. Kelebihan: Ia boleh mengurangkan redundansi kod dan meningkatkan kebolehgunaan semula logik.
3. Kelemahan: Konflik penamaan adalah mudah, sukar untuk mengesan sumbernya, dan penyelesaian masalah kemudiannya menyusahkan
Soalan ini sangat kerap ditanya, jadi Soalan ini telah ditanya dalam hampir semua temu bual yang saya alami, dan ia adalah soalan pembukaan dalam Vue.
Berikut adalah pemahaman saya sendiri tentang jawapannya, mengambil vue2 sebagai contoh, anda boleh merujuknya
Prinsip responsif vue adalah berdasarkan Object.defineProperty
api untuk memproses data
, yang dirampas dan dilaksanakan bersama dengan model penerbit-pelanggan, akan mula-mula menggunakan fungsi Object.defineProperty
dalam get
untuk mengakses dan merampas semua atribut data dalam vue Ia akan melibatkan rampasan atribut yang lebih mendalam dalam data dan memerlukan secara rekursif memanggil kaedah rampasan. Ini dilaksanakan melalui kelas Observer
Selepas merampas setiap atribut, berbilang pelanggan akan terikat pada atribut ini watcher
, kerana satu atribut boleh digunakan di banyak tempat dan ini watcher
mengandungi fungsi update
yang mengemas kini paparan. Korespondensi antara
watcher
dan atribut serta kaitan dengan pandangan direalisasikan dengan menyusun templat Compile
kelas. Compile
akan mendapatkan keseluruhan objek dom, dan kemudian melintasi nod anak elemen untuk mendapatkan atribut data dalam vue, kemudian terus menambah watcher
pada atribut dan menetapkan beberapa kaedah untuk mengemas kini paparan semasa >
Apabila memulakan watcher
, ia akan dipanggil dalam Deps
watcher
kaedah akan menambah Deps
yang sepadan pada tatasusunan addSub
kelas watcher
Subs
dalam kelas Object.defineProperty
atribut akan dipanggil untuk melintasi pelanggan set
dalam tatasusunan Deps
dan memanggil fungsinya notify
untuk mencetuskan kemas kini paparan Subs
watcher
update
Jawapan
Object.defineProperty
Proxy
Object.defineProperty
的代理行为是在破坏原对象的基础上实现的,Proxy 则不会破坏原对象,只是在原对象上覆盖了一层。
数组新增修改,Proxy
可以监听到,Object.defineProperty
不能。
Proxy
不兼容IE11
及以下
vue3新增了两个内置组件分别是Teleport
和Suspense
。
Teleport
组件可以称之为传送门,作用将其插槽内容渲染到 DOM 中的另一个位置,接收两个参数to(要去的位置)和disabled(是否留在原位置)。接收比如下面代码
<teleport to="#popup"> <video src="./my-movie.mp4"> </teleport>
video将会被传送到id为popup的元素下。
Suspense
组件<Suspense>
组件用于协调对组件树中嵌套的异步依赖的处理。
它一般用于包裹多个异步组件处理多个异步组件加载前与完成后的统一状态
<Suspense>
组件有两个插槽:#default
和 #fallback
,在初始渲染时,<Suspense>
将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖,则会进入挂起状态等待异步组件加载完毕。在挂起状态期间,展示的是 #fallback
插槽内容
关于nextTick会问到它的用法,然后是它的原理,然后还可能问到JS的时间循环机制。
问题1:vue中的nextTick是干什么用的?
这个其实比较简单,用过都知道它是干嘛的,vue官方的解释是:
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
这是什么意思呢,其实vue中修改data不会立刻触发dom更新;而是把需要更新的Watcher加入到queueWatcher队列中,然后在合适的时机在nextTick中调用这些Watcher的更新函数进行dom更新,所以在data刚被修改的时候,我们是获取不到更新后的dom的,这时候便需要调用nextTick函数在它的回调函数中获取到变化后的dom
问题2:nextTick原理
nextTick原理是借助浏览器事件循环来完成的,因为每次事件循环之间都有一次视图渲染,nextTick尽量在视图渲染之前完成dom更新,所以nextTick优先使用的是promise(微任务)实现
每次执行nextTick时会将传入的回调函数放入一个队列中(callbacks数组),然后当在本次事件循环的同步代码执行完毕后开启一个微任务(promise或者MutationObserver)去依次执行这个callbacks中的回调函数。
但是当浏览器不支持promise的时候在vue2中会进行进行降级处理,依次使用setImmediate
、setTimeout
开启一个宏任务执行callbacks
当一个data数据更新时对应的watcher便会调用一次nextTick,将它对应的dom更新操作作为回调函数放入callbacks中,所以当我们想获取这个data更新后的dom需要在其值变化后也调用nextTick将回调函数传入排在上个更新dom的回调函数后面,所以我们可以在这个nextTick的回调函数中获取到更新后的data
问题3:js事件循环机制
不属于vue,后面文章再介绍
这题在工作中有用吗是???答案是没有用,但是在面试中有用啊,所以我们要会回答?
问题1:什么是虚拟dom?
简单来说就是一个描述dom结构的js对象
问题2:为什么要用虚拟dom?
每当我们用原生JS或者JQ操作DOM
时,浏览器会从头开始进行DOM
树的构建,频繁的操作DOM
开销是很大的。
而虚拟DOM
就是为了减少这些操作的,虚拟DOM
首先会通过状态生成一个虚拟节点树(js对象),然后使用虚拟节点树进行渲染。当某些状态发生变更时会生成新的虚拟DOM节点树,然后与上一次虚拟DOM节点树进行比较(diff),从而找到差异的部分,最后渲染到真实的DOM节点上面
问题3:说一下diff算法
Intipati algoritma perbezaan adalah untuk mencari perbezaan antara dua objek, dengan tujuan untuk menggunakan semula nod sebanyak mungkin. Dalam vue, ia adalah algoritma yang digunakan untuk mengira perbezaan antara DOM maya selepas perubahan dan DOM maya sebelum perubahan apabila keadaan berubah.
Pelaksanaan khusus tidak dapat diterangkan dengan jelas dalam beberapa ayat saya syorkan artikelBercakap tentang algoritma perbezaan dua hujung Vue - Nuggets (juejin.cn)
<.>Kesimpulan(Mempelajari perkongsian video:
pembangunan bahagian hadapan webAtas ialah kandungan terperinci [Kompilasi dan ringkasan] 20 soalan wawancara Vue frekuensi tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!