23 個 Vue.js 初級面試題

時間 2019-11-29

標籤 vue.js vue 初級面試欄目 JavaScript 简体版

原文原文鏈接

翻譯：瘋狂的技術宅javascript

原文：www.zeolearn.com/interview-q…css

未經容許嚴禁轉載html

1. 爲何Vue被稱爲「漸進框架」？

使用漸進式框架的代價很小，從而使現有項目（使用其餘技術構建的項目）更容易採用並遷移到新框架。 Vue.js 是一個漸進式框架，由於你能夠逐步將其引入現有應用，而沒必要從頭開始重寫整個程序。前端

Vue 的最基本和核心的部分涉及「視圖」層，所以能夠經過逐步將 Vue 引入程序並替換「視圖」實現來開始你的旅程。vue

因爲其不斷髮展的性質，Vue 與其餘庫配合使用很是好，而且很是容易上手。這與 Angular.js 之類的框架相反，後者要求將現有程序徹底重構並在該框架中實現。java

2. Vue.js 中的聲明式渲染是什麼？

Vue.js 使渲染數據變得容易，並隱藏了內部實現。例以下面的代碼：webpack

HTMLweb

<div id=」app」></div>
複製代碼

JavaScript正則表達式

const greeting = 「Hello there!」;
const appDiv = document.getElementById(「app」);
appDiv.innerText = greeting;
複製代碼

上面的代碼段將在 ID 爲「app」的 div 中顯示短語「Hello there！」。代碼包含實現結果所需的全部步驟。首先選擇 ID 爲「app」的 DOM 元素，而後用 innerText 屬性手動設置 div 的內容。vue-router

如今，讓咱們看看在 Vue 中是怎麼作的。

Template

<div id=」app」>{{ greeting }}</div>
複製代碼

App

new Vue({
    data: {
       greeting: ‘Hello There!’
    },
   el: ‘#app’
});
複製代碼

咱們在 Vue 程序中建立了一個名爲「greeting」的數據屬性，可是隻須要在 div 中用 mustache 語法輸入「greeting」便可，而沒必要關心內部實現。咱們聲明瞭「greeting」變量，其他的由 Vue 完成。這就是聲明式渲染的樣子。 Vue 隱藏並管理內部信息。

3. 你用哪一個指令遍歷對象的屬性？

要遍歷對象或數組，可使用 v-for 指令。下面是一個例子：

Template

<div id="app">
    <ul>
      <li v-for="(value, key) in card">{{ key }} - {{ value }}</li>    </ul>
 </div>
複製代碼

App

new Vue({
  el: '#app',
  data: {
    card: {
      name: 'John Doe',
      age: 25,
      city: 'New York',
      country: 'US'
    }
  }
});
複製代碼

輸出

name - John Doe
age - 25
city - New York
country - US

4. 給出模板，描述 Vue 程序的輸出。

模板：

{{title}}
複製代碼

App:

new Vue({ 
	el: '#app', 
	data: { 
		title: 'Vue.js' 
	} 
})
複製代碼

上面的代碼將在 div 中輸出字符串 <h1 style="color: green;">Vue.js</h1>。之因此將整個標籤渲染爲字符串，是由於 mustache 模板標籤 {{title}}將傳入的數據視爲字符串，而不將其解析爲可執行代碼。這也有助於緩解把惡意代碼注入到頁面的 XSS 相關的問題。這相似於在 JavaScript 中使用 elementSelector.innerText = text 語句。

5. 如何在輸入框和數據屬性之間實現雙向數據綁定？

要實現雙向數據綁定，可使用 v-model 指令。 v-model 指令主要是語法糖：

<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">
複製代碼

在上面的語句中，每當觀察到「keyup」事件時，就會將名爲「nameInput」的數據屬性設置爲輸入框的值。同時，將輸入框的 value 屬性綁定到「nameInput」數據屬性。這樣在表單字段和數據屬性之間創建了雙向數據關係。

v-model 能夠作到這一點，而且比手動設置更有效地。要使用 v-model 複製上述效果，請再次在同一輸入框中輸入如下內容：

<input type="text" v-model="nameInput">
複製代碼

須要注意的是，當實現雙向數據綁定時，使用的數據屬性被認爲是事實上的來源。在 data 屬性上所作的任何更改都將優先於 form 字段上的用戶輸入事件。

6. 你如何捕獲元素上的點擊事件？

可使用 v-on:click 指令捕獲 Click 事件。該指令也能夠用縮寫符號 @click 表示。這是一個例子：

v-on:click 符號

<a v-on:click=」clickHandler」>Launch!</a>
複製代碼

@click 符號

<a @click=」clickHandler」>Launch!</a>
複製代碼

7. 什麼是動態 prop？

當使用 v-bind 指令爲 prop 分配值做爲綁定到屬性的函數時，被稱爲動態 prop。例如如下組件的 tweet 屬性綁定到名爲tweetText的數據屬性。這與靜態硬編碼值相反。這種綁定始終是單向的，這意味着數據能夠從父組件流到子組件，而毫不會反過來。

<TweetBox :tweet=」tweetText」> 
複製代碼

8. Vue.js 中的指令是什麼？

指令是一系列特殊屬性，你能夠經過將其添加到模板 HTML 標記中來賦予它們特殊的響應功能。指令容許模板中的元素使用數據屬性、方法、計算或監視的屬性和內聯表達式根據定義的邏輯對更改作出反應。例如如下代碼使用 v-on 指令在組件上實現 click 事件偵聽器。

<SignUpButton v-on:click=」doSignup」 /> 
複製代碼

或者

<SignUpButton @click=」doSignup」 />
複製代碼

在這個例子中，咱們使用 v-if 指令基於名爲 showButton 的數據屬性顯示或刪除元素與組件。指令以 v- 開頭來指示 Vue 特定的屬性。此規則的例外是 v-on 和 v-bind 的簡寫形式。

<SignUpButton v-if=」showButton」 />
複製代碼

Vue 還容許定義本身的自定義指令。

9. v-show 指令的用途是什麼？

v-show 指令容許有條件地顯示元素。在下面的代碼中，僅當 isDisplayed 數據屬性爲 true 時，纔會顯示該元素。

<TweetBox v-show=」isDisplayed」> 
複製代碼

使用 v-show 指令時，可以使用 CSS 的 display 屬性切換元素的可見性。

10. v-show 與 v-if 指令有何不一樣？

v-show 和 v-if 都用於有條件地顯示元素，然後者提供了條件渲染的真正實現。 v-show 只需切換 CSS 的 display 屬性便可顯示或隱藏元素，而 v-if 指令可建立或銷燬組件。每次顯示狀態更改時，代價一般會更大。

另外一方面，v-show 成本較低，由於它僅切換元素的CSS顯示屬性。因此若是必須常常切換元素，則 v-show 會提供比 v-if 更好，更優化的結果。

就加載元素的初始渲染成本而言，v-if 不會渲染最初隱藏的元素的節點，而 v-show 會渲染其 CSS display 屬性被設置爲 none 的元素。

11. 對於做爲元素實現的註釋框，咱們但願使用戶可以按下鍵盤上的Enter鍵，來將內容提交給名爲「storeComment」的方法。在代碼中對此進行演示。

能夠在任何元素上使用 v-on 指令來實現事件偵聽器。此外，v-on 還容許咱們將按鍵修飾符用於「enter」，「tab」，「esc」，「space」等常見按鍵。這是一個例子：

模板

<textarea @keyup.enter="storeComment"></textarea>
複製代碼

App

new Vue({
  el: '#app',
  methods: {
    storeComment(event) {
      // access the value of the textarea box using event.target.value or use v-model to bind to a data property
    }
  }
});
複製代碼

12. 如何在單頁 Vue 應用（SPA）中實現路由？

能夠經過官方的 vue-router 庫在用 Vue 構建的 SPA 中進行路由。該庫提供了全面的功能集，其中包括嵌套路線、路線參數和通配符、過渡、HTML5 歷史與哈希模式和自定義滾動行爲等功能。 Vue 還支持某些第三方路由器包。

13. 使用 Vue 時調用 event.preventDefault() 的最佳方式是什麼？

在事件偵聽器上調用 event.preventDefault() 的最佳方式是將 .prevent 修飾符與 v-on 指令一塊兒使用。這是一個例子：

<a @click.prevent=」doSomethingWhenClicked」>Do Something</a>
複製代碼

14. 什麼是過濾器？

過濾器是在 Vue 程序中實現自定義文本格式的一種很是簡單的方法。它們就像能夠在表達式中經過管道傳遞（使用管道字符）以取得結果的運算符。下面是一個能夠反轉文本字符串的過濾器示例：

模板

<div id="app">{{ title | reverseText }}</div>
App
new Vue({
    el: '#app',
    data: {
      title: 'This is a title'
    },
    filters: {
      reverseText(text) {
        return text.split('').reverse().join('');
      }
    }
});
複製代碼

輸出

eltit a si sihT

在上面的例子中，咱們建立了一個名爲 reverseText 的過濾器，該過濾器反轉文本字符串並返回。這是一個簡單的函數，接受輸入並返回處理後的輸出。經過在過濾器下聲明，它就能夠成爲能夠在模板中使用的過濾器。

在模板中，咱們只是將 reverseText 過濾器經過管道傳遞到了想要在 mustache 標籤中顯示的數據變量。這樣能夠將多個過濾器管道鏈接在一塊兒。所以過濾器提供了一種很是優雅的方式來處理文本。

15. 如何動態地在元素上切換 CSS 類？

Vue 容許咱們綁定到 class 屬性。在下面的例子中，咱們將 class 屬性綁定到一個對象，該對象容許使用 data 屬性切換類。

模板

<div :class=」{ divStyle : showDiv }」></div>
複製代碼

App

new Vue({
    el: '#app',
    data: {
 showDiv: true
    }
});
複製代碼

在上面的代碼中，只要數據屬性 showDiv 爲 true，類名 divStyle 將應用於 div。

16. 綁定 HTML 類時，該如何鏈接類？假設存在一個元素：Process。咱們只但願使用名爲「isActive」的數據屬性動態地切換 btnActive 類。

這能夠在綁定類時用 Array 來實現。如下是實現方法：

模板

<Button :class=」[‘btn’, ‘btnRed’, { btnActive : isActive }]」>Process</button>
複製代碼

App

new Vue({
    el: '#app',
    data: {
      isActive: true
    }
});
複製代碼

在上面的代碼段中，將串聯各個類的數組，並基於 isActive 數據屬性的值對對象中的表達式進行響應式評估。

17. 什麼是計算屬性？

計算屬性是一類特殊函數的結果，當從屬屬性發生變化時，這些函數會自動進行計算。用它們代替內聯表達式能夠更好地表達複雜的邏輯，在模板中不能做爲內聯表達式合併。

每一個計算方法均可以在模板部分做爲屬性使用。當從屬屬性更改時，計算方法將自動計算並緩存結果，這樣比使用普通方法更好。方法在訪問時將始終會從新計算，而若是自上一次計算和緩存階段以來該方法內使用的屬性未發生更改，則計算的屬性將不會從新計算。

須要注意的是，僅當方法中使用的屬性是響應性的（例如數據屬性）時，才考慮依賴關係的更改。

這是一個演示計算屬性的簡單例子：

模板

<div id="app">
  <input type="text" v-model="email" :class="{ invalid : isInvalid }">
</div>
複製代碼

App

const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

new Vue({
    el: '#app',
    data: {
      email: ''
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});
複製代碼

在上面的代碼示例中，若是正則表達式測試針對電子郵件輸入框失敗，則 isValid 計算屬性將返回 true。若是電子郵件驗證程序認爲輸入的值無效，就會看到文本框便爲紅色（你必須建立一個名爲 .invalid 的類，並將背景顏色屬性設置爲紅色）。當用戶鍵入內容時，將從新執行計算的方法，而且在驗證格式以後，動態刪除無效的類。

18. 如何確保在單文件組件中定義的 CSS 樣式僅應用於該組件，而不被用於其餘組件？

這能夠經過樣式標籤上的 scoped 屬性來實現。在內部 Vue 使用 PostCSS 插件爲全部樣式元素分配惟一的數據屬性，而後使樣式針對這些惟一的元素。舉個例子：

<template>
    <div class=」title」>This is a title</div>
</template>
<style scoped> .title { font-family: sans-serif; font-size: 20px; </style>
複製代碼

19. 如何將數據從父組件傳遞到子組件？

能夠用做爲組件中單向入口的 prop 把數據向下傳遞到子組件。這是一個例子：

<template>
    <div>
      <contact-list-item v-for=」contact in contacts」 :contact=」contact」 />
   </div>
</template>
<script> import ContactListItem from ‘./ContactListItem’; export default { name: ‘address-book’, data: function() { return { contacts: [.....] } }, components: { ContactListItem } } </script>
複製代碼

contact-list-item 上綁定的 prop 「contact」是一個入口，用於從用做子項的父組件接收數據。在 contact-list-item 組件中：

<template>
    <div>
        <span>{{ contact.name }}</span>
        <span>{{ contact.email }}</span>
   </div>
</template>
 
<script> export default { name: ‘contact-list-item’, props: [‘contact’] } </script> 
複製代碼

在這裏聲明瞭一個名爲「contact」的 prop 引入數據，而後能夠直接在模板部分中顯示。

20. 什麼是組件？

組件本質上是 Vue 實例，它們封裝模板、邏輯和可選的本地響應性數據屬性，可以提供可從新使用的自定義構建元素。可重用性是構建組件的核心。

使用單文件組件構建應用程序時，組件在擴展名爲 .vue 的文件中定義。單文件組件包含三個部分：模板部分定義了該組件的 HTML 佈局；腳本部分定義了數據、屬性和邏輯單元（如方法）並將內容導出爲 Vue 組件；還有一個樣式部分，用於定義組件的樣式表。單文件組件使用 Webpack 等模塊捆綁器進行編譯。

21. 什麼是生命週期hook？列出一些生命週期hook。

Vue 實例（組件）從其初始化到銷燬和刪除都經歷生命週期。在整個過程當中，Vue 容許開發人員運行自定義函數的幾個階段。這些函數稱爲生命週期 hook。如下是一些生命週期 hook 的列表：

created
mounted
updated
destroyed

22. 什麼是插槽（slot）？

插槽容許你定義能夠封裝和接受子 DOM 元素的元素。組件模板中的 <slot> </ slot> 元素做爲經過組件標籤捕獲的全部DOM元素的出口。這是一個例子：

Post.vue |實現插槽的組件

<template>
 <div class="hello">
   <h3 class="title">{{title}}</h3>
   <div class="content">
     <slot></slot>
   </div>
 </div>
</template>
 
複製代碼

App.vue | 使用Post組件的App組件

<template>
 <div id="app">
   <Post title="Hello from Vue!">
Vue 是用於構建用戶界面的漸進框架。與其餘框架不一樣，Vue從頭開始設計以逐漸採用。核心庫僅集中在視圖層，而且很容易與其餘庫或現有項目集成。另外一方面，當與現代工具和支持庫結合使用時，Vue也徹底可以爲複雜的單頁應用程序提供支持。
   </Post>
 </div>
</template>
複製代碼