Vue.js的高級面試題以及答案

Vue.js高級面試題，面試前能夠看一看。

一、什麼是vue-loader ？

Vue-loader 是 Webpack 的加載模塊，它使咱們能夠用 Vue 文件格式編寫單文件組件。

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

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

二、prop 如何指定其類型要求 ？

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

配置三個 prop 的例子 ：

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

三、什麼是虛擬 DOM ？

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

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

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

四、什麼是 Vue 插件 ？

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

五、什麼是 mixin ？

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

六、 什麼是渲染函數 ？舉個例子。

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

一、Apples 二、Oranges 三、Kiwi

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

七、哪一個生命週期 hook 最合適從 APl 調用中獲取數據 ？

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

八、何時調用 "updated" 生命週期 hook ？

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

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

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

十、什麼是異步組件 ？

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

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

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

new Vue({
    components: {
        'tweet-box': () => import('./components/async/TweetBox')
    }
});

複製代碼

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

本文之前端面試官的角度出發，對 Vue 框架中一些重要的特性、框架的原理以問題的形式進行整理彙總，意在幫助做者及讀者自測下 Vue 掌握的程度。 但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！