好程式設計師web前端教程分享Vue.js面試題

　　好程式設計師web 前端教程分享 Vue.js 面試題 ， 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: ‘ ’ ,

 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

 

Apples

Oranges

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 的程式碼拆分將用於提供此功能。