Vue.js中高級面試題有哪些

小編給大家分享一下Vue.js中高級面試題有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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

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

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

配置三個 prop 的例子 ：

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

3、什么是虛擬 DOM ？

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

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

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

4、什么是 Vue 插件 ？

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

5、什么是 mixin ？

Mixin 使我們能夠為 Vue 組件編寫可插拔和可重用的功能。 如果你希望再多個組件之間重用一組組件選項，例如生命周期 hook、 方法等，則可以將其編寫為 mixin，并在組件中簡單的引用它。然后將 mixin 的內容合并到組件中。如果你要在 mixin 中定義生命周期 hook，那么它在執行時將優化于組件自已的 hook。

6、 什么是渲染函數 ？舉個例子。

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

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

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

new Vue ({
 el: '#app',
 data:{
  fruits: ['Apples','Oranges','Kiwi']
 },
 template:
 `<div>
  <h2>Fruit Basket</h2>
  <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('h2', '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 數據數組。

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

盡管這取決于組件的用途及，但是創建的生命周期 hook 內通常非常適合放置 APl 調用。這時可以使用組件的數據和響應性功能，但是該組件尚未渲染。

8、什么時候調用 "updated" 生命周期 hook ？

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

9、在 Vue 實例中編寫生命周期 hook 或其他 option/propertie 時，為什么不使用箭頭函數 ？

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

10、什么是異步組件 ？

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

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

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

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

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

以上是“Vue.js中高級面試題有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！