2018最新前端vue面試基礎總結
本篇博客總結了全部前端面試[Vue][6]方面的總結，適用於校招，秋招等，將會滿足你所有的需求哦：
MVVM模式與MVC模式的區別：
- MVVM就是Model-View-ViewModel的縮寫，中文意思就是模型視圖。
MVC是Model-View-Controller的縮寫，中文意思是模型視圖控制器。
···前者是將’數據模型數據雙向綁定’的思想作爲核心，所以視圖View的數據的變化的同時也會使Model層的數據源發生變化，同理Model的數據源的數據發生變化的同時也會立即反應到視圖View上。Vue是以數據爲驅動的，Vue自身將DOM和數據進行綁定，一旦創建綁定，DOM和數據將保持同步，每當數據發生變化，DOM會跟着變化。ViewModel是Vue的核心，它是Vue的一個實例。DOM Listeners和 Data BIndings 是實現雙向綁定的關鍵。Dom Listeners 監聽頁面所有view層的DOM元素的變化，當發生變化時，Model層的數據也會隨之變化；Data Bindings監聽Model層的數據變化，當Model層的數據發生變化的同時，View層的DOM元素也會同時的隨之發生變化。
···而後者是比較直觀的架構模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。Vue中v-show和v-if有什麼不同：
兩者都是條件渲染指令，綁定boolen值；
···與v-if不同的是，無論v-show的值爲true或者false，元素都會存在與HTML代碼片段之中，只是設置其CSS的style值(display)；而v-if的值爲true時，元素纔會存在與HTML代碼之中。如何讓CSS只在當前的組件中起作用，不會影響全局的樣式：
在vue的每一個組件中都可以自定義各自的CSS以及JS，如希望組件內的CSS存在作用域，只需要在style標籤上加入scope屬性即可；
Vue的雙向數據綁定原理是什麼：
Vue.js是採用數據劫持結合發佈者-訂閱者模式的方法，通過Object.definePropety()來劫持各個屬性的setter，getter，在數據變動時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：
第一步：需要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化；
第二步：compile解析模板指令，將模板中的變量替換成數據，然後初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，更新視圖；
第三步：Watcher訂閱者是Observer和Compile之間通信的橋樑，主要做的事情是:在自身實例化時往屬性訂閱器(dep)裏面添加自己
- 自身必須有一個update()方法
- 待屬性變動dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。
## 指令Keep-alive的作用含義： ##
在vue-router寫着keep-alive，這裏的keep-alive的含義是：如果把切換出去的組件保留在內存中，可以保留他的狀態或避免重新渲染；
<component :is='currentView' keep-alive></component>Vue組件之間通信的方法：
- 父組件向子組件傳值：
使用props，props監聽父組件傳遞過來的信息傳遞過來後，可直接引用，就如已經傳遞來數據塞到data裏，使用時直接：
this.$refs.dataList自組件向父組件傳值：
通過自定義事件，父組件可以在使用子組件的地方直接用v-on來監聽子組件觸發的事件，子組件通過$emit（）觸發，父組件監聽。非父子組件關係：
簡單的場景使用bus，複雜的場景使用vuex
<div id="app4">
<display></display>
<increment></increment>
</div>
<script>
var bus = new Vue();
Vue.component('increment', {
template: `<button @click="add">+</button>`,
data: function () {
return {count: 0}
},
methods: {
add: function () {
bus.$emit('inc', this.count+=1)
}
}
});
Vue.component('display', {
template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
data: function () {
return {c: 0}
},
created: function () {
var self=this;
// bus.$on('inc', function (num) {
// self.c = num
// });
bus.$on('inc', (num) =>
this.c = num
);
}
});
vm = new Vue({
el: "#app4",
})
</script>vue響應式原理：
工作原理是當我們把一個普通的JavaScript對象傳給vue實例的data選項的時候，vue會遍歷此對象的所有屬性，並使用Object.definePropert把這些屬性全部轉化爲getter/setter。(Object.definePropert是僅ES5支持，且沒有墊片腳本的特性，因此Vue不支持IE8及更低版本瀏覽器。）用戶看不到getter/setter，但是在內部他們讓Vue追蹤依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的watcher實例對象，它會在組件渲染的過程中把屬性記錄爲依賴，之後當依賴項的setter被調用時，會通知watcher重新計算，從而使它關聯的組件得以更新。
vue-router實現原理：
單頁面應用(SPA)的核心之一是：更新視圖而不重新請求頁面，實現這一點主要是兩種方式：
- Hash通過改變hash值
- History：利用history對像新特新
而在vue-router中，它提供mode參數來決定採用哪一種方式，選擇流程如下：
···默認Hash–>如果瀏覽器支持History新特性改用History–>如果不在瀏覽器環境則使用abstract
基本方法分析：
Hash
- push()
功能: 設置新的路由添加歷史記錄並更新視圖,常用情況是直接點擊切換視圖。
調用流程：
1.$router.push() //顯示調用方法
2.HashHistory.push() //根據hash模式調用，設置hash並添加到瀏覽器歷史記錄(window.loaction.hash=xxx)
3.History.transotionTo() //開始更新
4.History.updataRoute() //更新路由
5.{app._route = route}
6.vm.render() //更新視圖
- replace
功能: 替換當前路由並更新視圖，常用情況是地址欄直接輸入新地址
流程與push基本一致
但流程2變爲替換當前hash （window.location.replace= XXX）不懂此方法的可見: http://www.w3school.com.cn/jsref/met_loc_replace.asp
- 監聽地址欄變化
在setupListeners中監聽hash變化(window.onhashchange)並調用replace
History
1.push
與hash模式類似，只是將window.hash改爲history.pushState
2.replace
與hash模式類似，只是將window.replace改爲history.replaceState
3.監聽地址變化
在HTML5History的構造函數中監聽popState（window.onpopstate）
兩種模式對比
History模式的優點:
1.History模式的地址欄更美觀。。。
2.History模式的pushState、replaceState參數中的新URL可爲同源的任意URL（可爲不同的html文件），而hash只能是同一文檔
3.History模式的pushState、replaceState參數中的state可爲js對象，能攜帶更多數據
4.History模式的pushState、replaceState參數中的title能攜帶字符串數據（當然，部分瀏覽器，例如firefox不支持title，一般title設爲null，不建議使用）
缺點:
對於單頁面應用來說，理想的場景是僅僅在進入應用時加載頁面（例如index.html）,後續的網絡操作靠ajax完成，
而不會重新請求頁面。
但當用戶直接在用戶欄輸入地址時則會重新請求，當地址帶有參數時兩者情況不一樣
Hash 例如: xxx.com/#/id=5 HTTP請求不會包含後面的hash值，所以請求的仍然是 xxx.com,沒有問題
History 例如: xxx.com/id=5 這時請求的便是xxx.com/id=5，如後端沒有配置對應id=XXX的路由處理，則會返回404錯誤。
如何定義vue-router的動態路由？ 怎麼獲取傳過來的動態參數？
在router目錄下的index.js文件中，對path屬性加上/:id。使用router對象的params.id獲取參數。
vue-router是什麼？他有那些組件？
vue-router是vue用來寫路由的一個插件。它的組件有router-link router-view
vue-router有哪幾種導航鉤子？
一共有三種。
全局鉤子：router.beforeEach(to,from,next)
作用：跳轉前進行判斷攔截。
組件內的鉤子；
路由獨享組件；