1. Vue.js介紹? ??

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

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

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

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

2、使用Vue的好處

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

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

3、MVVM定義

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

4、Vue的生命周期

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

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

beforeMount（載入前） 在掛載開始之前被調(diào)用，相關(guān)的render函數(shù)首次被調(diào)用。實例已完成以下的配置：編譯模板，把data里面的數(shù)據(jù)和模板生成html。注意此時還沒有掛載html到頁面上。

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

beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進(jìn)一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。

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

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

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

5、Vue的響應(yīng)式原理

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

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

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

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

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

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

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

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

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

9、active-class是哪個組件的屬性？

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

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

三種。

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

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

第三種：單獨路由獨享組件

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

$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數(shù)。而$router是“路由實例”對象包括了路由的跳轉(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按照條件是否渲染，v-show是display的block或none

14、vue常用的修飾符？

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

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

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

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

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

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

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

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

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

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

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

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

18、vue 組件通信

1.父組件與子組件傳值

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

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

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

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

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

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

20、$nextTick是什么？

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

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

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

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

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

22、Promise對象是什么？

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

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

23、axios的特點有哪些？

1、axios是一個基于promise的HTTP庫，支持promise的所有API；

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

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

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

24、vue中的 ref 是什么？

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例。

25、vue如何兼容ie

babel-polyfill插件

26、頁面刷新vuex被清空解決辦法？

1.localStorage 存儲到本地再回去

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

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

1.與AngularJS的區(qū)別

相同點：

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

不同點：

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

2.與React的區(qū)別

相同點：

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

不同點：

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

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

localstorage和sessionstorage一樣都是用來存儲客戶端臨時信息的對象，他們均只能存儲字符串類型對象

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

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

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

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

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

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

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