1. 渲染項目列表時痕貌，“key” 屬性的作用和重要性是什么炊豪？

渲染項目列表時荞下，key?屬性允許 Vue 跟蹤每個 Vnode。key 值必須是唯一的隐岛。

如果沒有使用 key 屬性猫妙，并且列表的內容發(fā)生了改變（例如對列表進行排序），則虛擬 DOM 寧愿使用更新的數(shù)據(jù)來修補節(jié)點聚凹，來反映更改割坠，而不是上下移動元素。這是默認模式妒牙，非常有效彼哼。

當提供唯一的鍵值 IS 時，將根據(jù)對鍵的更改對元素進行重新排序（并且不使用新數(shù)據(jù)對它們進行修補）湘今，如果刪除了 key（例如敢朱，刪除列表中的項目時），則對應的元素節(jié)點也被銷毀或刪除摩瞎。

請注意下圖：

這里有一個父組件渲染一個子組件列表拴签。我們看到三個列表項被渲染為三個子組件節(jié)點。這些子組件都包含一個 span 標記和一個輸入框旗们，可能還包含一個本地狀態(tài)對象（可選）◎玖ǎ現(xiàn)在讓我們檢查兩種情況：

當不使用 key 屬性時：例如如果列表已重新排序，則 Vue 會使用重新排序的數(shù)據(jù)簡單地修補已經存在的三個節(jié)點上渴，而不用移動這些節(jié)點岸梨。只要用戶沒有輸入或更改這些子組件中一個或多個子組件的本地狀態(tài)，此方法就可以正常工作驰贷。因此假設用戶輸入了組件編號為 3的輸入框盛嘿，重新排序列表后，組件編號為 3 的 span 標簽內容將唄更改括袒，但是輸入框將與用戶鍵入的內容擊破狀態(tài)數(shù)據(jù)一起保留在這里次兆。這是因為 Vue 無法識別組件編號 3，它只是重新修補它所看到的更新數(shù)據(jù)锹锰，即 span 標簽的內容芥炭。

當在子組件上使用 key 屬性時漓库，Vue 會知道該組件的身份，并且在對列表進行重新排序時园蝠，將移動節(jié)點而不是對其進行修補渺蒿。這能夠確保手動編輯的輸入框以及整個組件移動到新位置。

在有條件地渲染組件或元素時彪薛，還可以用 key 屬性來向 Vue 發(fā)出有關元素唯一性的信號茂装，并確保元素不會被新數(shù)據(jù)重新修補。

2.你將怎樣在模板中渲染原始 HTML善延？

在模板中輸出內容的典型方法是使用 mustache 語法標簽從方法少态、屬性或數(shù)據(jù)變量輸出數(shù)據(jù)。但是 mustache 標記會渲染文本易遣。如果你嘗試使用 mustache 標記來渲染 HTML彼妻，它將以文本字符串的形式去渲染，并且不會被解析豆茫。要將內容渲染和解析為 html侨歉，我們可以使用 v-html 指令，如下所示揩魂。

模板

App

newVue({el:'#app',? ? data: {? ? ? title:'<h1>Vue.js</h1>'}});

輸出

Vue.js

如上面的例子所示幽邓，v-html 指令解析所有HTML，結果上面的語句將按需渲染肤京。開發(fā)人員必須在了解 v-html 的前提下使用颊艳。如果不恰當?shù)厥褂昧?v-html，可能會使網站遭受注入攻擊忘分，很有可能會從外部源注入并執(zhí)行惡意代碼棋枕。

3. 什么是vue-loader？

Vue-loader 是 Webpack 的加載器模塊妒峦，它使我們可以用 .vue 文件格式編寫單文件組件重斑。單文件組件文件有三個部分，即模板肯骇、腳本和樣式窥浪。 vue-loader 模塊允許 webpack 使用單獨的加載器模塊（例如 SASS 或 SCSS 加載器）提取和處理每個部分。該設置使我們可以使用 .vue 文件無縫編寫程序笛丙。

vue-loader 模塊還允許把靜態(tài)資源視為模塊依賴性漾脂，并允許使用 webpack 加載器進行處理。而且還允許在開發(fā)過程中進行熱重裝胚鸯。

4. 什么是 mixin骨稿？

Mixins 使我們能夠為 Vue 組件編寫可插拔和可重用的功能。如果你希望在多個組件之間重用一組組件選項，例如生命周期 hook坦冠、方法等形耗，則可以將其編寫為 mixin，并在組件中簡單地引用它辙浑。然后將 mixin 的內容合并到組件中激涤。如果你要在 mixin 中定義生命周期 hook，那么它在執(zhí)行時將優(yōu)先于組件自己的 hook 判呕。

5. 在開發(fā)過程中倦踢，如果你的 Vue 程序和后端 API 服務器未在同一主機上運行，該如何代理 API 請求侠草。假設使用 Vue-CLI 3 進行設置硼一？

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:

假設我們有一個運行在 localhost:4040 上的 Node.js 后端服務器。為了確保代理并可以從組件中訪問它梦抢，可以配置 vue.config.js 文件并包含 devServer 部分，如下所示：

在 vue.config.js 文件中：

module.exports: {devServer: {? ? ? ? proxy: {'/api': {? ? ? ? ? ? ? ? target: ‘http://localhost:4040/api’,? ? ? ? ? ? ? ? changeOrigin: true? ? ? ? ? ? }? ? ? ? }? ? }}

6. prop 如何指定其類型要求愧哟？

通過實現(xiàn) prop 驗證選項奥吩，可以為單個 prop 指定類型要求。這對生產沒有影響蕊梧，但是會在開發(fā)階段發(fā)出警告霞赫，從而幫助開發(fā)人員識別傳入數(shù)據(jù)和 prop 的特定類型要求的潛在問題。

配置三個 prop 的例子：

props: {accountNumber: {? ? ? ? type: Number,? ? ? ? required: true? ? },name: {type: String,? ? ? ? required: true? },favoriteColors:Array}

7. 什么是虛擬 DOM肥矢？

文檔對象模型或 DOM 定義了一個接口端衰，該接口允許 JavaScript 之類的語言訪問和操作 HTML 文檔。元素由樹中的節(jié)點表示甘改，并且接口允許我們操縱它們旅东。但是此接口需要付出代價，大量非常頻繁的 DOM 操作會使頁面速度變慢十艾。

Vue 通過在內存中實現(xiàn)文檔結構的虛擬表示來解決此問題抵代，其中虛擬節(jié)點（VNode）表示 DOM 樹中的節(jié)點。當需要操縱時忘嫉，可以在虛擬 DOM的 內存中執(zhí)行計算和操作荤牍，而不是在真實 DOM 上進行操縱。這自然會更快庆冕，并且允許虛擬 DOM 算法計算出最優(yōu)化的方式來更新實際 DOM 結構康吵。

一旦計算出，就將其應用于實際的 DOM 樹访递，這就提高了性能晦嵌，這就是為什么基于虛擬 DOM 的框架（例如 Vue 和 React）如此突出的原因。

8. 什么是 Vue 插件？

Vue 插件允許開發(fā)人員構建全局級別的功能并將其添加到 Vue耍铜。用于向程序添加可以全局訪問的方法和屬性邑闺、資源，選項棕兼，mixin 以及其他自定義 API陡舅。 VueFire 是 Vue 插件的一個例子，該插件添加了 Firebase 特定的方法并將其綁定到整個程序伴挚。之后 firebase 函數(shù)可在程序結構中的任何位置的?this?上下文中使用靶衍。

9. 什么是渲染函數(shù)？舉個例子茎芋。

Vue 允許我們以多種方式構建模板颅眶，其中最常見的方式是只把 HTML 與特殊指令和 mustache 標簽一起用于響應功能。但是你也可以通過 JavaScript 使用特殊的函數(shù)類（稱為渲染函數(shù)）來構建模板田弥。這些函數(shù)與編譯器非常接近涛酗，這意味著它們比其他模板類型更高效、快捷偷厦。由于你使用 JavaScript 編寫渲染函數(shù)商叹，因此可以在需要的地方自由使用該語言直接添加自定義函數(shù)。

對于標準 HTML 模板的高級方案非常有用只泼。

這里是用 HTML 作為模板的 Vue 程序

new Vue({? el: '#app',? data: {? ? fruits: ['Apples', 'Oranges', 'Kiwi']? },? template:? ? ? `

這里是用渲染函數(shù)開發(fā)的同一個程序：

newVue({el:'#app',data: {fruits: ['Apples','Oranges','Kiwi']? },render:function(createElement){returncreateElement('div', [? ? ? createElement('h1','Fruit Basket'),? ? ? createElement('ol',this.fruits.map(function(fruit){returncreateElement('li', fruit);? ? ? }))? ? ]);? }});

輸出：

Fruit Basket

Apples

Oranges

Kiwi

在上面的例子中剖笙，我們用了一個函數(shù)，它返回一系列?createElement()?調用请唱，每個調用負責生成一個元素弥咪。盡管 v-for 指令在基于 HTML 的模板中起作用，但是當使用渲染函數(shù)時十绑，可以簡單地用標準?.map()函數(shù)遍歷 fruits 數(shù)據(jù)數(shù)組聚至。

10. 哪個生命周期 hook 最適合從 API 調用中獲取數(shù)據(jù)？

盡管這取決于組件的用途及孽惰，但是創(chuàng)建的生命周期 hook 內通常非常適合放置 API 調用晚岭。這時可以使用組件的數(shù)據(jù)和響應性功能，但是該組件尚未渲染勋功。

11. 什么時候調用 “updated” 生命周期 hook 坦报？

在更新響應性數(shù)據(jù)并重新渲染虛擬 DOM 之后，將調用更新的 hook狂鞋。它可以用于執(zhí)行與 DOM 相關的操作片择，但是（默認情況下）不能保證子組件會被渲染，盡管也可以通過在更新函數(shù)中使用?this.$nextTick來確保骚揍。

12. 在 Vue 實例中編寫生命周期 hook 或其他 option/propertie 時字管，為什么不使用箭頭函數(shù)啰挪？

箭頭函數(shù)自己沒有定義?this?上下文，而是綁定到其父函數(shù)的上下文中嘲叔。當你在 Vue 程序中使用箭頭函數(shù)（=>）時亡呵，this?關鍵字病不會綁定到 Vue 實例，因此會引發(fā)錯誤硫戈。所以強烈建議改用標準函數(shù)聲明锰什。

13. 什么時候使用keep-alive元素？

當由于數(shù)據(jù)屬性或其他某種響應狀態(tài)而動態(tài)切換組件時丁逝，每次將它們切換到渲染狀態(tài)時汁胆，都會被重新渲染。盡管你可能需要這種行為霜幼，但在某些情況下重新渲染可能是不合適的嫩码。例如在創(chuàng)建時從 API 調用中引入數(shù)據(jù)的組件。你可能不希望每次動態(tài)切換這個組件進行渲染時都調用此 API罪既。這時你可以將組件包含在 keep-alive 元素中铸题。keep-alive 元素緩存該組件并從那里獲取它，而不是每次都重新渲染它琢感。

14. 在大型 Vue 程序中管理狀態(tài)的推薦方法是什么回挽？為什么？

當程序在功能和代碼方面不斷增長時猩谊，狀態(tài)管理會變得困難，并且使用無窮無盡的下游網絡 prop 和上游事件當然不是明智的決定祭刚。在這種情況下牌捷，有必要將狀態(tài)管理轉移到中央管理系統(tǒng)。 Vue 生態(tài)系統(tǒng)中提供了 Vuex涡驮，它是官方的狀態(tài)管理庫暗甥，也是推薦用于集中存儲狀態(tài)的模式。

Vuex 允許維護中央狀態(tài)捉捅。組件將 Vuex 用作響應性數(shù)據(jù)存儲撤防，并在狀態(tài)更新時進行更新。多個或者不相關的組件可以依賴于相同的中央存儲棒口。

在這種情況下寄月，Vue 充當純 View 層。要修改狀態(tài)无牵，視圖層（例如按鈕或交互式組件）需要發(fā)出 Vuex?Action漾肮，然后執(zhí)行所需的任務。為了更新或修改狀態(tài)茎毁，Vuex 提供了?Mutations克懊。

這個工作流程的目的是留下可用的操作痕跡忱辅。

15. 什么是異步組件？

當大型程序使用大量組件時谭溉，從服務器上同時加載所有組件可能是沒有意義的墙懂。在這種情況下，Vue 允許我們在需要時定義從服務器異步加載的組件扮念。在聲明或注冊組件時损搬，Vue 接受提供 Promise 的工廠函數(shù)。然后可以在調用該組件時對其進行“解析”扔亥。

通過僅加載基本組件并把異步組件的加載推遲到未來的調用時間场躯，可以節(jié)省帶寬和程序加載時間。

這是一個異步組件的簡單示例旅挤。

newVue({components: {? ? ? ? ‘tweet-box’: () =>import(‘./components/async/TweetBox’)? ? }});

當以這種方式使用時踢关，Webpack 的代碼拆分將用于提供此功能。