15個 Vue.js 高級面試題

翻譯：瘋狂的技術宅

www.zeolearn.com/interview-q…

未經容許嚴禁轉載

1. 渲染項目列表時，「key」 屬性的做用和重要性是什麼？

渲染項目列表時，key 屬性容許 Vue 跟蹤每一個 Vnode。key 值必須是惟一的。

若是沒有使用 key 屬性，而且列表的內容發生了改變（例如對列表進行排序），則虛擬 DOM 寧願使用更新的數據來修補節點，來反映更改，而不是上下移動元素。這是默認模式，很是有效。

當提供惟一的鍵值 IS 時，將根據對鍵的更改對元素進行從新排序（而且不使用新數據對它們進行修補），若是刪除了 key（例如，刪除列表中的項目時），則對應的元素節點也被銷燬或刪除。

請注意下圖：

這裏有一個父組件渲染一個子組件列表。咱們看到三個列表項被渲染爲三個子組件節點。這些子組件都包含一個 span 標記和一個輸入框，可能還包含一個本地狀態對象（可選）。如今讓咱們檢查兩種狀況：

當不使用 key 屬性時：例如若是列表已從新排序，則 Vue 會使用從新排序的數據簡單地修補已經存在的三個節點，而不用移動這些節點。只要用戶沒有輸入或更改這些子組件中一個或多個子組件的本地狀態，此方法就能夠正常工做。所以假設用戶輸入了組件編號爲 3的輸入框，從新排序列表後，組件編號爲 3 的 span 標籤內容將唄更改，可是輸入框將與用戶鍵入的內容擊破狀態數據一塊兒保留在這裏。這是由於 Vue 沒法識別組件編號 3，它只是從新修補它所看到的更新數據，即 span 標籤的內容。

當在子組件上使用 key 屬性時，Vue 會知道該組件的身份，而且在對列表進行從新排序時，將移動節點而不是對其進行修補。這可以確保手動編輯的輸入框以及整個組件移動到新位置。

在有條件地渲染組件或元素時，還能夠用 key 屬性來向 Vue 發出有關元素惟一性的信號，並確保元素不會被新數據從新修補。

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

在模板中輸出內容的典型方法是使用 mustache 語法標籤從方法、屬性或數據變量輸出數據。可是 mustache 標記會渲染文本。若是你嘗試使用 mustache 標記來渲染 HTML，它將以文本字符串的形式去渲染，而且不會被解析。要將內容渲染和解析爲 html，咱們可使用 v-html 指令，以下所示。

模板

<div id="app" v-html=」title」></div>
複製代碼

App 應用

new Vue({
    el: '#app',
    data: {
      title: '<h1 style="color: green;">Vue.js</h1>'
    }
});
複製代碼

輸出

Vue.js

如上面的例子所示，v-html 指令解析全部HTML，結果上面的語句將按需渲染。開發人員必須在瞭解 v-html 的前提下使用。若是不恰當地使用了 v-html，可能會使網站遭受注入攻擊，頗有可能會從外部源注入並執行惡意代碼。

3. 什麼是vue-loader？

Vue-loader 是 Webpack 的加載器模塊，它使咱們能夠用 .vue 文件格式編寫單文件組件。單文件組件文件有三個部分，即模板、腳本和樣式。 vue-loader 模塊容許 webpack 使用單獨的加載器模塊（例如 SASS 或 SCSS 加載器）提取和處理每一個部分。該設置使咱們可使用 .vue 文件無縫編寫程序。

vue-loader 模塊還容許把靜態資源視爲模塊依賴性，並容許使用 webpack 加載器進行處理。並且還容許在開發過程當中進行熱重裝。

4. 什麼是 mixin？

Mixins 使咱們可以爲 Vue 組件編寫可插拔和可重用的功能。若是你但願在多個組件之間重用一組組件選項，例如生命週期 hook、方法等，則能夠將其編寫爲 mixin，並在組件中簡單地引用它。而後將 mixin 的內容合併到組件中。若是你要在 mixin 中定義生命週期 hook，那麼它在執行時將優先於組件本身的 hook 。

5. 在開發過程當中，若是你的 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 如何指定其類型要求？

經過實現 prop 驗證選項，能夠爲單個 prop 指定類型要求。這對生產沒有影響，可是會在開發階段發出警告，從而幫助開發人員識別傳入數據和 prop 的特定類型要求的潛在問題。

配置三個 prop 的例子：

props: {
    accountNumber: {
        type: Number,
        required: true
    },
    name: {
        type: String,
        required: true
   },
   favoriteColors: Array
}
複製代碼

7. 什麼是虛擬 DOM？

文檔對象模型或 DOM 定義了一個接口，該接口容許 JavaScript 之類的語言訪問和操做 HTML 文檔。元素由樹中的節點表示，而且接口容許咱們操縱它們。可是此接口須要付出代價，大量很是頻繁的 DOM 操做會使頁面速度變慢。

Vue 經過在內存中實現文檔結構的虛擬表示來解決此問題，其中虛擬節點（VNode）表示 DOM 樹中的節點。當須要操縱時，能夠在虛擬 DOM的 內存中執行計算和操做，而不是在真實 DOM 上進行操縱。這天然會更快，而且容許虛擬 DOM 算法計算出最優化的方式來更新實際 DOM 結構。

一旦計算出，就將其應用於實際的 DOM 樹，這就提升了性能，這就是爲何基於虛擬 DOM 的框架（例如 Vue 和 React）如此突出的緣由。

8. 什麼是 Vue 插件？

Vue 插件容許開發人員構建全局級別的功能並將其添加到 Vue。用於向程序添加能夠全局訪問的方法和屬性、資源，選項，mixin 以及其餘自定義 API。 VueFire 是 Vue 插件的一個例子，該插件添加了 Firebase 特定的方法並將其綁定到整個程序。以後 firebase 函數可在程序結構中的任何位置的 this 上下文中使用。

9. 什麼是渲染函數？舉個例子。

Vue 容許咱們以多種方式構建模板，其中最多見的方式是隻把 HTML 與特殊指令和 mustache 標籤一塊兒用於響應功能。可是你也能夠經過 JavaScript 使用特殊的函數類（稱爲渲染函數）來構建模板。這些函數與編譯器很是接近，這意味着它們比其餘模板類型更高效、快捷。因爲你使用 JavaScript 編寫渲染函數，所以能夠在須要的地方自由使用該語言直接添加自定義函數。

對於標準 HTML 模板的高級方案很是有用。

這裏是用 HTML 做爲模板的 Vue 程序

new Vue({
  el: '#app',
  data: {
    fruits: ['Apples', 'Oranges', 'Kiwi']
  },
  template:
      `<div> <h1>Fruit Basket</h1> <ol> <li v-for="fruit in fruits">{{ fruit }}</li> </ol> </div>`
});
複製代碼

這裏是用渲染函數開發的同一個程序：

new Vue({
  el: '#app',
  data: {
    fruits: ['Apples', 'Oranges', 'Kiwi']
  },
  render: function(createElement) {
    return createElement('div', [
      createElement('h1', 'Fruit Basket'),
      createElement('ol', this.fruits.map(function(fruit) { 
        return createElement('li', fruit); 
      }))
    ]);
  }
});
複製代碼

輸出：

Fruit Basket

1. Apples
2. Oranges
3. Kiwi

在上面的例子中，咱們用了一個函數，它返回一系列 createElement() 調用，每一個調用負責生成一個元素。儘管 v-for 指令在基於 HTML 的模板中起做用，可是當使用渲染函數時，能夠簡單地用標準 .map() 函數遍歷 fruits 數據數組。

10. 哪一個生命週期 hook 最適合從 API 調用中獲取數據？

儘管這取決於組件的用途及，可是建立的生命週期 hook 內一般很是適合放置 API 調用。這時可使用組件的數據和響應性功能，可是該組件還沒有渲染。

11. 何時調用 「updated」 生命週期 hook ？

在更新響應性數據並從新渲染虛擬 DOM 以後，將調用更新的 hook。它能夠用於執行與 DOM 相關的操做，可是（默認狀況下）不能保證子組件會被渲染，儘管也能夠經過在更新函數中使用 this.$nextTick 來確保。

12. 在 Vue 實例中編寫生命週期 hook 或其餘 option/propertie 時，爲何不使用箭頭函數？

箭頭函數本身沒有定義 this 上下文，而是綁定到其父函數的上下文中。當你在 Vue 程序中使用箭頭函數（=>）時，this 關鍵字病不會綁定到 Vue 實例，所以會引起錯誤。因此強烈建議改用標準函數聲明。

13. 何時使用keep-alive元素？

當因爲數據屬性或其餘某種響應狀態而動態切換組件時，每次將它們切換到渲染狀態時，都會被從新渲染。儘管你可能須要這種行爲，但在某些狀況下從新渲染多是不合適的。例如在建立時從 API 調用中引入數據的組件。你可能不但願每次動態切換這個組件進行渲染時都調用此 API。這時你能夠將組件包含在 keep-alive 元素中。keep-alive 元素緩存該組件並從那裏獲取它，而不是每次都從新渲染它。

14. 在大型 Vue 程序中管理狀態的推薦方法是什麼？爲何？

當程序在功能和代碼方面不斷增加時，狀態管理會變得困難，而且使用無窮無盡的下游網絡 prop 和上游事件固然不是明智的決定。在這種狀況下，有必要將狀態管理轉移到中央管理系統。 Vue 生態系統中提供了 Vuex，它是官方的狀態管理庫，也是推薦用於集中存儲狀態的模式。

Vuex 容許維護中央狀態。組件將 Vuex 用做響應性數據存儲，並在狀態更新時進行更新。多個或者不相關的組件能夠依賴於相同的中央存儲。

在這種狀況下，Vue 充當純 View 層。要修改狀態，視圖層（例如按鈕或交互式組件）須要發出 Vuex Action，而後執行所需的任務。爲了更新或修改狀態，Vuex 提供了 Mutations。

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

15. 什麼是異步組件？

當大型程序使用大量組件時，從服務器上同時加載全部組件多是沒有意義的。在這種狀況下，Vue 容許咱們在須要時定義從服務器異步加載的組件。在聲明或註冊組件時，Vue 接受提供 Promise 的工廠函數。而後能夠在調用該組件時對其進行「解析」。

經過僅加載基本組件並把異步組件的加載推遲到將來的調用時間，能夠節省帶寬和程序加載時間。

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

new Vue({
    components: {
        ‘tweet-box’: () => import(‘./components/async/TweetBox’)
    }
}); 
複製代碼

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

歡迎關注前端公衆號：前端先鋒，免費領取 webpack 全系列教程（從入門到進階）。