1. 為什么Vue被稱為“漸進(jìn)框架”？
使用漸進(jìn)式框架的代價(jià)很小风科，從而使現(xiàn)有項(xiàng)目（使用其他技術(shù)構(gòu)建的項(xiàng)目）更容易采用并遷移到新框架斯议。 Vue.js 是一個(gè)漸進(jìn)式框架产捞，因?yàn)槟憧梢灾鸩綄⑵湟氍F(xiàn)有應(yīng)用，而不必從頭開始重寫整個(gè)程序哼御。
Vue 的最基本和核心的部分涉及“視圖”層坯临，因此可以通過逐步將 Vue 引入程序并替換“視圖”實(shí)現(xiàn)來開始你的旅程。
由于其不斷發(fā)展的性質(zhì)恋昼，Vue 與其他庫配合使用非常好看靠，并且非常容易上手。這與 Angular.js 之類的框架相反液肌，后者要求將現(xiàn)有程序完全重構(gòu)并在該框架中實(shí)現(xiàn)挟炬。
2. Vue.js 中的聲明式渲染是什么？
Vue.js 使渲染數(shù)據(jù)變得容易嗦哆，并隱藏了內(nèi)部實(shí)現(xiàn)谤祖。例如下面的代碼：
HTML
JavaScript
constgreeting = “Hello there!”;constappDiv =document.getElementById(“app”);appDiv.innerText = greeting;
上面的代碼段將在 ID 為 “app” 的 div 中顯示短語 “Hello there！”老速。代碼包含實(shí)現(xiàn)結(jié)果所需的所有步驟粥喜。首先選擇 ID 為 “app” 的 DOM 元素，然后用 innerText 屬性手動(dòng)設(shè)置 div 的內(nèi)容烁峭。
現(xiàn)在容客，讓我們看看在 Vue 中是怎么做的。
Template
{{ greeting }}
App
newVue({data: {greeting: ‘Hello There!’? ? },el: ‘#app’});
我們?cè)?Vue 程序中創(chuàng)建了一個(gè)名為 “greeting” 的數(shù)據(jù)屬性约郁，但是只需要在 div 中用 mustache 語法輸入 “greeting” 即可缩挑，而不必關(guān)心內(nèi)部實(shí)現(xiàn)。我們聲明了 “greeting” 變量鬓梅，其余的由 Vue 完成供置。這就是聲明式渲染的樣子。 Vue 隱藏并管理內(nèi)部信息绽快。
3. 你用哪個(gè)指令遍歷對(duì)象的屬性芥丧？
要遍歷對(duì)象或數(shù)組，可以使用?v-for?指令坊罢。下面是一個(gè)例子：
Template
- {{ key }} - {{ value }}
App
newVue({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:
newVue({el:'#app',data: {title:'Vue.js'} })
上面的代碼將在 div 中輸出字符串?<h1 style="color: green;">Vue.js</h1>活孩。之所以將整個(gè)標(biāo)簽渲染為字符串物遇，是因?yàn)?mustache 模板標(biāo)簽?{{title}}將傳入的數(shù)據(jù)視為字符串，而不將其解析為可執(zhí)行代碼。這也有助于緩解把惡意代碼注入到頁面的 XSS 相關(guān)的問題 询兴。這類似于在 JavaScript 中使用?elementSelector.innerText = text?語句乃沙。
5. 如何在輸入框和數(shù)據(jù)屬性之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定？
要實(shí)現(xiàn)雙向數(shù)據(jù)綁定诗舰，可以使用 v-model 指令警儒。 v-model 指令主要是語法糖：
在上面的語句中，每當(dāng)觀察到 “keyup” 事件時(shí)眶根，就會(huì)將名為 “nameInput” 的數(shù)據(jù)屬性設(shè)置為輸入框的值蜀铲。同時(shí)，將輸入框的 value 屬性綁定到 “nameInput” 數(shù)據(jù)屬性属百。這樣在表單字段和數(shù)據(jù)屬性之間建立了雙向數(shù)據(jù)關(guān)系蝙茶。
v-model 可以做到這一點(diǎn)，并且比手動(dòng)設(shè)置更有效地诸老。要使用 v-model 復(fù)制上述效果隆夯，請(qǐng)?jiān)俅卧谕惠斎肟蛑休斎胍韵聝?nèi)容：
需要注意的是，當(dāng)實(shí)現(xiàn)雙向數(shù)據(jù)綁定時(shí)别伏，使用的數(shù)據(jù)屬性被認(rèn)為是事實(shí)上的來源蹄衷。在 data 屬性上所做的任何更改都將優(yōu)先于 form 字段上的用戶輸入事件。
6. 你如何捕獲元素上的點(diǎn)擊事件厘肮？
可以使用?v-on:click?指令捕獲 Click 事件愧口。該指令也可以用縮寫符號(hào)?@click?表示。這是一個(gè)例子：
v-on:click 符號(hào)
Launch!
@click 符號(hào)
Launch!
7. 什么是動(dòng)態(tài) prop类茂？
當(dāng)使用 v-bind 指令為 prop 分配值作為綁定到屬性的函數(shù)時(shí)耍属，被稱為動(dòng)態(tài) prop。例如以下組件的?tweet?屬性綁定到名為tweetText的數(shù)據(jù)屬性巩检。這與靜態(tài)硬編碼值相反厚骗。這種綁定始終是單向的，這意味著數(shù)據(jù)可以從父組件流到子組件兢哭，而絕不會(huì)反過來领舰。
8. Vue.js 中的指令是什么？
指令是一系列特殊屬性迟螺，你可以通過將其添加到模板 HTML 標(biāo)記中來賦予它們特殊的響應(yīng)功能冲秽。指令允許模板中的元素使用數(shù)據(jù)屬性、方法矩父、計(jì)算或監(jiān)視的屬性和內(nèi)聯(lián)表達(dá)式根據(jù)定義的邏輯對(duì)更改做出反應(yīng)锉桑。例如以下代碼使用 v-on 指令在組件上實(shí)現(xiàn) click 事件偵聽器。
或者
在這個(gè)例子中窍株，我們使用 v-if 指令基于名為 showButton 的數(shù)據(jù)屬性顯示或刪除元素與組件民轴。指令以?v-?開頭來指示 Vue 特定的屬性郑诺。此規(guī)則的例外是 v-on 和 v-bind 的簡寫形式。
Vue 還允許定義自己的自定義指令杉武。
9. v-show 指令的用途是什么？
v-show 指令允許有條件地顯示元素辙售。在下面的代碼中轻抱，僅當(dāng)?isDisplayed?數(shù)據(jù)屬性為?true?時(shí)，才會(huì)顯示該元素旦部。
使用 v-show 指令時(shí)祈搜，可使用 CSS 的?display?屬性切換元素的可見性。
10. v-show 與 v-if 指令有何不同士八？
v-show 和 v-if 都用于有條件地顯示元素容燕，而后者提供了條件渲染的真正實(shí)現(xiàn)。 v-show 只需切換 CSS 的?display?屬性即可顯示或隱藏元素婚度，而 v-if 指令可創(chuàng)建或銷毀組件蘸秘。每次顯示狀態(tài)更改時(shí)，代價(jià)通常會(huì)更大蝗茁。
另一方面醋虏，v-show 成本較低，因?yàn)樗鼉H切換元素的CSS顯示屬性哮翘。所以如果必須經(jīng)常切換元素颈嚼，則 v-show 會(huì)提供比 v-if 更好，更優(yōu)化的結(jié)果饭寺。
就加載元素的初始渲染成本而言阻课，v-if 不會(huì)渲染最初隱藏的元素的節(jié)點(diǎn)，而 v-show 會(huì)渲染其 CSS?display?屬性被設(shè)置為?none?的元素艰匙。
11. 對(duì)于作為元素實(shí)現(xiàn)的注釋框限煞，我們希望使用戶能夠按下鍵盤上的Enter鍵，來將內(nèi)容提交給名為 “storeComment” 的方法员凝。在代碼中對(duì)此進(jìn)行演示晰骑。
可以在任何元素上使用 v-on 指令來實(shí)現(xiàn)事件偵聽器。此外绊序，v-on 還允許我們將按鍵修飾符用于 “enter”硕舆，“tab”，“esc”骤公，“space” 等常見按鍵抚官。這是一個(gè)例子：
模板
App
newVue({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 應(yīng)用（SPA）中實(shí)現(xiàn)路由？
可以通過官方的 vue-router 庫在用 Vue 構(gòu)建的 SPA 中進(jìn)行路由阶捆。該庫提供了全面的功能集凌节，其中包括嵌套路線钦听、路線參數(shù)和通配符、過渡倍奢、HTML5 歷史與哈希模式和自定義滾動(dòng)行為等功能朴上。 Vue 還支持某些第三方路由器包。
13. 使用 Vue 時(shí)調(diào)用 event.preventDefault() 的最佳方式是什么卒煞？
在事件偵聽器上調(diào)用?event.preventDefault()?的最佳方式是將?.prevent?修飾符與?v-on?指令一起使用痪宰。這是一個(gè)例子：
Do Something
14. 什么是過濾器？
過濾器是在 Vue 程序中實(shí)現(xiàn)自定義文本格式的一種非常簡單的方法畔裕。它們就像可以在表達(dá)式中通過管道傳遞（使用管道字符）以取得結(jié)果的運(yùn)算符衣撬。下面是一個(gè)可以反轉(zhuǎn)文本字符串的過濾器示例：
模板
{{ title | reverseText }}Appnew Vue({? ? el: '#app',? ? data: {? ? ? title: 'This is a title'? ? },? ? filters: {? ? ? reverseText(text) {? ? ? ? return text.split('').reverse().join('');? ? ? }? ? }});
輸出
eltit a si sihT
在上面的例子中，我們創(chuàng)建了一個(gè)名為 reverseText 的過濾器扮饶，該過濾器反轉(zhuǎn)文本字符串并返回具练。這是一個(gè)簡單的函數(shù)，接受輸入并返回處理后的輸出甜无。通過在過濾器下聲明扛点，它就可以成為可以在模板中使用的過濾器。
在模板中岂丘，我們只是將 reverseText 過濾器通過管道傳遞到了想要在 mustache 標(biāo)簽中顯示的數(shù)據(jù)變量占键。這樣可以將多個(gè)過濾器管道連接在一起。因此過濾器提供了一種非常優(yōu)雅的方式來處理文本元潘。
15. 如何動(dòng)態(tài)地在元素上切換 CSS 類畔乙？
Vue 允許我們綁定到 class 屬性。在下面的例子中翩概，我們將 class 屬性綁定到一個(gè)對(duì)象牲距，該對(duì)象允許使用 data 屬性切換類。
模板
App
newVue({el:'#app',data: {showDiv:true}});
在上面的代碼中钥庇，只要數(shù)據(jù)屬性?showDiv?為?true牍鞠，類名?divStyle?將應(yīng)用于 div。
16. 綁定 HTML 類時(shí)评姨，該如何連接類难述？假設(shè)存在一個(gè)元素：Process。我們只希望使用名為 “isActive” 的數(shù)據(jù)屬性動(dòng)態(tài)地切換 btnActive 類吐句。
這可以在綁定類時(shí)用 Array 來實(shí)現(xiàn)胁后。以下是實(shí)現(xiàn)方法：
模板
Process
App
newVue({el:'#app',data: {isActive:true}});
在上面的代碼段中，將串聯(lián)各個(gè)類的數(shù)組嗦枢，并基于?isActive?數(shù)據(jù)屬性的值對(duì)對(duì)象中的表達(dá)式進(jìn)行響應(yīng)式評(píng)估攀芯。
17. 什么是計(jì)算屬性？
計(jì)算屬性是一類特殊函數(shù)的結(jié)果文虏，當(dāng)從屬屬性發(fā)生變化時(shí)侣诺，這些函數(shù)會(huì)自動(dòng)進(jìn)行計(jì)算殖演。用它們代替內(nèi)聯(lián)表達(dá)式可以更好地表達(dá)復(fù)雜的邏輯，在模板中不能作為內(nèi)聯(lián)表達(dá)式合并年鸳。
每個(gè)計(jì)算方法都可以在模板部分作為屬性使用趴久。當(dāng)從屬屬性更改時(shí)，計(jì)算方法將自動(dòng)計(jì)算并緩存結(jié)果搔确，這樣比使用普通方法更好彼棍。方法在訪問時(shí)將始終會(huì)重新計(jì)算，而如果自上一次計(jì)算和緩存階段以來該方法內(nèi)使用的屬性未發(fā)生更改妥箕，則計(jì)算的屬性將不會(huì)重新計(jì)算。
需要注意的是更舞，僅當(dāng)方法中使用的屬性是響應(yīng)性的（例如數(shù)據(jù)屬性）時(shí)畦幢，才考慮依賴關(guān)系的更改。
這是一個(gè)演示計(jì)算屬性的簡單例子：
模板
App
constemailRegEx =/^(([^<>()\[\]\\.,;:\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,}))$/newVue({el:'#app',data: {email:''},computed: {? ? ? isInvalid() {return!emailRegEx.test(this.email);? ? ? }? ? }});
在上面的代碼示例中缆蝉，如果正則表達(dá)式測(cè)試針對(duì)電子郵件輸入框失敗宇葱，則?isValid?計(jì)算屬性將返回?true。如果電子郵件驗(yàn)證程序認(rèn)為輸入的值無效刊头，就會(huì)看到文本框便為紅色（你必須創(chuàng)建一個(gè)名為?.invalid?的類黍瞧，并將背景顏色屬性設(shè)置為紅色）。當(dāng)用戶鍵入內(nèi)容時(shí)原杂，將重新執(zhí)行計(jì)算的方法印颤，并且在驗(yàn)證格式之后，動(dòng)態(tài)刪除無效的類穿肄。
18. 如何確保在單文件組件中定義的 CSS 樣式僅應(yīng)用于該組件年局，而不被用于其他組件？
這可以通過樣式標(biāo)簽上的?scoped?屬性來實(shí)現(xiàn)咸产。在內(nèi)部 Vue 使用 PostCSS 插件為所有樣式元素分配唯一的數(shù)據(jù)屬性矢否，然后使樣式針對(duì)這些唯一的元素。舉個(gè)例子：
This is a title.title{font-family: sans-serif;font-size:20px;
19. 如何將數(shù)據(jù)從父組件傳遞到子組件脑溢？
可以用作為組件中單向入口的 prop 把數(shù)據(jù)向下傳遞到子組件僵朗。這是一個(gè)例子：
importContactListItemfrom‘./ContactListItem’;exportdefault{name: ‘a(chǎn)ddress-book’,data:function(){return{contacts: [.....]}},components: {ContactListItem}}contact-list-item?上綁定的 prop “contact” 是一個(gè)入口，用于從用作子項(xiàng)的父組件接收數(shù)據(jù)屑彻。在?contact-list-item?組件中：
在這里聲明了一個(gè)名為 “contact” 的 prop 引入數(shù)據(jù)验庙，然后可以直接在模板部分中顯示。
20. 什么是組件社牲？
組件本質(zhì)上是 Vue 實(shí)例壶谒，它們封裝模板、邏輯和可選的本地響應(yīng)性數(shù)據(jù)屬性膳沽，能夠提供可重新使用的自定義構(gòu)建元素汗菜∪觅鳎可重用性是構(gòu)建組件的核心。
使用單文件組件構(gòu)建應(yīng)用程序時(shí)陨界，組件在擴(kuò)展名為 .vue 的文件中定義巡揍。單文件組件包含三個(gè)部分：模板部分定義了該組件的 HTML 布局；腳本部分定義了數(shù)據(jù)菌瘪、屬性和邏輯單元（如方法）并將內(nèi)容導(dǎo)出為 Vue 組件腮敌；還有一個(gè)樣式部分，用于定義組件的樣式表俏扩。單文件組件使用 Webpack 等模塊捆綁器進(jìn)行編譯糜工。
21. 什么是生命周期hook？列出一些生命周期hook录淡。
Vue 實(shí)例（組件）從其初始化到銷毀和刪除都經(jīng)歷生命周期捌木。在整個(gè)過程中，Vue 允許開發(fā)人員運(yùn)行自定義函數(shù)的幾個(gè)階段嫉戚。這些函數(shù)稱為生命周期 hook刨裆。以下是一些生命周期 hook 的列表：
created
mounted
updated
destroyed
22. 什么是插槽（slot）？
插槽允許你定義可以封裝和接受子 DOM 元素的元素彬檀。組件模板中的?<slot> </ slot>?元素作為通過組件標(biāo)簽捕獲的所有DOM元素的出口帆啃。這是一個(gè)例子：
Post.vue |實(shí)現(xiàn)插槽的組件
{{title}}
App.vue | 使用Post組件的App組件
Vue 是用于構(gòu)建用戶界面的漸進(jìn)框架。與其他框架不同窍帝，Vue從頭開始設(shè)計(jì)以逐漸采用努潘。核心庫僅集中在視圖層，并且很容易與其他庫或現(xiàn)有項(xiàng)目集成坤学。另一方面慈俯，當(dāng)與現(xiàn)代工具和支持庫結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供支持拥峦。
在上面的示例中贴膘，斜體文本顯示在 Post 組件中標(biāo)有?<slot>?元素的區(qū)域內(nèi)。
23. 什么是觀察者略号？
觀察者允許我們觀察更改的特定屬性刑峡，并執(zhí)行定義為函數(shù)的自定義操作。盡管它們的用例與計(jì)算的屬性相交叉玄柠，但是當(dāng)某些數(shù)據(jù)屬性發(fā)生改變時(shí)突梦，有時(shí)需要觀察者執(zhí)行自定義操作或運(yùn)行代價(jià)昂貴的操作。
24. 如何從子組件發(fā)出自定義事件羽利？
可以用?$emit('event-name', eventPayload)發(fā)出自定義事件宫患。然后可以像其他事件一樣，用 v-on 指令在父組件上攔截这弧。
25. 開發(fā)人員經(jīng)常使用字母 “vm” 作為變量名來聲明根 Vue 實(shí)例娃闲。例如 const vm = new Vue()虚汛。在這種情況下，“vm”指的是什么皇帮？
雖然這不是約定卷哩，但是開發(fā)人員經(jīng)常使用變量名稱 'vm' 來命名根 Vue 實(shí)例，該變量名稱代表 'ViewModel'属拾，因?yàn)?Vue 本質(zhì)上負(fù)責(zé)視圖層将谊，并且部分受到了 MVVM 模式的啟發(fā)（Model-View-View-Model）。但是渐白，根本沒有必要將根實(shí)例命名為 “vm”尊浓。
