1. Vue.js介紹

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

2.什么是 mvvm？

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

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

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

4.vue生命周期的理解痴突？

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

5.active-class是哪個(gè)組件的屬性带族？

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

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

在我們運(yùn)用vue的時(shí)候一定少不了用計(jì)算屬性computed和watch computed計(jì)算屬性是用來聲明式的描述一個(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)聽的是你定義的變量,當(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)定義過的變量。

7. prop 驗(yàn)證响蕴，和默認(rèn)值

我們?cè)诟附M件給子組件傳值得時(shí)候谆焊，為了避免不必要的錯(cuò)誤，可以給prop的值進(jìn)行類型設(shè)定换途，讓父組件給子組件傳值得時(shí)候懊渡，更加準(zhǔn)確，prop可以傳一個(gè)數(shù)字军拟，一個(gè)布爾值剃执，一個(gè)數(shù)組，一個(gè)對(duì)象懈息，以及一個(gè)對(duì)象的所有屬性肾档。組件可以為 props 指定驗(yàn)證要求。如果未指定驗(yàn)證要求辫继，Vue 會(huì)發(fā)出警告比如傳一個(gè)number類型的數(shù)據(jù)怒见，用defalt設(shè)置它的默認(rèn)值，如果驗(yàn)證失敗的話就會(huì)發(fā)出警告姑宽。

8.vue 組件通信

父?jìng)鬟f子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進(jìn)行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊(cè)子組件并在子組件標(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指令的共同點(diǎn)和不同點(diǎn)舵变？

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

10. <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í)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面扛或，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存绵咱，這樣用戶每次返回列表的時(shí)候，都能從緩存中快速渲染熙兔，而不是重新渲染

11.$nextTick是什么悲伶？

vue實(shí)現(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ù)項(xiàng)的順序被改變，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變主穗，而是簡(jiǎn)單復(fù)用此處每個(gè)元素泻拦，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。 為了給Vue一個(gè)提示忽媒，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份争拐，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性晦雨。key屬性的類型只能為 string或者number類型架曹。 key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes闹瞧。如果不使用 key绑雄，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key奥邮，它會(huì)基于 key 的變化重新排列元素順序万牺，并且會(huì)移除 key 不存在的元素。

13.Promise對(duì)象是什么洽腺？

1.Promise是異步編程的一種解決方案脚粟，它是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果蘸朋。從語法上說核无，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息藕坯。Promise 提供統(tǒng)一的 API团南，各種異步操作都可以用同樣的方法進(jìn)行處理。promise對(duì)象是一個(gè)構(gòu)造函數(shù)堕担，用來生成Promise實(shí)例； 2.promise的兩個(gè)特點(diǎn) 對(duì)象狀態(tài)不受外界影響 && 一旦狀態(tài)改變曲聂，就不會(huì)再變霹购，任何時(shí)候都可以得到結(jié)果（pending狀態(tài)-->fulfilled || pending-->rejected）

14.axios的特點(diǎn)有哪些？

1朋腋、axios是一個(gè)基于promise的HTTP庫齐疙，支持promise的所有API膜楷；

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

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

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

15.vue中的 ref 是什么揍障？

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

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

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

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

$route是“路由信息對(duì)象”彼绷，包括path炼绘，params填帽，hash，query许起，fullPath笋熬，matched热某，name等路由信息參數(shù)。 $router是'路由實(shí)例'對(duì)象包括了路由的跳轉(zhuǎn)方法胳螟，鉤子函數(shù)等昔馋。

18.vue.js的兩個(gè)核心是什么？

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

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

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

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

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

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

21.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景

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

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

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

具體步驟：

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

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

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁悦昵，主要做的事情是:1肴茄、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己2、自身必須有一個(gè)update()方法3但指、待屬性變動(dòng)dep.notice()通知時(shí)寡痰，能調(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)入的時(shí)候幅垮，鉤子觸發(fā)的順序是created->mounted->activated

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

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

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

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

25.vue怎么實(shí)現(xiàn)強(qiáng)制刷新組件？

強(qiáng)制重新渲染

this.$forceUpdate()

強(qiáng)制重新刷新某組件

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

26.使用vue寫一個(gè)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.怎么訪問到子組件/父組件/根的實(shí)例或者子元素跨跨？

子組件：this.refs.xxx

父組件：this.$parent

根實(shí)例：this.$root

28.說說你對(duì)Object.defineProperty的理解

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

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

29.為什么data屬性必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)應(yīng)的函數(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è)問題吻商。

防止組件復(fù)用數(shù)據(jù)，data必須為一個(gè)函數(shù)糟红，因?yàn)閷?shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝

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

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

雙向數(shù)據(jù)綁定個(gè)人理解就是存在data→view,view→data兩條數(shù)據(jù)流的模式盆偿。其實(shí)可以簡(jiǎn)單的理解為change和bind的結(jié)合柒爸。目前雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實(shí)現(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)建好的實(shí)例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)旋圆。

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

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

1. Vue.js介紹

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

2.什么是 mvvm？

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

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

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

4.vue生命周期的理解封豪？

總共分為 8 個(gè)階段創(chuàng)建前/后，載入前/后炒瘟，更新前/后吹埠，銷毀前/后。 創(chuàng)建前/后： 在 beforeCreate 階段疮装，vue 實(shí)例的掛載元素 el 還沒有缘琅。 載入前/后：在 beforeMount 階段，vue 實(shí)例的$el 和 data 都初始化了廓推，但還是掛載之前為虛擬的 dom 節(jié)點(diǎn)胯杭，data.message 還未替換。在 mounted 階段受啥，vue 實(shí)例掛載完成做个，data.message 成功渲染鸽心。 更新前/后：當(dāng) data 變化時(shí)，會(huì)觸發(fā) beforeUpdate 和 updated 方法居暖。 銷毀前/后：在執(zhí)行 destroy 方法后顽频，對(duì) data 的改變不會(huì)再觸發(fā)周期函數(shù)，說明此時(shí) vue 實(shí)例已經(jīng)解除了事件監(jiān)聽以及和 dom 的綁定太闺，但是 dom 結(jié)構(gòu)依然存在糯景。

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

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

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

在我們運(yùn)用vue的時(shí)候一定少不了用計(jì)算屬性computed和watch computed計(jì)算屬性是用來聲明式的描述一個(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)聽的是你定義的變量,當(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)定義過的變量履腋。

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

我們?cè)诟附M件給子組件傳值得時(shí)候惭嚣，為了避免不必要的錯(cuò)誤府树，可以給prop的值進(jìn)行類型設(shè)定，讓父組件給子組件傳值得時(shí)候料按，更加準(zhǔn)確奄侠，prop可以傳一個(gè)數(shù)字，一個(gè)布爾值载矿，一個(gè)數(shù)組垄潮，一個(gè)對(duì)象，以及一個(gè)對(duì)象的所有屬性闷盔。組件可以為 props 指定驗(yàn)證要求弯洗。如果未指定驗(yàn)證要求，Vue 會(huì)發(fā)出警告比如傳一個(gè)number類型的數(shù)據(jù)逢勾，用defalt設(shè)置它的默認(rèn)值牡整，如果驗(yàn)證失敗的話就會(huì)發(fā)出警告。

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

8.vue 組件通信

父?jìng)鬟f子
父：自定義屬性名 + 數(shù)據(jù)（要傳遞）=> :value="數(shù)據(jù)"
子：props ["父組件上的自定義屬性名“] =>進(jìn)行數(shù)據(jù)接收)
子傳遞父
在父組件中注冊(cè)子組件并在子組件標(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指令的共同點(diǎn)和不同點(diǎn)？

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

10. <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í)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個(gè)頻率很高的頁面躯嫉，那么就可以對(duì)列表組件使用<keep-alive></keep-alive>進(jìn)行緩存，這樣用戶每次返回列表的時(shí)候杨拐，都能從緩存中快速渲染祈餐，而不是重新渲染

11.$nextTick是什么？

vue實(shí)現(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ù)項(xiàng)的順序被改變，Vue將不是移動(dòng)DOM元素來匹配數(shù)據(jù)項(xiàng)的改變塌碌，而是簡(jiǎn)單復(fù)用此處每個(gè)元素渊胸，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。 為了給Vue一個(gè)提示台妆，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份翎猛，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性接剩。key屬性的類型只能為 string或者number類型切厘。 key 的特殊屬性主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes懊缺。如果不使用 key疫稿，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試修復(fù)/再利用相同類型元素的算法。使用 key鹃两，它會(huì)基于 key 的變化重新排列元素順序遗座，并且會(huì)移除 key 不存在的元素。

13.Promise對(duì)象是什么俊扳？

1.Promise是異步編程的一種解決方案途蒋，它是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果馋记。從語法上說号坡，Promise 是一個(gè)對(duì)象懊烤，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API筋帖，各種異步操作都可以用同樣的方法進(jìn)行處理奸晴。promise對(duì)象是一個(gè)構(gòu)造函數(shù)，用來生成Promise實(shí)例日麸； 2.promise的兩個(gè)特點(diǎn) 對(duì)象狀態(tài)不受外界影響 && 一旦狀態(tài)改變寄啼，就不會(huì)再變，任何時(shí)候都可以得到結(jié)果（pending狀態(tài)-->fulfilled || pending-->rejected）

14.axios的特點(diǎn)有哪些代箭？

1墩划、axios是一個(gè)基于promise的HTTP庫，支持promise的所有API嗡综；

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

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

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

15.vue中的 ref 是什么晨缴？

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

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

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

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

$route是“路由信息對(duì)象”蔑祟，包括path趁耗，params，hash做瞪，query对粪，fullPath右冻，matched装蓬，name等路由信息參數(shù)。 $router是'路由實(shí)例'對(duì)象包括了路由的跳轉(zhuǎn)方法纱扭，鉤子函數(shù)等牍帚。

18.vue.js的兩個(gè)核心是什么？

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

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

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

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

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

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

21.簡(jiǎn)述每個(gè)周期具體適合哪些場(chǎng)景

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

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

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

具體步驟：

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

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

第三步：Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:1惩系、在自身實(shí)例化時(shí)往屬性訂閱器(dep)里面添加自己2位岔、自身必須有一個(gè)update()方法3、待屬性變動(dòng)dep.notice()通知時(shí)堡牡，能調(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)入的時(shí)候巾遭，鉤子觸發(fā)的順序是created->mounted->activated

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

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

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

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

25.vue怎么實(shí)現(xiàn)強(qiáng)制刷新組件骑素？

強(qiáng)制重新渲染

this.$forceUpdate()

強(qiáng)制重新刷新某組件

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

26.使用vue寫一個(gè)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.怎么訪問到子組件/父組件/根的實(shí)例或者子元素？

子組件：this.refs.xxx

父組件：this.$parent

根實(shí)例：this.$root

28.說說你對(duì)Object.defineProperty的理解

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

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

29.為什么data屬性必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)應(yīng)的函數(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è)問題薪韩。

防止組件復(fù)用數(shù)據(jù)确沸，data必須為一個(gè)函數(shù)，因?yàn)閷?shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝

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

30.什么是雙向綁定俘陷？原理是什么罗捎？

雙向數(shù)據(jù)綁定個(gè)人理解就是存在data→view,view→data兩條數(shù)據(jù)流的模式。其實(shí)可以簡(jiǎn)單的理解為change和bind的結(jié)合拉盾。目前雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實(shí)現(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)建好的實(shí)例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)耙旦。

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

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

[圖片上傳失敗...(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è)計(jì)，自適應(yīng)方案設(shè)計(jì)舷暮，代碼維護(hù)及復(fù)用性設(shè)計(jì)的思考

[圖片上傳失敗...(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è)計(jì)机杜，自適應(yīng)方案設(shè)計(jì)帜讲，代碼維護(hù)及復(fù)用性設(shè)計(jì)的思考