1. Vue.js介紹? ??

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

Vue.js是一個構建數據驅動的Web界面的庫。

Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和 Vue生態系統支持的庫開發的復雜單頁應用。數據驅動+組件化的前端開發。

簡而言之：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

2、使用Vue的好處

vue兩大特點：響應式編程、組件化

vue的優勢：輕量級框架、簡單易學、雙向數據綁定、組件化、視圖、數據和結構的分離、虛擬DOM、運行速度快

3、MVVM定義

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

4、Vue的生命周期

beforeCreate（創建前） 在數據觀測和初始化事件還未開始

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

beforeMount（載入前）.0里面的數據和模板生成html。注意此時還沒有掛載html到頁面上。

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

beforeUpdate（更新前） 在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

updated（更新后） 在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

beforeDestroy（銷毀前） 在實例銷毀之前調用。實例仍然完全可用。

destroyed（銷毀后） 在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

5、Vue的響應式原理（雙向數據綁定原理）

當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉為 getter/setter并且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。 每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

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

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

7、vue中data必須是一個函數

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

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

v-text：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會作為普通文本輸出

v-html：將數據輸出到元素內部，如果輸出的數據有HTML代碼，會被渲染

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

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

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

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

10、vue-router有哪幾種導航鉤子？

三種。

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

第二種：組件內的鉤子；

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

11、$route和$router的區別

$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等

12、vue幾種常用的指令

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

13、v-if 和 v-show 區別

v-if是根據后面數據的真假值判斷直接從Dom樹上刪除或重建元素節點

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

v-if是惰性的，如果初始條件為假，則什么也不做；只有在條件第一次變為真時才開始局部編譯；

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

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

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

14、vue常用的修飾符？

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

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

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

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

16、computed、watch、methods的區別

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

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

methods方法，函數，綁定事件調用；不會使用緩存

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

js冒泡概念：當父元素內多級子元素綁定了同一個事件，js會依次從內往外或者從外往內（？）執行每個元素的該事件，從而引發冒泡

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

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

18、vue 組件通信

1.父組件與子組件傳值

父組件傳給子組件：子組件通過props方法接受數據;

子組件傳給父組件：$emit方法傳遞參數

2.非父子組件間的數據傳遞，兄弟組件傳值

eventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。也可使用vuex

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

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

20、$nextTick是什么？

vue實現響應式并不是數據發生變化后dom立即變化，而是按照一定的策略來進行dom更新。

$nextTick?是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用 $nextTick，則可以在回調中獲取更新后的 DOM

21、Vue子組件調用父組件的方法

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

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

22、Promise對象是什么？

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

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

23、axios的特點有哪些？

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

2、它可以攔截請求和響應；

3、它可以轉換請求數據和響應數據，并對響應回來的內容自動轉換為json類型的數據；

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

24、vue中的 ref 是什么？

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

25、vue如何兼容ie

babel-polyfill插件

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

1.localStorage 存儲到本地再回去

2.重新獲取接口獲取數據

27、Vue與Angular以及React的區別？

1.與AngularJS的區別

相同點：

都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。

不同點：

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

2.與React的區別

相同點：

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

不同點：

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

28、localstorage和sessionstorage是什么?區別是什么?

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

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

sessionstorage生命周期為當前窗口或標簽，一旦窗口或標簽被永久關閉了，那么所有通過sessionstorage存儲的數據也將被清空。

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

29、為什么要進行前后端分離？前后端分離的優勢在哪里？劣勢在哪里？

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

缺點：1 、當接口發生改變的時候，前后端都需要改變

? ? ? ? ? ?2、 當發生異常的時候，前后端需要聯調--聯調是非常浪費時間的