本篇文章給大家分享15個(gè)vue.js高級(jí)面試問題。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
1. 渲染項(xiàng)目列表時(shí)，“key” 屬性的作用和重要性是什么？
渲染項(xiàng)目列表時(shí)，key 屬性允許 vue 跟蹤每個(gè) vnode。key 值必須是唯一的。
如果沒有使用 key 屬性，并且列表的內(nèi)容發(fā)生了改變（例如對(duì)列表進(jìn)行排序），則虛擬 dom 寧愿使用更新的數(shù)據(jù)來修補(bǔ)節(jié)點(diǎn)，來反映更改，而不是上下移動(dòng)元素。這是默認(rèn)模式，非常有效。
當(dāng)提供唯一的鍵值 is 時(shí)，將根據(jù)對(duì)鍵的更改對(duì)元素進(jìn)行重新排序（并且不使用新數(shù)據(jù)對(duì)它們進(jìn)行修補(bǔ)），如果刪除了 key（例如，刪除列表中的項(xiàng)目時(shí)），則對(duì)應(yīng)的元素節(jié)點(diǎn)也被銷毀或刪除。
請(qǐng)注意下圖：
這里有一個(gè)父組件渲染一個(gè)子組件列表。我們看到三個(gè)列表項(xiàng)被渲染為三個(gè)子組件節(jié)點(diǎn)。這些子組件都包含一個(gè) span 標(biāo)記和一個(gè)輸入框，可能還包含一個(gè)本地狀態(tài)對(duì)象（可選）?，F(xiàn)在讓我們檢查兩種情況：
當(dāng)不使用 key 屬性時(shí)：例如如果列表已重新排序，則 vue 會(huì)使用重新排序的數(shù)據(jù)簡(jiǎn)單地修補(bǔ)已經(jīng)存在的三個(gè)節(jié)點(diǎn)，而不用移動(dòng)這些節(jié)點(diǎn)。只要用戶沒有輸入或更改這些子組件中一個(gè)或多個(gè)子組件的本地狀態(tài)，此方法就可以正常工作。因此假設(shè)用戶輸入了組件編號(hào)為 3的輸入框，重新排序列表后，組件編號(hào)為 3 的 span 標(biāo)簽內(nèi)容將唄更改，但是輸入框?qū)⑴c用戶鍵入的內(nèi)容擊破狀態(tài)數(shù)據(jù)一起保留在這里。這是因?yàn)?vue 無法識(shí)別組件編號(hào) 3，它只是重新修補(bǔ)它所看到的更新數(shù)據(jù)，即 span 標(biāo)簽的內(nèi)容。
當(dāng)在子組件上使用 key 屬性時(shí)，vue 會(huì)知道該組件的身份，并且在對(duì)列表進(jìn)行重新排序時(shí)，將移動(dòng)節(jié)點(diǎn)而不是對(duì)其進(jìn)行修補(bǔ)。這能夠確保手動(dòng)編輯的輸入框以及整個(gè)組件移動(dòng)到新位置。
在有條件地渲染組件或元素時(shí)，還可以用 key 屬性來向 vue 發(fā)出有關(guān)元素唯一性的信號(hào)，并確保元素不會(huì)被新數(shù)據(jù)重新修補(bǔ)。
2.你將怎樣在模板中渲染原始 html？
在模板中輸出內(nèi)容的典型方法是使用 mustache 語法標(biāo)簽從方法、屬性或數(shù)據(jù)變量輸出數(shù)據(jù)。但是 mustache 標(biāo)記會(huì)渲染文本。如果你嘗試使用 mustache 標(biāo)記來渲染 html，它將以文本字符串的形式去渲染，并且不會(huì)被解析。要將內(nèi)容渲染和解析為 html，我們可以使用 v-html 指令，如下所示。
模板
<p id="app" v-html=”title”></p>app
new vue({ el: '#app', data: { title: '<h1 style="color: green;">vue.js</h1>' }});輸出
vue.js
如上面的例子所示，v-html 指令解析所有html，結(jié)果上面的語句將按需渲染。開發(fā)人員必須在了解 v-html 的前提下使用。如果不恰當(dāng)?shù)厥褂昧?v-html，可能會(huì)使網(wǎng)站遭受注入攻擊，很有可能會(huì)從外部源注入并執(zhí)行惡意代碼。
3. 什么是vue-loader？
vue-loader 是 webpack 的加載器模塊，它使我們可以用 .vue 文件格式編寫單文件組件。單文件組件文件有三個(gè)部分，即模板、腳本和樣式。 vue-loader 模塊允許 webpack 使用單獨(dú)的加載器模塊（例如 sass 或 scss 加載器）提取和處理每個(gè)部分。該設(shè)置使我們可以使用 .vue 文件無縫編寫程序。
vue-loader 模塊還允許把靜態(tài)資源視為模塊依賴性，并允許使用 webpack 加載器進(jìn)行處理。而且還允許在開發(fā)過程中進(jìn)行熱重裝。
4. 什么是 mixin？
mixins 使我們能夠?yàn)?vue 組件編寫可插拔和可重用的功能。如果你希望在多個(gè)組件之間重用一組組件選項(xiàng)，例如生命周期 hook、方法等，則可以將其編寫為 mixin，并在組件中簡(jiǎn)單地引用它。然后將 mixin 的內(nèi)容合并到組件中。如果你要在 mixin 中定義生命周期 hook，那么它在執(zhí)行時(shí)將優(yōu)先于組件自己的 hook 。
5. 在開發(fā)過程中，如果你的 vue 程序和后端 api 服務(wù)器未在同一主機(jī)上運(yùn)行，該如何代理 api 請(qǐng)求。假設(shè)使用 vue-cli 3 進(jìn)行設(shè)置？
let’s say we have a node.js backend server running on localhost:4040. to ensure it is proxyed in and accessible from the components, we can configure the vue.config.js file and include a devserver section as shown below:
假設(shè)我們有一個(gè)運(yùn)行在 localhost:4040 上的 node.js 后端服務(wù)器。為了確保代理并可以從組件中訪問它，可以配置 vue.config.js 文件并包含 devserver 部分，如下所示：
在 vue.config.js 文件中：
module.exports: { devserver: { proxy: { '/api': { target: ‘http://localhost:4040/api’, changeorigin: true } } }}6. prop 如何指定其類型要求？
通過實(shí)現(xiàn) prop 驗(yàn)證選項(xiàng)，可以為單個(gè) prop 指定類型要求。這對(duì)生產(chǎn)沒有影響，但是會(huì)在開發(fā)階段發(fā)出警告，從而幫助開發(fā)人員識(shí)別傳入數(shù)據(jù)和 prop 的特定類型要求的潛在問題。
配置三個(gè) prop 的例子：
props: { accountnumber: { type: number, required: true }, name: { type: string, required: true }, favoritecolors: array}7. 什么是虛擬 dom？
文檔對(duì)象模型或 dom 定義了一個(gè)接口，該接口允許 javascript 之類的語言訪問和操作 html 文檔。元素由樹中的節(jié)點(diǎn)表示，并且接口允許我們操縱它們。但是此接口需要付出代價(jià)，大量非常頻繁的 dom 操作會(huì)使頁面速度變慢。
vue 通過在內(nèi)存中實(shí)現(xiàn)文檔結(jié)構(gòu)的虛擬表示來解決此問題，其中虛擬節(jié)點(diǎn)（vnode）表示 dom 樹中的節(jié)點(diǎn)。當(dāng)需要操縱時(shí)，可以在虛擬 dom的 內(nèi)存中執(zhí)行計(jì)算和操作，而不是在真實(shí) dom 上進(jìn)行操縱。這自然會(huì)更快，并且允許虛擬 dom 算法計(jì)算出最優(yōu)化的方式來更新實(shí)際 dom 結(jié)構(gòu)。
一旦計(jì)算出，就將其應(yīng)用于實(shí)際的 dom 樹，這就提高了性能，這就是為什么基于虛擬 dom 的框架（例如 vue 和 react）如此突出的原因。
8. 什么是 vue 插件？
vue 插件允許開發(fā)人員構(gòu)建全局級(jí)別的功能并將其添加到 vue。用于向程序添加可以全局訪問的方法和屬性、資源，選項(xiàng)，mixin 以及其他自定義 api。 vuefire 是 vue 插件的一個(gè)例子，該插件添加了 firebase 特定的方法并將其綁定到整個(gè)程序。之后 firebase 函數(shù)可在程序結(jié)構(gòu)中的任何位置的 this 上下文中使用。
9. 什么是渲染函數(shù)？舉個(gè)例子。
vue 允許我們以多種方式構(gòu)建模板，其中最常見的方式是只把 html 與特殊指令和 mustache 標(biāo)簽一起用于響應(yīng)功能。但是你也可以通過 javascript 使用特殊的函數(shù)類（稱為渲染函數(shù)）來構(gòu)建模板。這些函數(shù)與編譯器非常接近，這意味著它們比其他模板類型更高效、快捷。由于你使用 javascript 編寫渲染函數(shù)，因此可以在需要的地方自由使用該語言直接添加自定義函數(shù)。
對(duì)于標(biāo)準(zhǔn) html 模板的高級(jí)方案非常有用。
這里是用 html 作為模板的 vue 程序
new vue({ el: '#app', data: { fruits: ['apples', 'oranges', 'kiwi'] }, template: `<p> <h1>fruit basket</h1> <ol> <li v-for="fruit in fruits">{{ fruit }}</li> </ol> </p>`});這里是用渲染函數(shù)開發(fā)的同一個(gè)程序：
new vue({ el: '#app', data: { fruits: ['apples', 'oranges', 'kiwi']