基礎(chǔ)題：

1.css只在當(dāng)前組件起作用答：在style標(biāo)簽中寫(xiě)入scoped即可 例如：<style

scoped></style>

2.v-if 和 v-show 區(qū)別答：簡(jiǎn)單回復(fù)：v-if按照條件是否渲染，v-show是display的block或none闻牡；

詳細(xì)比較：

v-show

是css切換净赴，v-if是完整的銷(xiāo)毀和重新創(chuàng)建。

使用頻繁切換時(shí)用v-show罩润，運(yùn)行時(shí)較少改變時(shí)用v-if

v-if=‘false’ v-if是條件渲染玖翅，當(dāng)false的時(shí)候不會(huì)渲染

3.$route和$router的區(qū)別答：$route是“路由信息對(duì)象”，包括path，params烧栋，hash，query拳球，fullPath审姓，matched，name等路由信息參數(shù)祝峻。而$router是“路由實(shí)例”對(duì)象包括了路由的跳轉(zhuǎn)方法魔吐，鉤子函數(shù)等。

4.vue.js的兩個(gè)核心是什么莱找？答：數(shù)據(jù)驅(qū)動(dòng)酬姆、組件系統(tǒng)

5.vue幾種常用的指令答：v-for、 v-if 奥溺、v-bind辞色、v-on、v-show浮定、v-else

6.vue常用的修飾符相满？答：.prevent:提交事件不再重載頁(yè)面；.stop: 阻止單擊事件冒泡桦卒；.self:當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)立美；.capture: 事件偵聽(tīng)，事件發(fā)生的時(shí)候會(huì)調(diào)用

7.v-on 可以綁定多個(gè)方法嗎方灾？答：可以

8.vue中 key 值的作用建蹄？答：當(dāng)Vue.js 用 v-for 正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)用“就地復(fù)用”策略裕偿。如果數(shù)據(jù)項(xiàng)的順序被改變洞慎，Vue 將不會(huì)移動(dòng) DOM 元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序， 而是簡(jiǎn)單復(fù)用此處每個(gè)元素嘿棘，并且確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素拢蛋。key的作用主要是為了高效的更新虛擬DOM。

9.什么是vue的計(jì)算屬性蔫巩？答：在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)谆棱，在需要對(duì)數(shù)據(jù)進(jìn)行復(fù)雜處理，且可能多次使用的情況下圆仔，盡量采取計(jì)算屬性的方式垃瞧。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰；②依賴(lài)于數(shù)據(jù)坪郭，數(shù)據(jù)更新个从，處理結(jié)果自動(dòng)更新；③計(jì)算屬性內(nèi)部this指向vm實(shí)例；④在template調(diào)用時(shí)嗦锐，直接寫(xiě)計(jì)算屬性名即可嫌松；⑤常用的是getter方法，獲取數(shù)據(jù)奕污，也可以使用set方法改變數(shù)據(jù)萎羔；⑥相較于methods，不管依賴(lài)的數(shù)據(jù)變不變碳默，methods都會(huì)重新計(jì)算贾陷，但是依賴(lài)數(shù)據(jù)不變的時(shí)候computed從緩存中獲取，不會(huì)重新計(jì)算嘱根。

10.vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎn)答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件髓废，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。MVVM该抒、數(shù)據(jù)驅(qū)動(dòng)慌洪、組件化、輕量凑保、簡(jiǎn)潔蒋譬、高效、快速愉适、模塊友好犯助。缺點(diǎn)：不支持低版本的瀏覽器，最低只支持到IE9维咸；不利于SEO的優(yōu)化（如果要支持SEO剂买，建議通過(guò)服務(wù)端來(lái)進(jìn)行渲染組件）；第一次加載首頁(yè)耗時(shí)相對(duì)長(zhǎng)一些癌蓖；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)瞬哼、后退。

11.怎么定義 vue-router 的動(dòng)態(tài)路由? 怎么獲取傳過(guò)來(lái)的值答：在router 目錄下的 index.js 文件中租副，對(duì) path屬性加上 /:id坐慰，使用 router 對(duì)象的 params.id 獲取。

12.watch和computed差異

watch是進(jìn)行數(shù)據(jù)監(jiān)聽(tīng)用僧，然后進(jìn)行相應(yīng)的操作结胀，執(zhí)行方法等conputed和methods的合體使用，比較耗性能责循，與vue性能優(yōu)化相背而馳糟港，盡量減少使用！computed是數(shù)據(jù)改變進(jìn)行相應(yīng)的數(shù)據(jù)變化，由老數(shù)據(jù)迸發(fā)新的數(shù)據(jù)（return返回），會(huì)利用緩存機(jī)制對(duì)數(shù)據(jù)進(jìn)行緩存 ，只有當(dāng) 依賴(lài)數(shù)據(jù)變化的時(shí)候才會(huì)進(jìn)行相應(yīng)的變化

[if !supportLists]13.?[endif]組件中data為什么是函數(shù)

為什么組件中的 data 必須是一個(gè)函數(shù)桑滩，然后 return 一個(gè)對(duì)象剥汤，而 new Vue 實(shí)例里颠放，data 可以直接是一個(gè)對(duì)象？

因?yàn)榻M件是用來(lái)復(fù)用的吭敢，JS 里對(duì)象是引用關(guān)系碰凶，這樣作用域沒(méi)有隔離，而 new Vue 的實(shí)例省有，是不會(huì)被復(fù)用的痒留，因此不存在引用對(duì)象的問(wèn)題谴麦。

擴(kuò)展題：

1蠢沿、對(duì)于MVVM的理解？

MVVM 是 Model-View-ViewModel 的縮寫(xiě)匾效。

Model

代表數(shù)據(jù)模型舷蟀，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯。

View

代表UI 組件面哼，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來(lái)野宜。

ViewModel

監(jiān)聽(tīng)模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互魔策，簡(jiǎn)單理解就是一個(gè)同步View 和 Model的對(duì)象匈子，連接Model和View。在MVVM架構(gòu)下闯袒，View 和 Model 之間并沒(méi)有直接的聯(lián)系虎敦，而是通過(guò)ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的政敢， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中其徙，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。

ViewModel

通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)喷户，而View 和 Model 之間的同步工作完全是自動(dòng)的唾那，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯褪尝，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題闹获，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。

2河哑、VUE生命周期的幾個(gè)階段

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

created

（創(chuàng)建后） 完成數(shù)據(jù)觀測(cè)昌罩，屬性和方法的運(yùn)算，初始化事件灾馒，$el屬性還沒(méi)有顯示出來(lái)

beforeMount

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

mounted

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

beforeUpdate

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

updated

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

beforeDestroy

（銷(xiāo)毀前） 在實(shí)例銷(xiāo)毀之前調(diào)用。實(shí)例仍然完全可用痰催。

destroyed

（銷(xiāo)毀后） 在實(shí)例銷(xiāo)毀之后調(diào)用兜辞。調(diào)用后，所有的事件監(jiān)聽(tīng)器會(huì)被移除陨囊，所有的子實(shí)例也會(huì)被銷(xiāo)毀弦疮。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

3蜘醋、什么是vue生命周期胁塞？答：Vue 實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期压语。從開(kāi)始創(chuàng)建啸罢、初始化數(shù)據(jù)、編譯模板胎食、掛載Dom→渲染扰才、更新→渲染、銷(xiāo)毀等一系列過(guò)程厕怜，稱(chēng)之為 Vue 的生命周期衩匣。

4蕾总、vue生命周期的作用是什么？答：它的生命周期中有多個(gè)事件鉤子琅捏，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯生百。

5、vue生命周期總共有幾個(gè)階段柄延？答：它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷(xiāo)毀前/銷(xiāo)毀后蚀浆。

6、第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子搜吧？答：會(huì)觸發(fā) 下面這幾個(gè)beforeCreate, created, beforeMount, mounted 市俊。

7、DOM 渲染在 哪個(gè)周期中就已經(jīng)完成滤奈？答：DOM渲染在 mounted 中就已經(jīng)完成了摆昧。

8、VUE實(shí)現(xiàn)數(shù)據(jù)雙向綁定的原理：

vue實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式僵刮，通過(guò)Object.defineProperty（）來(lái)劫持各個(gè)屬性的setter据忘，getter鹦牛，在數(shù)據(jù)變動(dòng)時(shí)發(fā)布消息給訂閱者搞糕，觸發(fā)相應(yīng)監(jiān)聽(tīng)回調(diào)。當(dāng)把一個(gè)普通Javascript 對(duì)象傳給 Vue 實(shí)例來(lái)作為它的data 選項(xiàng)時(shí)曼追，Vue 將遍歷它的屬性窍仰，用Object.defineProperty 將它們轉(zhuǎn)為 getter/setter。用戶看不到 getter/setter礼殊，但是在內(nèi)部它們讓 Vue 追蹤依賴(lài)驹吮，在屬性被訪問(wèn)和修改時(shí)通知變化。

vue的數(shù)據(jù)雙向綁定 將MVVM作為數(shù)據(jù)綁定的入口晶伦，整合Observer碟狞，Compile和Watcher三者，通過(guò)Observer來(lái)監(jiān)聽(tīng)自己的model的數(shù)據(jù)變化婚陪，通過(guò)Compile來(lái)解析編譯模板指令（vue中是用來(lái)解析 {{}}）族沃，最終利用watcher搭起observer和Compile之間的通信橋梁，達(dá)到數(shù)據(jù)變化 —>視圖更新泌参；視圖交互變化（input）—>數(shù)據(jù)model變更雙向綁定效果脆淹。

[if !vml]

[endif]

9、VUE組件間的參數(shù)傳遞

[if !supportLists]1.???[endif]父組件與子組件傳值父組件傳給子組件：子組件通過(guò)props方法接受數(shù)據(jù);

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

2.

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

eventBus

盖溺，就是創(chuàng)建一個(gè)事件中心，相當(dāng)于中轉(zhuǎn)站铣缠，可以用它來(lái)傳遞事件和接收事件烘嘱。項(xiàng)目比較小時(shí)昆禽，用這個(gè)比較合適。（雖然也有不少人推薦直接用VUEX蝇庭，具體來(lái)說(shuō)看需求咯为狸。技術(shù)只是手段，目的達(dá)到才是王道遗契。）

10辐棒、VUE的路由實(shí)現(xiàn)：hash模式和history模式

hash模式：在瀏覽器中符號(hào)“#”，#以及#后面的字符稱(chēng)之為hash牍蜂，用window.location.hash讀妊；特點(diǎn)：hash雖然在URL中鲫竞，但不被包括在HTTP請(qǐng)求中辐怕；用來(lái)指導(dǎo)瀏覽器動(dòng)作，對(duì)服務(wù)端安全無(wú)用从绘，hash不會(huì)重加載頁(yè)面寄疏。

hash

模式下，僅 hash 符號(hào)之前的內(nèi)容會(huì)被包含在請(qǐng)求中僵井，如?http://www.xxx.com陕截，因此對(duì)于后端來(lái)說(shuō)，即使沒(méi)有做到對(duì)路由的全覆蓋批什，也不會(huì)返回 404 錯(cuò)誤农曲。

history模式：history采用HTML5的新特性；且提供了兩個(gè)新方法：pushState（）驻债，replaceState（）可以對(duì)瀏覽器歷史記錄棧進(jìn)行修改乳规，以及popState事件的監(jiān)聽(tīng)到狀態(tài)變更。

history

模式下合呐，前端的 URL 必須和實(shí)際向后端發(fā)起請(qǐng)求的 URL 一致暮的，如?http://www.xxx.com/items/id。后端如果缺少對(duì) /items/id 的路由處理淌实，將返回 404 錯(cuò)誤冻辩。Vue-Router 官網(wǎng)里如此描述：“不過(guò)這種模式要玩好，還需要后臺(tái)配置支持……所以呢翩伪，你要在服務(wù)端增加一個(gè)覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源微猖，則應(yīng)該返回同一個(gè) index.html 頁(yè)面，這個(gè)頁(yè)面就是你 app 依賴(lài)的頁(yè)面缘屹×莅”

11、VUEX是什么轻姿？怎么使用犁珠？哪種功能場(chǎng)景使用它逻炊？

只用來(lái)讀取的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations犁享，這是個(gè)同步的事物余素；異步邏輯應(yīng)該封裝在action中。在main.js引入store炊昆，注入桨吊。新建了一個(gè)目錄store，….. export 凤巨。場(chǎng)景有：?jiǎn)雾?yè)應(yīng)用中视乐，組件之間的狀態(tài)、音樂(lè)播放敢茁、登錄狀態(tài)佑淀、加入購(gòu)物車(chē)

[if !vml]

[endif]

state

Vuex

使用單一狀態(tài)樹(shù),即每個(gè)應(yīng)用將僅僅包含一個(gè)store 實(shí)例，但單一狀態(tài)樹(shù)和模塊化并不沖突彰檬。存放的數(shù)據(jù)狀態(tài)伸刃，不可以直接修改里面的數(shù)據(jù)。

mutations

mutations

定義的方法動(dòng)態(tài)修改Vuex 的 store 中的狀態(tài)或數(shù)據(jù)逢倍。

getters

類(lèi)似vue的計(jì)算屬性捧颅，主要用來(lái)過(guò)濾一些數(shù)據(jù)。

action

actions

可以理解為通過(guò)將mutations里面處里數(shù)據(jù)的方法變成可異步的處理數(shù)據(jù)的方法瓶堕，簡(jiǎn)單的說(shuō)就是異步操作數(shù)據(jù)隘道。view 層通過(guò) store.dispath 來(lái)分發(fā) action症歇。

[if !vml]

[endif]

modules項(xiàng)目特別復(fù)雜的時(shí)候郎笆，可以讓每一個(gè)模塊擁有自己的state、mutation忘晤、action宛蚓、getters,使得結(jié)構(gòu)非常清晰，方便管理设塔。

[if !vml]

[endif]

12凄吏、對(duì)keep-alive的理解

keep-alive是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)闰蛔，或避免重新渲染痕钢。在vue 2.1.0 版本之后，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與exclude(排除的組件不緩存序六，優(yōu)先級(jí)大于include) 任连。

參數(shù)解釋

include -

字符串或正則表達(dá)式，只有名稱(chēng)匹配的組件會(huì)被緩存

exclude -

字符串或正則表達(dá)式例诀，任何名稱(chēng)匹配的組件都不會(huì)被緩存

include

和 exclude 的屬性允許組件有條件地緩存随抠。二者都可以用“裁着，”分隔字符串、正則表達(dá)式拱她、數(shù)組二驰。當(dāng)使用正則或者是數(shù)組時(shí)，要記得使用v-bind 秉沼。

[if !vml]

[endif]

[if !vml]

[endif]

[if !supportLists]13桶雀、[endif]虛擬DOM的優(yōu)缺點(diǎn)？

優(yōu)點(diǎn):

保證性能下限: 虛擬DOM可以經(jīng)過(guò)diff找出最小差異,然后批量進(jìn)行patch,這種操作雖然比不上手動(dòng)優(yōu)化,但是比起粗暴的DOM操作性能要好很多,因此虛擬DOM可以保證性能下限

無(wú)需手動(dòng)操作DOM: 虛擬DOM的diff和patch都是在一次更新中自動(dòng)進(jìn)行的,我們無(wú)需手動(dòng)操作DOM,極大提高開(kāi)發(fā)效率

跨平臺(tái):虛擬DOM本質(zhì)上是JavaScript對(duì)象,而DOM與平臺(tái)強(qiáng)相關(guān),相比之下虛擬DOM可以進(jìn)行更方便地跨平臺(tái)操作,例如服務(wù)器渲染唬复、移動(dòng)端開(kāi)發(fā)等等

缺點(diǎn):

無(wú)法進(jìn)行極致優(yōu)化: 在一些性能要求極高的應(yīng)用中虛擬DOM無(wú)法進(jìn)行針對(duì)性的極致優(yōu)化,比如VScode采用直接手動(dòng)操作DOM的方式進(jìn)行極端的性能優(yōu)化

[if !supportLists]14背犯、[endif]vue的watch的深度使用

深度監(jiān)聽(tīng)watch監(jiān)聽(tīng)屬性的變化，當(dāng)試試對(duì)象等復(fù)雜類(lèi)型的時(shí)候是無(wú)法進(jìn)行監(jiān)聽(tīng)的這個(gè)時(shí)候要添加deep：true

[if !vml]

[endif]

只有當(dāng)監(jiān)聽(tīng)的數(shù)據(jù)發(fā)生不變化的時(shí)候才會(huì)進(jìn)行觸發(fā)盅抚，如何進(jìn)行立即觸發(fā)添加immediate:true

[if !vml]

[endif]

由于watch的監(jiān)聽(tīng)比較消耗性能漠魏，所有有的時(shí)候想要銷(xiāo)毀他

[if !vml]

[endif]

[if !supportLists]15、[endif]vue與react的選擇

相同點(diǎn)：

React

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

React

采用的Virtual DOM會(huì)對(duì)渲染出來(lái)的結(jié)果做臟檢查有巧；Vue.js在模板中提供了指令释漆，過(guò)濾器等，可以非常方便篮迎，快捷地操作Virtual DOM男图。

16、vuex中mutation和action的詳細(xì)區(qū)別

[if !vml]

[endif]

1甜橱、流程順序

“相應(yīng)視圖—>修改State”拆分成兩部分逊笆，視圖觸發(fā)Action，Action再觸發(fā)Mutation岂傲。

2难裆、觸發(fā)方式

mutation的觸發(fā)通過(guò)store.commit來(lái)進(jìn)行

action的觸發(fā)通過(guò)store.dispatch進(jìn)行

3、角色定位

基于流程順序譬胎，二者扮演不同的角色差牛。

Mutation：專(zhuān)注于修改State命锄，理論上是修改State的唯一途徑。

Action：業(yè)務(wù)代碼偏化、異步請(qǐng)求脐恩。

4、限制

角色不同侦讨，二者有不同的限制驶冒。

Mutation：必須同步執(zhí)行。

Action：可以異步韵卤，但不能直接操作State骗污。

[if !supportLists]16、[endif]vue-router中導(dǎo)航守衛(wèi)有哪些

全局前置守衛(wèi)

你可以使用router.beforeEach注冊(cè)一個(gè)全局前置守衛(wèi)：

[if !vml]

[endif]

當(dāng)一個(gè)導(dǎo)航觸發(fā)時(shí)沈条，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用需忿。守衛(wèi)是異步解析執(zhí)行，此時(shí)導(dǎo)航在所有守衛(wèi)resolve完之前一直處于等待中蜡歹。每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

to：Route：即將要進(jìn)入的目標(biāo)路由對(duì)象屋厘。

from：Route：當(dāng)前導(dǎo)航正要離開(kāi)的路由。

next：Function：一定要調(diào)用該方法來(lái)resolve這個(gè)鉤子月而。執(zhí)行效果依賴(lài)next方法的調(diào)用參數(shù)汗洒。

next()：進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了父款，則導(dǎo)航的狀態(tài)就是confirmed(確認(rèn)的)溢谤。

next(false)：中斷當(dāng)前的導(dǎo)航。如果瀏覽器的URL改變了(可能是用戶手動(dòng)或?yàn)g覽器后退按鈕)憨攒，那么URL地址會(huì)重置到from路由對(duì)應(yīng)的地址世杀。

next('/')或者next({path: '/'})：跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷浓恶，然后進(jìn)行一個(gè)新的導(dǎo)航玫坛。你可以向next傳遞任意位置對(duì)象，且允許設(shè)置諸如replace: true包晰、name: 'home'之類(lèi)的選項(xiàng)以及任何用在router-link的to prop或router.push中的選項(xiàng)。

next(error)：如果傳入next的參數(shù)是一個(gè)Error實(shí)例炕吸，則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給router.onError()注冊(cè)過(guò)的回調(diào)伐憾。確保要調(diào)用next方法，否則鉤子就不會(huì)被resolved赫模。

全局解析守衛(wèi)

你可以用router.beforeResolve注冊(cè)一個(gè)全局守衛(wèi)树肃。這和router.beforeEach類(lèi)似，區(qū)別是在導(dǎo)航被確認(rèn)之前(跳轉(zhuǎn)路由之前)瀑罗，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后胸嘴，解析守衛(wèi)就被調(diào)用雏掠。(beforEach調(diào)用之后被調(diào)用)

全局后置鉤子

你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是劣像，這些鉤子不會(huì)接收next函數(shù)也不會(huì)改變導(dǎo)航本身乡话。

[if !vml]

[endif]

路由獨(dú)享的守衛(wèi)

[if !vml]

[endif]

這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。

組件內(nèi)的守衛(wèi)

最后耳奕，你可以在路由組件內(nèi)直接定義一下路由導(dǎo)航守衛(wèi)：

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

[if !vml]

[endif]

[if !supportLists]17绑青、[endif]簡(jiǎn)述vue中diff算法原理

diff算法是一種優(yōu)化手段，將前后兩個(gè)模塊進(jìn)行差異化對(duì)比屋群，修補(bǔ)（更新）差異的過(guò)程叫做patch(打補(bǔ)丁)闸婴，從以下幾點(diǎn)來(lái)理解：

1.當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，vue是怎么更新節(jié)點(diǎn)的芍躏？

要知道渲染真實(shí)DOM的開(kāi)銷(xiāo)是很大的邪乍，比如有時(shí)候我們修改了某個(gè)數(shù)據(jù)，如果直接渲染到真實(shí)dom上會(huì)引起整個(gè)dom樹(shù)的重繪和重排对竣，有沒(méi)有可能我們只更新我們修改的那一小塊dom而不要更新整個(gè)dom呢溺欧？diff算法能夠幫助我們。

我們先根據(jù)真實(shí)DOM生成一顆?virtual DOM?柏肪，當(dāng)?virtual DOM?某個(gè)節(jié)點(diǎn)的數(shù)據(jù)改變后會(huì)生成一個(gè)新的?Vnode?姐刁，然后?Vnode?和?oldVnode?作對(duì)比，發(fā)現(xiàn)有不一樣的地方就直接修改在真實(shí)的DOM上烦味，然后使?oldVnode?的值為?Vnode?聂使。

diff的過(guò)程就是調(diào)用名為?patch?的函數(shù)，比較新舊節(jié)點(diǎn)谬俄，一邊比較一邊給?真實(shí)的DOM?打補(bǔ)丁柏靶。

2.

virtual DOM和真實(shí)DOM的區(qū)別？

virtual DOM是將真實(shí)的 DOM 的數(shù)據(jù)抽取出來(lái)溃论，以對(duì)象的形式模擬樹(shù)形結(jié)構(gòu)屎蜓，diff算法比較的也是virtual DOM

3.

diff的比較方式？

在采取diff算法比較新舊節(jié)點(diǎn)的時(shí)候钥勋，比較只會(huì)在同層級(jí)進(jìn)行, 不會(huì)跨層級(jí)比較炬转。

?