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,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>
<h1>Fruit Basket</h1>
<ol>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ol>
</div>
`
});
這裡是用渲染函式開發的同一個程式：
new Vue({
el: '#app',data: {
fruits: ['Apples',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 資料陣列。
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中的高階面試題及答案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！