1. Vue.js介紹

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.什么是 mvvm？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設(shè)計思想。Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來，ViewModel 是一個同步 View 和 Model 的對象。

3.簡述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)的組件得以更新。

4.vue生命周期的理解？

總共分為 8 個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。 創(chuàng)建前/后： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。 載入前/后：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節(jié)點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/后：當(dāng) data 變化時，會觸發(fā) beforeUpdate 和 updated 方法。 銷毀前/后：在執(zhí)行 destroy 方法后，對 data 的改變不會再觸發(fā)周期函數(shù)，說明此時 vue 實例已經(jīng)解除了事件監(jiān)聽以及和 dom 的綁定，但是 dom 結(jié)構(gòu)依然存在。

5.active-class是哪個組件的屬性？

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

6.計算屬性和watch的區(qū)別

在我們運用vue的時候一定少不了用計算屬性computed和watch 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)定義過的變量。

7. prop 驗證，和默認(rèn)值

我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進(jìn)行類型設(shè)定，讓父組件給子組件傳值得時候，更加準(zhǔn)確，prop可以傳一個數(shù)字，一個布爾值，一個數(shù)組，一個對象，以及一個對象的所有屬性。組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發(fā)出警告比如傳一個number類型的數(shù)據(jù)，用defalt設(shè)置它的默認(rèn)值，如果驗證失敗的話就會發(fā)出警告。

8.vue 組件通信

父傳遞子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進(jìn)行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽。
子：this.emit('自定義事件名'，數(shù)據(jù))} 發(fā)送
B：created （）{bus.$on('A發(fā)送過來的自定義事件名'，函數(shù))} 進(jìn)行數(shù)據(jù)接收
?</pre>

9 .v-show和v-if指令的共同點和不同點？

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏 v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果

10. <keep-alive></keep-alive>的作用是什么？

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

11.$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

12.v-for key的作用。

當(dāng)Vue用 v-for 正在更新已渲染過的元素列表是，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序被改變，Vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變，而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。 為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。key屬性的類型只能為 string或者number類型。 key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

13.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）

14.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；

15.vue中的 ref 是什么？

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

16.Vue的路由模式,實現(xiàn)方式？

hash模式 和 history模式 hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀??； 特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用，hash不會重加載頁面。 hash 模式下:僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。 history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。 history 模式:前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面。”

17.$route和$router的區(qū)別？

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

18.vue.js的兩個核心是什么？

數(shù)據(jù)驅(qū)動、組件系統(tǒng)

19.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問題？

1.將公用的JS庫通過script標(biāo)簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度； 2.在配置 路由時，頁面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應(yīng)的js文件； 3.加一個首屏loading圖，提升用戶體驗；

20.DOM 渲染在哪個周期中就已經(jīng)完成？

mounted 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
?</pre>

21.簡述每個周期具體適合哪些場景

beforecreate : 可以在這加個loading事件，在加載實例時觸發(fā) created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用 mounted : 掛載元素，獲取到DOM節(jié)點， updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù) beforeDestroy : 可以做一個確認(rèn)停止事件的確認(rèn)框

22.Vue的雙向數(shù)據(jù)綁定原理是什么？

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

具體步驟：

第一步：需要observe的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:1、在自身實例化時往屬性訂閱器(dep)里面添加自己2、自身必須有一個update()方法3、待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

23.跟keep-alive有關(guān)的生命周期是哪些？描述下這些生命周期

keep-alive的生命周期

1.activated： 頁面第一次進(jìn)入的時候，鉤子觸發(fā)的順序是created->mounted->activated

2.deactivated: 頁面退出的時候會觸發(fā)deactivated，當(dāng)再次前進(jìn)或者后退的時候只觸發(fā)activated

24.在vue事件中傳入$event，使用e.target和e.currentTarget有什么區(qū)別？

event.currentTarget指向事件所綁定的元素，

而event.target始終指向事件發(fā)生時的元素。

25.vue怎么實現(xiàn)強制刷新組件？

強制重新渲染

this.$forceUpdate()

強制重新刷新某組件

//模版上綁定key
<SomeComponent :key="theKey"/>
//選項里綁定data
data(){
return{
theKey:0
}
}
//刷新key達(dá)到刷新組件的目的
theKey++;</pre>

26.使用vue寫一個tab切換

v-for循環(huán)，利用下標(biāo)和v-show顯示
<div id="app"> <ul class="tabs"> <li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="index===nowIndex?'active':''">{{item}}</li> </ul> <div class="divTab" v-show="nowIndex===0">我是tab1</div> <div class="divTab" v-show="nowIndex===1">我是tab2</div> <div class="divTab" v-show="nowIndex===2">我是tab3</div> <div class="divTab" v-show="nowIndex===3">我是tab4</div> </div>

27.怎么訪問到子組件/父組件/根的實例或者子元素？

子組件：this.refs.xxx

父組件：this.$parent

根實例：this.$root

28.說說你對Object.defineProperty的理解

Object.defineProperty定義新屬性或修改原有的屬性；

vue的數(shù)據(jù)雙向綁定的原理就是用的Object.defineProperty這個方法，里面定義了setter和getter方法，通過觀察者模式（發(fā)布訂閱模式）來監(jiān)聽數(shù)據(jù)的變化，從而做相應(yīng)的邏輯處理。

29.為什么data屬性必須聲明為返回一個初始數(shù)據(jù)對應(yīng)的函數(shù)呢？

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

防止組件復(fù)用數(shù)據(jù)，data必須為一個函數(shù)，因為實例可以維護(hù)一份被返回對象的獨立的拷貝

data(){
return {
content: 0
}
}</pre>

30.什么是雙向綁定？原理是什么？

雙向數(shù)據(jù)綁定個人理解就是存在data→view,view→data兩條數(shù)據(jù)流的模式。其實可以簡單的理解為change和bind的結(jié)合。目前雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實現(xiàn)的。修改觸發(fā)set方法賦值，獲取觸發(fā)get方法取值，并通過數(shù)據(jù)劫持發(fā)布信息.

31.說說vue-router完整的導(dǎo)航解析流程是什么？

（1）1.導(dǎo)航被觸發(fā)；2.在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)；3.調(diào)用全局beforeEach守衛(wèi)；4.在復(fù)用組件里調(diào)用beforeRouteUpdate守衛(wèi)；5.調(diào)用路由配置里的beforeEnter守衛(wèi)；6.解析異步路由組件；7.在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)；8.調(diào)用全局beforeResolve守衛(wèi)；9.導(dǎo)航被確認(rèn)；10..調(diào)用全局的afterEach鉤子；11.DOM更新；12.用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)。

（2）1、router-link 【實現(xiàn)跳轉(zhuǎn)最簡單的方法】 <router-link to='需要跳轉(zhuǎn)到的頁面的路徑> 2、this.router.replace{path：‘/’ }

32.通過路由監(jiān)聽頁面滾動行為

1. Vue.js介紹

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.什么是 mvvm？

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設(shè)計思想。Model 層代表數(shù)據(jù)模型，也可以在 Model 中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View 代表 UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成 UI 展現(xiàn)出來，ViewModel 是一個同步 View 和 Model 的對象。

3.簡述Vue的響應(yīng)式原理

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

4.vue生命周期的理解？

總共分為 8 個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。 創(chuàng)建前/后： 在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。 載入前/后：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節(jié)點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。 更新前/后：當(dāng) data 變化時，會觸發(fā) beforeUpdate 和 updated 方法。 銷毀前/后：在執(zhí)行 destroy 方法后，對 data 的改變不會再觸發(fā)周期函數(shù)，說明此時 vue 實例已經(jīng)解除了事件監(jiān)聽以及和 dom 的綁定，但是 dom 結(jié)構(gòu)依然存在。

5.active-class是哪個組件的屬性？

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

6.計算屬性和watch的區(qū)別

在我們運用vue的時候一定少不了用計算屬性computed和watch 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)定義過的變量。

7. prop 驗證，和默認(rèn)值

我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進(jìn)行類型設(shè)定，讓父組件給子組件傳值得時候，更加準(zhǔn)確，prop可以傳一個數(shù)字，一個布爾值，一個數(shù)組，一個對象，以及一個對象的所有屬性。組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發(fā)出警告比如傳一個number類型的數(shù)據(jù)，用defalt設(shè)置它的默認(rèn)值，如果驗證失敗的話就會發(fā)出警告。

props: {
visible: {
default: true,
type: Boolean,
required: true
},
},
?</pre>

8.vue 組件通信

父傳遞子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進(jìn)行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊子組件并在子組件標(biāo)簽上綁定自定義事件的監(jiān)聽。
子：this.emit('自定義事件名'，數(shù)據(jù))} 發(fā)送
B：created （）{bus.$on('A發(fā)送過來的自定義事件名'，函數(shù))} 進(jìn)行數(shù)據(jù)接收
?</pre>

9 .v-show和v-if指令的共同點和不同點？

v-show指令是通過修改元素的displayCSS屬性讓其顯示或者隱藏 v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果

10. <keep-alive></keep-alive>的作用是什么？

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

11.$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

12.v-for key的作用。

當(dāng)Vue用 v-for 正在更新已渲染過的元素列表是，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序被改變，Vue將不是移動DOM元素來匹配數(shù)據(jù)項的改變，而是簡單復(fù)用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。 為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。key屬性的類型只能為 string或者number類型。 key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

13.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）

14.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；

15.vue中的 ref 是什么？

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

16.Vue的路由模式,實現(xiàn)方式？

hash模式 和 history模式 hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀??； 特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用，hash不會重加載頁面。 hash 模式下:僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。 history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進(jìn)行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。 history 模式:前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面?！?/p>

17.$route和$router的區(qū)別？

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

18.vue.js的兩個核心是什么？

數(shù)據(jù)驅(qū)動、組件系統(tǒng)

19.如何優(yōu)化SPA應(yīng)用的首屏加載速度慢的問題？

1.將公用的JS庫通過script標(biāo)簽外部引入，減小 app.bundel 的大小，讓瀏覽器并行下載資源文件，提高下載速度； 2.在配置 路由時，頁面和組件使用懶加載的方式引入，進(jìn)一步縮小 app.bundel 的體積，在調(diào)用某個組件時再加載對應(yīng)的js文件； 3.加一個首屏loading圖，提升用戶體驗；

20.DOM 渲染在哪個周期中就已經(jīng)完成？

mounted 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted

mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}

21.簡述每個周期具體適合哪些場景

beforecreate : 可以在這加個loading事件，在加載實例時觸發(fā) created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用 mounted : 掛載元素，獲取到DOM節(jié)點， updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù) beforeDestroy : 可以做一個確認(rèn)停止事件的確認(rèn)框

22.Vue的雙向數(shù)據(jù)綁定原理是什么？

vue.js 是采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。

具體步驟：

第一步：需要observe的數(shù)據(jù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化

第二步：compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:1、在自身實例化時往屬性訂閱器(dep)里面添加自己2、自身必須有一個update()方法3、待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。

第四步：MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。

23.跟keep-alive有關(guān)的生命周期是哪些？描述下這些生命周期

keep-alive的生命周期

1.activated： 頁面第一次進(jìn)入的時候，鉤子觸發(fā)的順序是created->mounted->activated

2.deactivated: 頁面退出的時候會觸發(fā)deactivated，當(dāng)再次前進(jìn)或者后退的時候只觸發(fā)activated

24.在vue事件中傳入$event，使用e.target和e.currentTarget有什么區(qū)別？

event.currentTarget指向事件所綁定的元素，

而event.target始終指向事件發(fā)生時的元素。

25.vue怎么實現(xiàn)強制刷新組件？

強制重新渲染

this.$forceUpdate()

強制重新刷新某組件

//模版上綁定key
<SomeComponent :key="theKey"/>
//選項里綁定data
data(){
return{
theKey:0
}
}
//刷新key達(dá)到刷新組件的目的
theKey++;</pre>

26.使用vue寫一個tab切換

v-for循環(huán)，利用下標(biāo)和v-show顯示

<div id="app"> <ul class="tabs"> <li class="li-tab" v-for="(item,index) in tabsParam" @click="toggleTabs(index)" :class="index===nowIndex?'active':''">{{item}}</li> </ul> <div class="divTab" v-show="nowIndex===0">我是tab1</div> <div class="divTab" v-show="nowIndex===1">我是tab2</div> <div class="divTab" v-show="nowIndex===2">我是tab3</div> <div class="divTab" v-show="nowIndex===3">我是tab4</div> </div></pre>

27.怎么訪問到子組件/父組件/根的實例或者子元素？

子組件：this.refs.xxx

父組件：this.$parent

根實例：this.$root

28.說說你對Object.defineProperty的理解

Object.defineProperty定義新屬性或修改原有的屬性；

vue的數(shù)據(jù)雙向綁定的原理就是用的Object.defineProperty這個方法，里面定義了setter和getter方法，通過觀察者模式（發(fā)布訂閱模式）來監(jiān)聽數(shù)據(jù)的變化，從而做相應(yīng)的邏輯處理。

29.為什么data屬性必須聲明為返回一個初始數(shù)據(jù)對應(yīng)的函數(shù)呢？

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

防止組件復(fù)用數(shù)據(jù)，data必須為一個函數(shù)，因為實例可以維護(hù)一份被返回對象的獨立的拷貝

data(){
return {
content: 0
}
}</pre>

30.什么是雙向綁定？原理是什么？

雙向數(shù)據(jù)綁定個人理解就是存在data→view,view→data兩條數(shù)據(jù)流的模式。其實可以簡單的理解為change和bind的結(jié)合。目前雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實現(xiàn)的。修改觸發(fā)set方法賦值，獲取觸發(fā)get方法取值，并通過數(shù)據(jù)劫持發(fā)布信息.

31.說說vue-router完整的導(dǎo)航解析流程是什么？

（1）1.導(dǎo)航被觸發(fā)；2.在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)；3.調(diào)用全局beforeEach守衛(wèi)；4.在復(fù)用組件里調(diào)用beforeRouteUpdate守衛(wèi)；5.調(diào)用路由配置里的beforeEnter守衛(wèi)；6.解析異步路由組件；7.在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)；8.調(diào)用全局beforeResolve守衛(wèi)；9.導(dǎo)航被確認(rèn)；10..調(diào)用全局的afterEach鉤子；11.DOM更新；12.用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)。

（2）1、router-link 【實現(xiàn)跳轉(zhuǎn)最簡單的方法】 <router-link to='需要跳轉(zhuǎn)到的頁面的路徑> 2、this.router.replace{path：‘/’ }

32.通過路由監(jiān)聽頁面滾動行為

[圖片上傳失敗...(image-e79d10-1573481606998)]

1.bus 兄弟傳參

//bus.js
import Vue from "vue";
const Bus = new Vue();
export default Bus;

//組件A、組件B中分別引入Bus
import Bus from "bus.js的路徑";

//組件A中綁定事件，來接收組件B傳來的數(shù)據(jù)
//綁定事件
Bus.$on("綁定事件",data=>{
console.log()
})

//組件B中觸發(fā)事件，將數(shù)據(jù)傳遞給組件A
//觸發(fā)綁定事件，進(jìn)行兄弟組件間的參數(shù)傳遞
Bus.$emit("綁定事件",data)；

//組件A中使用
//解除綁定事件，一般在beforeDestory生命周期中使用
Bus.$off("綁定事件")
?</pre>

2.自定義指令

[圖片上傳失敗...(image-635c29-1573481606998)]

技術(shù)選型分析

構(gòu)建工具，MVVM框架，模塊化設(shè)計，自適應(yīng)方案設(shè)計，代碼維護(hù)及復(fù)用性設(shè)計的思考

[圖片上傳失敗...(image-cb0a97-1573481606998)]

1.bus 兄弟傳參

?
//bus.js
import Vue from "vue";
const Bus = new Vue();
export default Bus;

//組件A、組件B中分別引入Bus
import Bus from "bus.js的路徑";

//組件A中綁定事件，來接收組件B傳來的數(shù)據(jù)
//綁定事件
Bus.$on("綁定事件",data=>{
console.log()
})

//組件B中觸發(fā)事件，將數(shù)據(jù)傳遞給組件A
//觸發(fā)綁定事件，進(jìn)行兄弟組件間的參數(shù)傳遞
Bus.$emit("綁定事件",data)；

//組件A中使用
//解除綁定事件，一般在beforeDestory生命周期中使用
Bus.$off("綁定事件")
?</pre>

2.自定義指令

技術(shù)選型分析

構(gòu)建工具，MVVM框架，模塊化設(shè)計，自適應(yīng)方案設(shè)計，代碼維護(hù)及復(fù)用性設(shè)計的思考