1. 為什麼Vue被稱為“漸進框架”？
使用漸進式框架的代價很小，從而使現有專案（使用其他技術構建的專案）更容易採用並遷移到新框架。 Vue.js 是一個漸進式框架，因為你可以逐步將其引入現有應用，而不必從頭開始重寫整個程式。
Vue 的最基本和核心的部分涉及“檢視”層，因此可以通過逐步將 Vue 引入程式並替換“檢視”實現來開始你的旅程。
由於其不斷髮展的性質，Vue 與其他庫配合使用非常好，並且非常容易上手。這與 Angular.js 之類的框架相反，後者要求將現有程式完全重構並在該框架中實現。
2. Vue.js 中的宣告式渲染是什麼？
Vue.js 使渲染資料變得容易，並隱藏了內部實現。例如下面的程式碼：
HTML
<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 中是怎麼做的。
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 Doeage - 25city - New Yorkcountry - US4. 給出模板，描述 Vue 程式的輸出。
模板：
{{title}}
App:
new Vue({ \tel: '#app', \tdata: { \t\ttitle: 'Vue.js' \t} })
上面的程式碼將在 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 欄位上的使用者輸入事件。
可以使用 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>Appnew 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 的列表：
createdmountedupdateddestroyed22. 什麼是插槽（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>
在上面的示例中，斜體文字顯示在 Post 元件中標有 <slot> 元素的區域內。
23. 什麼是觀察者？
觀察者允許我們觀察更改的特定屬性，並執行定義為函式的自定義操作。儘管它們的用例與計算的屬性相交叉，但是當某些資料屬性發生改變時，有時需要觀察者執行自定義操作或執行代價昂貴的操作。
24. 如何從子元件發出自定義事件？
可以用 $emit('event-name', eventPayload)發出自定義事件。然後可以像其他事件一樣，用 v-on 指令在父元件上攔截。
25. 開發人員經常使用字母 “vm” 作為變數名來宣告根 Vue 例項。例如 const vm = new Vue()。在這種情況下，“vm”指的是什麼？
雖然這不是約定，但是開發人員經常使用變數名稱 'vm' 來命名根 Vue 例項，該變數名稱代表 'ViewModel'，因為 Vue 本質上負責檢視層，並且部分受到了 MVVM 模式的啟發（Model-View-View-Model）。但是，根本沒有必要將根例項命名為 “vm”。
作者：前端先鋒連結：https://juejin.im/post/5de0d7925188256edf0f881c