散文網(wǎng) » 科技 »學(xué)習(xí) » Vue高頻面試題百題詳解!阿里p8閉關(guān)三月嘔心力作！

Vue高頻面試題百題詳解!阿里p8閉關(guān)三月嘔心力作！

2023-07-31 18:14 作者:印客學(xué)院官方 0人讀過(guò) | 我要投稿

前言

大家好，我是一個(gè)愛(ài)分享的老前端。前一段時(shí)間有很多小伙伴找我做經(jīng)典Vue面試題解析。我整整花了1個(gè)月時(shí)間找題寫答案，錄視頻。本來(lái)打算全部寫完再來(lái)發(fā)一篇鴻篇巨制，不過(guò)找我要學(xué)習(xí)材料的太多，只好提前發(fā)布。這里是已經(jīng)寫完的前半部分，大家務(wù)必點(diǎn)贊、收藏保存一下，我后續(xù)還在這一篇更新下半部分，希望大家多多支持。

學(xué)習(xí)群

我組織了一個(gè)面試學(xué)習(xí)群，后臺(tái)下私信【666】進(jìn)大家可以互相交流

01-Vue組件之間通信方式有哪些

vue是組件化開發(fā)框架，所以對(duì)于vue應(yīng)用來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要。此題主要考查大家vue基本功，對(duì)于vue基礎(chǔ)api運(yùn)用熟練度。另外一些邊界知識(shí)如provide/inject/$attrs則提現(xiàn)了面試者的知識(shí)廣度。

組件傳參的各種方式

思路分析：

總述知道的所有方式
按組件關(guān)系闡述使用場(chǎng)景

回答范例：

組件通信常用方式有以下8種：

props
$emit/$on
$children/$parent
$attrs/$listeners
ref
$root
eventbus
vuex

注意vue3中廢棄的幾個(gè)API
https://v3-migration.vuejs.org/breaking-changes/children.html
https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html
https://v3-migration.vuejs.org/breaking-changes/events-api.html#overview

根據(jù)組件之間關(guān)系討論組件通信最為清晰有效

父子組件

props/$emit/$parent/ref/$attrs

兄弟組件

$parent/$root/eventbus/vuex

跨層級(jí)關(guān)系

eventbus/vuex/provide+inject

02-v-if和v-for哪個(gè)優(yōu)先級(jí)更高？

分析：

此題考查常識(shí)，文檔中曾有詳細(xì)說(shuō)明v2|v3；也是一個(gè)很好的實(shí)踐題目，項(xiàng)目中經(jīng)常會(huì)遇到，能夠看出面試者api熟悉程度和應(yīng)用能力。

思路分析：

先給出結(jié)論
為什么是這樣的，說(shuō)出細(xì)節(jié)
哪些場(chǎng)景可能導(dǎo)致我們這樣做，該怎么處理
總結(jié)，拔高

回答范例：

實(shí)踐中不應(yīng)該把v-for和v-if放一起
在vue2中，v-for的優(yōu)先級(jí)是高于v-if，把它們放在一起，輸出的渲染函數(shù)中可以看出會(huì)先執(zhí)行循環(huán)再判斷條件，哪怕我們只渲染列表中一小部分元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，這會(huì)比較浪費(fèi)；另外需要注意的是在vue3中則完全相反，v-if的優(yōu)先級(jí)高于v-for，所以v-if執(zhí)行時(shí)，它調(diào)用的變量還不存在，就會(huì)導(dǎo)致異常
通常有兩種情況下導(dǎo)致我們這樣做：

為了過(guò)濾列表中的項(xiàng)目?(比如?v-for="user in users" v-if="user.isActive")。此時(shí)定義一個(gè)計(jì)算屬性 (比如?activeUsers)，讓其返回過(guò)濾后的列表即可（比如users.filter(u=>u.isActive)）。
為了避免渲染本應(yīng)該被隱藏的列表?(比如?v-for="user in users" v-if="shouldShowUsers")。此時(shí)把?v-if?移動(dòng)至容器元素上 (比如?ul、ol)或者外面包一層template即可。
文檔中明確指出永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上，顯然這是一個(gè)重要的注意事項(xiàng)。
源碼里面關(guān)于代碼生成的部分，能夠清晰的看到是先處理v-if還是v-for，順序上vue2和vue3正好相反，因此產(chǎn)生了一些癥狀的不同，但是不管怎樣都是不能把它們寫在一起的。

知其所以然：

做個(gè)測(cè)試，test.html兩者同級(jí)時(shí)，渲染函數(shù)如下：

? anonymous( ) { with(this){return _c('div',{attrs:{"id":"app"}},_l((items),function(item){return (item.isActive)?_c('div',{key:item.id},[_v("\n ? ? ?"+_s(item.name)+"\n ? ?")]):_e()}),0)} }

03-子組件可以直接改變父組件的數(shù)據(jù)么，說(shuō)明原因

分析

這是一個(gè)實(shí)踐知識(shí)點(diǎn)，組件化開發(fā)過(guò)程中有個(gè)單項(xiàng)數(shù)據(jù)流原則，不在子組件中修改父組件是個(gè)常識(shí)問(wèn)題。

參考文檔：https://staging.vuejs.org/guide/components/props.html#one-way-data-flow

思路

講講單項(xiàng)數(shù)據(jù)流原則，表明為何不能這么做
舉幾個(gè)常見(jiàn)場(chǎng)景的例子說(shuō)說(shuō)解決方案
結(jié)合實(shí)踐講講如果需要修改父組件狀態(tài)應(yīng)該如何做

回答范例

所有的 prop 都使得其父子之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外變更父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。另外，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器控制臺(tái)中發(fā)出警告。
const props = defineProps(['foo'])
// ? 下面行為會(huì)被警告, props是只讀的!
props.foo = 'bar'
實(shí)際開發(fā)過(guò)程中有兩個(gè)場(chǎng)景會(huì)想要修改一個(gè)屬性：

這個(gè) prop 用來(lái)傳遞一個(gè)初始值；這個(gè)子組件接下來(lái)希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來(lái)使用。在這種情況下，最好定義一個(gè)本地的 data，并將這個(gè) prop 用作其初始值：
const props = defineProps(['initialCounter'])
const counter = ref(props.initialCounter)
這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè) prop 的值來(lái)定義一個(gè)計(jì)算屬性：
const props = defineProps(['size'])
// prop變化，計(jì)算屬性自動(dòng)更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())
實(shí)踐中如果確實(shí)想要改變父組件屬性應(yīng)該emit一個(gè)事件讓父組件去做這個(gè)變更。注意雖然我們不能直接修改一個(gè)傳入的對(duì)象或者數(shù)組類型的prop，但是我們還是能夠直接改內(nèi)嵌的對(duì)象或?qū)傩浴?/p>