1. Vue.js介紹? ??

Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API；

Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面的庫(kù)。

Vue.js是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。數(shù)據(jù)驅(qū)動(dòng)+組件化的前端開(kāi)發(fā)。

簡(jiǎn)而言之：Vue.js是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。

2、使用Vue的好處

vue兩大特點(diǎn)：響應(yīng)式編程、組件化

vue的優(yōu)勢(shì)：輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、視圖、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快

3、MVVM定義

MVVM是Model-View-ViewModel的簡(jiǎn)寫。即模型-視圖-視圖模型?！灸Ｐ汀恐傅氖呛蠖藗鬟f的數(shù)據(jù)。【視圖】指的是所看到的頁(yè)面。【視圖模型】mvvm模式的核心，它是連接view和model的橋梁。它有兩個(gè)方向：一是將【模型】轉(zhuǎn)化成【視圖】，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁(yè)面。實(shí)現(xiàn)的方式是：數(shù)據(jù)綁定。二是將【視圖】轉(zhuǎn)化成【模型】，即將所看到的頁(yè)面轉(zhuǎn)化成后端的數(shù)據(jù)。實(shí)現(xiàn)的方式是：DOM 事件監(jiān)聽(tīng)。這兩個(gè)方向都實(shí)現(xiàn)的，我們稱之為數(shù)據(jù)的雙向綁定。總結(jié)：在MVVM的框架下視圖和模型是不能直接通信的。它們通過(guò)ViewModel來(lái)通信，ViewModel通常要實(shí)現(xiàn)一個(gè)observer觀察者，當(dāng)數(shù)據(jù)發(fā)生變化，ViewModel能夠監(jiān)聽(tīng)到數(shù)據(jù)的這種變化，然后通知到對(duì)應(yīng)的視圖做自動(dòng)更新，而當(dāng)用戶操作視圖，ViewModel也能監(jiān)聽(tīng)到視圖的變化，然后通知數(shù)據(jù)做改動(dòng)，這實(shí)際上就實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信

4、Vue的生命周期

beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測(cè)和初始化事件還未開(kāi)始

created（創(chuàng)建后） 完成數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，初始化事件，$el屬性還沒(méi)有顯示出來(lái)

beforeMount（載入前）.0里面的數(shù)據(jù)和模板生成html。注意此時(shí)還沒(méi)有掛載html到頁(yè)面上。

mounted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用。實(shí)例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對(duì)象。完成模板中的html渲染到html頁(yè)面中。此過(guò)程中進(jìn)行ajax交互。

beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前?？梢栽谠撱^子中進(jìn)一步地更改狀態(tài)，不會(huì)觸發(fā)附加的重渲染過(guò)程。

updated（更新后） 在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁之后調(diào)用。調(diào)用時(shí)，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因?yàn)檫@可能會(huì)導(dǎo)致更新無(wú)限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy（銷毀前） 在實(shí)例銷毀之前調(diào)用。實(shí)例仍然完全可用。

destroyed（銷毀后） 在實(shí)例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

5、Vue的響應(yīng)式原理（雙向數(shù)據(jù)綁定原理）

當(dāng)一個(gè)Vue實(shí)例創(chuàng)建時(shí)，vue會(huì)遍歷data選項(xiàng)的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴，在屬性被訪問(wèn)和修改時(shí)通知變化。 每個(gè)組件實(shí)例都有相應(yīng)的 watcher 程序?qū)嵗鼤?huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

6、第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？

觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted ，并在mounted的時(shí)候DOM渲染完成

7、vue中data必須是一個(gè)函數(shù)

對(duì)象為引用類型，當(dāng)重用組件時(shí)，由于數(shù)據(jù)對(duì)象都指向同一個(gè)data對(duì)象，當(dāng)在一個(gè)組件中修改data時(shí)，其他重用的組件中的data會(huì)同時(shí)被修改；而使用返回對(duì)象的函數(shù)，由于每次返回的都是一個(gè)新對(duì)象（Object的實(shí)例），引用地址不同，則不會(huì)出現(xiàn)這個(gè)問(wèn)題。

8、vue中做數(shù)據(jù)渲染的時(shí)候如何保證將數(shù)據(jù)原樣輸出？

v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)作為普通文本輸出

v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼，會(huì)被渲染

?{{}}：插值表達(dá)式，可以直接獲取Vue實(shí)例中定義的數(shù)據(jù)或函數(shù)，使用插值表達(dá)式的時(shí)候，值可能閃爍；而使用v-html、v-text不會(huì)閃爍，有值就顯示，沒(méi)值就隱藏

vue文本閃爍問(wèn)題,? ?給標(biāo)簽綁定v-cloak命令, style樣式里寫上:[v-cloak] {display:none;}

9、active-class是哪個(gè)組件的屬性？

vue-router模塊的router-link組件。

10、vue-router有哪幾種導(dǎo)航鉤子？

三種。

一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。

第二種：組件內(nèi)的鉤子；

第三種：?jiǎn)为?dú)路由獨(dú)享組件鉤子

11、$route和$router的區(qū)別

$route是“路由信息對(duì)象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等

12、vue幾種常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

13、v-if 和 v-show 區(qū)別

v-if是根據(jù)后面數(shù)據(jù)的真假值判斷直接從Dom樹上刪除或重建元素節(jié)點(diǎn)

v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯；

v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存，而且DOM元素始終被保留；

v-if有更高的切換消耗，不適合做頻繁的切換；

v-show有更高的初始渲染消耗，適合做頻繁的切換；

14、vue常用的修飾符？

.prevent: 提交事件不再重載頁(yè)面；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)；.capture: 事件偵聽(tīng)，事件發(fā)生的時(shí)候會(huì)調(diào)用

15、vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一個(gè)加載器，跟template/js/style轉(zhuǎn)換成js模塊。

用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

16、computed、watch、methods的區(qū)別

computed計(jì)算屬性是用來(lái)聲明式的描述一個(gè)值依賴了其它的值。當(dāng)你在模板里把數(shù)據(jù)綁定到一個(gè)計(jì)算屬性上時(shí)，Vue 會(huì)在其依賴的任何值導(dǎo)致該計(jì)算屬性改變時(shí)更新 DOM。這個(gè)功能非常強(qiáng)大，它可以讓你的代碼更加聲明式、數(shù)據(jù)驅(qū)動(dòng)并且易于維護(hù)。

watch監(jiān)聽(tīng)的是你定義的變量,當(dāng)你定義的變量的值發(fā)生變化時(shí)，調(diào)用對(duì)應(yīng)的方法。就好在div寫一個(gè)表達(dá)式name，data里寫入num和lastname,firstname,在watch里當(dāng)num的值發(fā)生變化時(shí)，就會(huì)調(diào)用num的方法，方法里面的形參對(duì)應(yīng)的是num的新值和舊值，而計(jì)算屬性computed,計(jì)算的是Name依賴的值,它不能計(jì)算在data中已經(jīng)定義過(guò)的變量。

methods方法，函數(shù)，綁定事件調(diào)用；不會(huì)使用緩存

17、什么是js的冒泡？Vue中如何阻止冒泡事件？

js冒泡概念：當(dāng)父元素內(nèi)多級(jí)子元素綁定了同一個(gè)事件，js會(huì)依次從內(nèi)往外或者從外往內(nèi)（？）執(zhí)行每個(gè)元素的該事件，從而引發(fā)冒泡

?js解決冒泡：event.stopPropagation()

vue解決冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

18、vue 組件通信

1.父組件與子組件傳值

父組件傳給子組件：子組件通過(guò)props方法接受數(shù)據(jù);

子組件傳給父組件：$emit方法傳遞參數(shù)

2.非父子組件間的數(shù)據(jù)傳遞，兄弟組件傳值

eventBus，就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站，可以用它來(lái)傳遞事件和接收事件。也可使用vuex

19、<keep-alive></keep-alive>的作用是什么？

<keep-alive></keep-alive>包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例,主要用于保留組件狀態(tài)或避免重新渲染。 大白話: 比如有一個(gè)列表和一個(gè)詳情，那么用戶就會(huì)經(jīng)常執(zhí)行打開(kāi)詳情=>返回列表=>打開(kāi)詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁(yè)面，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存，這樣用戶每次返回列表的時(shí)候，都能從緩存中快速渲染，而不是重新渲染

20、$nextTick是什么？

vue實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化后dom立即變化，而是按照一定的策略來(lái)進(jìn)行dom更新。

$nextTick?是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

21、Vue子組件調(diào)用父組件的方法

第一種方法是直接在子組件中通過(guò)this.$parent.event來(lái)調(diào)用父組件的方法

第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽(tīng)這個(gè)事件就行了。

22、Promise對(duì)象是什么？

1.Promise是異步編程的一種解決方案，它是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成Promise實(shí)例；

2.promise的兩個(gè)特點(diǎn) 對(duì)象狀態(tài)不受外界影響 && 一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到結(jié)果（pending狀態(tài)-->fulfilled || pending-->rejected）

23、axios的特點(diǎn)有哪些？

1、axios是一個(gè)基于promise的HTTP庫(kù)，支持promise的所有API；

2、它可以攔截請(qǐng)求和響應(yīng)；

3、它可以轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來(lái)的內(nèi)容自動(dòng)轉(zhuǎn)換為json類型的數(shù)據(jù)；

4、它安全性更高，客戶端支持防御XSRF；

24、vue中的 ref 是什么？

ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例。

25、vue如何兼容ie

babel-polyfill插件

26、頁(yè)面刷新vuex被清空解決辦法？

1.localStorage 存儲(chǔ)到本地再回去

2.重新獲取接口獲取數(shù)據(jù)

27、Vue與Angular以及React的區(qū)別？

1.與AngularJS的區(qū)別

相同點(diǎn)：

都支持指令：內(nèi)置指令和自定義指令；都支持過(guò)濾器：內(nèi)置過(guò)濾器和自定義過(guò)濾器；都支持雙向數(shù)據(jù)綁定；都不支持低端瀏覽器。

不同點(diǎn)：

AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡(jiǎn)單、直觀；在性能上，AngularJS依賴對(duì)數(shù)據(jù)做臟檢查，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。

2.與React的區(qū)別

相同點(diǎn)：

React采用特殊的JSX語(yǔ)法，Vue.js在組件開(kāi)發(fā)中也推崇編寫.vue特殊文件格式，對(duì)文件內(nèi)容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)，可以讓開(kāi)發(fā)者定制化地去處理需求；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開(kāi)發(fā)中都支持mixins的特性。

不同點(diǎn)：

React采用的Virtual DOM會(huì)對(duì)渲染出來(lái)的結(jié)果做臟檢查；Vue.js在模板中提供了指令，過(guò)濾器等，可以非常方便，快捷地操作Virtual DOM。

28、localstorage和sessionstorage是什么?區(qū)別是什么?

localstorage和sessionstorage一樣都是用來(lái)存儲(chǔ)客戶端臨時(shí)信息的對(duì)象，他們均只能存儲(chǔ)字符串類型對(duì)象

localstorage生命周期是永久的，這意味著除非用戶在瀏覽器提供的UI上清除localstorage信息，否則這些信息將永遠(yuǎn)存在。

sessionstorage生命周期為當(dāng)前窗口或標(biāo)簽，一旦窗口或標(biāo)簽被永久關(guān)閉了，那么所有通過(guò)sessionstorage存儲(chǔ)的數(shù)據(jù)也將被清空。

不同瀏覽器無(wú)法共享localstorage或sessionstorage中的信息。相同瀏覽器的不同頁(yè)面可以共享相同的localstorage（頁(yè)面屬于相同的域名和端口），但是不同頁(yè)面或標(biāo)簽間無(wú)法共享sessionstorage。這里需要注意的是，頁(yè)面及標(biāo)簽僅指頂級(jí)窗口，如果一個(gè)標(biāo)簽頁(yè)包含多個(gè)iframe標(biāo)簽他們屬于同源頁(yè)面，那么他們之間是可以共享sessionstorage的。

29、為什么要進(jìn)行前后端分離？前后端分離的優(yōu)勢(shì)在哪里？劣勢(shì)在哪里？

優(yōu)點(diǎn)：前端專門負(fù)責(zé)前端頁(yè)面和特效的編寫，后端專門負(fù)責(zé)后端業(yè)務(wù)邏輯的處理，前端追求的是頁(yè)面美觀、頁(yè)面流暢、頁(yè)面兼容等。后端追求的是三高（高并發(fā)、高可用、高性能）讓他們各自負(fù)責(zé)各自的領(lǐng)域，讓專業(yè)的人負(fù)責(zé)處理專業(yè)的事情，提高開(kāi)發(fā)效率

缺點(diǎn)：1 、當(dāng)接口發(fā)生改變的時(shí)候，前后端都需要改變

? ? ? ? ? ?2、 當(dāng)發(fā)生異常的時(shí)候，前后端需要聯(lián)調(diào)--聯(lián)調(diào)是非常浪費(fèi)時(shí)間的