1.什么是vue的生命周期？
Vue實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載DOM->渲染、更新->渲染、卸載等一系列過(guò)程，我們稱這是Vue的生命周期。
2.vue生命周期的作用是什么？
它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯。
3.Vue生命周期總共有幾個(gè)階段？
它可以總共分為8個(gè)階段：創(chuàng)建前/后,載入前/后，更新前/后，銷毀前/銷毀后
4.第一次頁(yè)面加載會(huì)觸發(fā)那幾個(gè)鉤子？
第一次頁(yè)面加載時(shí)會(huì)觸發(fā)beforeCreate,created,beforeMount,mounted
5.DOM渲染在哪個(gè)周期中就已經(jīng)完成？
DOM渲染在mounted中就已經(jīng)完成了
6.生命周期鉤子的一些使用方法：
1.beforecreate:可以在加個(gè)loading事件，在加載實(shí)例是觸發(fā)2.created:初始化完成時(shí)的事件寫在這里，如在這結(jié)束loading事件，異步請(qǐng)求也適宜在這里調(diào)用3.mounted:掛載元素，獲取到dom節(jié)點(diǎn)4.updated:如果對(duì)數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)5.beforeDestroy:可以一個(gè)確認(rèn)停止事件的確認(rèn)框6.nextTick:更新數(shù)據(jù)后立即操作dom
7.v-show與v-if的區(qū)別
v-show是css切換，v-if是完整的銷毀和重新創(chuàng)建
使用頻繁切換時(shí)用v-show,運(yùn)行時(shí)較少改變時(shí)用v-if
V-if=’false’v-if是條件渲染，當(dāng)false的時(shí)候不會(huì)渲染
使用v-if的時(shí)候，如果值為false，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成
v-show則是不管值是為true還是false，html元素都會(huì)存在，只是css中的display顯示或隱藏
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來(lái)回切換；而v-if會(huì)控制這個(gè) DOM 節(jié)點(diǎn)的存在與否。當(dāng)我們需要經(jīng)常切換某個(gè)元素的顯示/隱藏時(shí)，使用v-show會(huì)更加節(jié)省性能上的開銷；當(dāng)只需要一次顯示或隱藏時(shí)，使用v-if更加合理。
8.開發(fā)中常用的指令有哪些?
v-model:一般用在表達(dá)輸入，很輕松的實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定
v-html：更新元素的innerHTML
v-show與v-if：條件渲染，注意二者區(qū)別
v-on:click:可以簡(jiǎn)寫為@click,@綁定一個(gè)事件。如果事件觸發(fā)了，就可以指定事件的處理函數(shù)
v-for：基于源數(shù)據(jù)多次渲染元素或模板
v-bind:當(dāng)表達(dá)式的值改變時(shí)，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于DOM語(yǔ)法
v-bind:title=”msg”簡(jiǎn)寫：title="msg"
9.綁定class的數(shù)組用法
1.對(duì)象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”2.數(shù)組方法v-bind:class="[class1,class2]"3.行內(nèi)v-bind:style="{color:color,fontSize:fontSize+'px'}”
10.路由跳轉(zhuǎn)方式
1.router-link標(biāo)簽會(huì)渲染為標(biāo)簽，咋填template中的跳轉(zhuǎn)都是這種；
2.另一種是編輯是導(dǎo)航，也就是通過(guò)js跳轉(zhuǎn)比如router.push('/home')
11.MVVM
M-model，model代表數(shù)據(jù)模型，也可以在model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯
V-view,view代表UI組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化為UI展現(xiàn)出來(lái)
VM-viewmodel,viewmodel監(jiān)聽模型數(shù)據(jù)的改變和控制視圖行為、處理用戶交互，簡(jiǎn)單理解就是一個(gè)同步view和model的對(duì)象，連接model和view
12.computed和watch有什么區(qū)別
computed
computed是計(jì)算屬性，也就是計(jì)算值，它更多用于計(jì)算值的場(chǎng)景
computed具有緩存性，computed的值在getter執(zhí)行后是會(huì)緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時(shí)重新調(diào)用對(duì)應(yīng)的getter來(lái)計(jì)算
computed適用于計(jì)算比較消耗性能的計(jì)算場(chǎng)景
watch
watch更多的是[觀察]的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào)，用于觀察props $emit或者本組件的值，當(dāng)數(shù)據(jù)變化時(shí)來(lái)執(zhí)行回調(diào)進(jìn)行后續(xù)操作
無(wú)緩存性，頁(yè)面重新渲染時(shí)值不變化也會(huì)執(zhí)行
小結(jié)
當(dāng)我們要進(jìn)行數(shù)值計(jì)算，而且依賴于其他數(shù)據(jù)，那么把這個(gè)數(shù)據(jù)設(shè)計(jì)為computed
如果你需要在某個(gè)數(shù)據(jù)變化時(shí)做一些事情，使用watch來(lái)觀察這個(gè)數(shù)據(jù)變化。
13.vue組件的scoped屬性的作用
在style標(biāo)簽上添加scoped屬性，以表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的；
但是也得慎用：樣式不易（可）修改，而很多時(shí)候，我們是需要對(duì)公共組件的樣式做微調(diào)的；
解決辦法：
①：使用混合型的css樣式：（混合使用全局跟本地的樣式） /* 全局樣式 */ /* 本地樣式 */
②：深度作用選擇器（>>>）如果你希望 scoped 樣式中的一個(gè)選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符： .a >>> .b { /* ... */ }
14.vue是漸進(jìn)式的框架的理解：(主張最少,沒有多做職責(zé)之外的事)
Vue的核心的功能，是一個(gè)視圖模板引擎，但這不是說(shuō)Vue就不能成為一個(gè)框架。如下圖所示，這里包含了Vue的所有部件，在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，我們可以通過(guò)添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來(lái)構(gòu)建一個(gè)完整的框架。更重要的是，這些功能相互獨(dú)立，你可以在核心功能的基礎(chǔ)上任意選用其他的部件，不一定要全部整合在一起?？梢钥吹剑f(shuō)的“漸進(jìn)式”，其實(shí)就是Vue的使用方式，同時(shí)也體現(xiàn)了Vue的設(shè)計(jì)的理念?
在我看來(lái)，漸進(jìn)式代表的含義是：主張最少。視圖模板引擎
每個(gè)框架都不可避免會(huì)有自己的一些特點(diǎn)，從而會(huì)對(duì)使用者有一定的要求，這些要求就是主張，主張有強(qiáng)有弱，它的強(qiáng)勢(shì)程度會(huì)影響在業(yè)務(wù)開發(fā)中的使用方式。
比如說(shuō)，Angular，它兩個(gè)版本都是強(qiáng)主張的，如果你用它，必須接受以下東西：
必須使用它的模塊機(jī)制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點(diǎn)每個(gè)視圖框架都有，難以避免）
所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會(huì)帶來(lái)一些困擾。
Vue可能有些方面是不如React，不如Angular，但它是漸進(jìn)的，沒有強(qiáng)主張，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。也可以函數(shù)式，都可以，它只是個(gè)輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。
漸進(jìn)式的含義，我的理解是：沒有多做職責(zé)之外的事。
15.vue.js的兩個(gè)核心是什么(數(shù)據(jù)驅(qū)動(dòng)、組件系統(tǒng)。)
數(shù)據(jù)驅(qū)動(dòng):Object.defineProperty和存儲(chǔ)器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測(cè)機(jī)制,核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性。
組件系統(tǒng):點(diǎn)此查看
16.vue常用修飾符
修飾符分為：一般修飾符，事件修身符，按鍵、系統(tǒng)
①一般修飾符：
.lazy：v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步
<inputv-model.lazy="msg">
.number
<inputv-model.number="age"type="number">
.trim
1.如果要自動(dòng)過(guò)濾用戶輸入的首尾空白字符<inputv-model.trim='trim'>
② 事件修飾符
<av-on:click.stop="doThis"></a><!-- 阻止單擊事件繼續(xù)傳播 --><formv-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重載頁(yè)面 --><av-on:click.stop.prevent="doThat"></a> <!-- 修飾符可以串聯(lián) --><formv-on:submit.prevent></form>? <!-- 只有修飾符 --><divv-on:click.capture="doThis">...</div>? <!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 --><divv-on:click.self="doThat">...</div>? <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --><av-on:click.once="doThis"></a> <!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
③按鍵修飾符
全部的按鍵別名:
.enter.tab.delete(捕獲“刪除”和“退格”鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta
<inputv-on:keyup.enter="submit">或者<input@keyup.enter="submit">
④系統(tǒng)修飾鍵 （可以用如下修飾符來(lái)實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。）
.ctrl.alt.shift.meta
<input@keyup.alt.67="clear">或者<div@click.ctrl="doSomething">Dosomething</div><!-- Ctrl + Click -->
17.v-on可以監(jiān)聽多個(gè)方法嗎？（可以的）
一個(gè)元素綁定多個(gè)事件的兩種寫法，一個(gè)事件綁定多個(gè)函數(shù)的兩種寫法，修飾符的使用。
<astyle="cursor:default"v-on='{click:DoSomething,mouseleave:MouseLeave}'>doSomething</a>
在method方法里面分別寫兩個(gè)時(shí)事件；
<button@click="a(),b()">點(diǎn)我ab</button>
18.vue事件中如何使用event對(duì)象
<button@click="Event($event)">事件對(duì)象</button>
19.比如你想讓一個(gè)dom元素顯示，然后下一步去獲取這個(gè)元素的offsetWidth，最后你獲取到的會(huì)是0。
因?yàn)槟愀淖償?shù)據(jù)把show變成true,元素并不會(huì)立即顯示，理所當(dāng)然也不會(huì)獲取到動(dòng)態(tài)寬度。
正確的做法是先把元素show出來(lái)，在$nextTick去執(zhí)行獲取寬度的操作，不知道這樣說(shuō)會(huì)不會(huì)好理解一點(diǎn)。
openSubmenu(){this.show=true//獲取不到寬度this.$nextTick(()=>//這里才可以 let w = this.$refs.submenu.offsetWidth;})}
20.Vue 組件中 data 為什么必須是函數(shù)
vue組件中data值不能為對(duì)象，因?yàn)閷?duì)象是引用類型，組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用。
如果data值為對(duì)象，將導(dǎo)致多個(gè)實(shí)例共享一個(gè)對(duì)象，其中一個(gè)組件改變data屬性值，其它實(shí)例也會(huì)受到影響。
21.vue中子組件調(diào)用父組件的方法
第一種方法是直接在子組件中通過(guò)this.$parent.event來(lái)調(diào)用父組件的方法
第二種方法是在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽這個(gè)事件就行了。
第三種都可以實(shí)現(xiàn)子組件調(diào)用父組件的方法，
<template><div><button@click="childMethod()">點(diǎn)擊</button></div></template><script>exportdefault{props:{fatherMethod:{type:Function,default:null}},methods:{childMethod(){if(this.fatherMethod){this.fatherMethod();}}}};</script>
22.vue中 keep-alive 組件的作用
keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。
<keep-alive><component><!--該組件將被緩存！--></component></keep-alive>如果只想router-view里面某個(gè)組件被緩存exportdefault[{path:'/',name:'home',component:Home,meta:{keepAlive:true// 需要被緩存}},{path:'/:id',name:'edit',component:Edit,meta:{keepAlive:false// 不需要被緩存}}]<keep-alive><router-viewv-if="$route.meta.keepAlive"><!--這里是會(huì)被緩存的視圖組件，比如Home！--></router-view></keep-alive><router-viewv-if="!$route.meta.keepAlive"><!--這里是不被緩存的視圖組件，比如Edit！--></router-view>
23.vue中如何編寫可復(fù)用的組件？
①創(chuàng)建組件頁(yè)面eg Toast.vue；
②用Vue.extend()擴(kuò)展一個(gè)組件構(gòu)造器,再通過(guò)實(shí)例化組件構(gòu)造器,就可創(chuàng)造出可復(fù)用的組件
③將toast組件掛載到新創(chuàng)建的div上；
④把toast組件的dom添加到body里；
⑤修改優(yōu)化達(dá)到動(dòng)態(tài)控制頁(yè)面顯示文字跟顯示時(shí)間；
importVuefrom'vue';importToastfrom'@/components/Toast';//引入組件letToastConstructor=Vue.extend(Toast)// 返回一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”letmyToast=(text,duration)=>{lettoastDom=newToastConstructor({el:document.createElement('div')//將toast組件掛載到新創(chuàng)建的div上})document.body.appendChild(toastDom.$el)//把toast組件的dom添加到body里toastDom.text=text;toastDom.duration=duration;// 在指定 duration 之后讓 toast消失setTimeout(()=>{toastDom.isShow=false;},toastDom.duration);}exportdefaultmyToast;
24.什么是vue生命周期和生命周期鉤子函數(shù)？
beforecreated：在實(shí)例初始化之后，el 和 data 并未初始化（這個(gè)時(shí)期，this變量還不能使用，在data下的數(shù)據(jù)，和methods下的方法，watcher中的事件都不能獲得到；）
created:完成了 data 數(shù)據(jù)的初始化，el沒有（這個(gè)時(shí)候可以操作vue實(shí)例中的數(shù)據(jù)和各種方法，但是還不能對(duì)"dom"節(jié)點(diǎn)進(jìn)行操作；）
beforeMount：完成了 el 和 data 初始化 //這里的el是虛擬的dom；
mounted?：完成掛載，在這發(fā)起后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由鉤子做一些事情（掛載完畢，這時(shí)dom節(jié)點(diǎn)被渲染到文檔內(nèi)，一些需要dom的操作在此時(shí)才能正常進(jìn)行）
beforeUpdate：是指view層數(shù)據(jù)變化前，不是data中的數(shù)據(jù)改變前觸發(fā)；
update：是指view層的數(shù)據(jù)變化之后，
beforeDestory： 你確認(rèn)刪除XX嗎？?
destoryed?：當(dāng)前組件已被刪除，清空相關(guān)內(nèi)容
A、什么是vue生命周期？
Vue 實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過(guò)程，我們稱這是 Vue 的生命周期。
B、vue生命周期的作用是什么？
它的生命周期有多個(gè)事件鉤子,讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程時(shí)更容易形成好的邏輯。
C、vue生命周期總共有幾個(gè)階段？
它可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
D、第一次頁(yè)面加載會(huì)觸發(fā)哪幾個(gè)鉤子？
第一次頁(yè)面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子
E、DOM 渲染在 哪個(gè)周期中就已經(jīng)完成？
DOM 渲染在 mounted 中就已經(jīng)完成了。
F、簡(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)框 nextTick : 更新數(shù)據(jù)后立即操作dom;
25.vue更新數(shù)組時(shí)觸發(fā)視圖更新的方法
Vue.set==========Vue.set(target,key,value)這個(gè)方法主要是用于避開vue不能檢測(cè)屬性被添加的限制Vue.set(array,indexOfItem,newValue)//indexOfItem指的索引this.array.$set(indexOfItem,newValue)Vue.set(obj,keyOfItem,newValue)this.obj.$set(keyOfItem,newValue)Vue.delete這個(gè)方法主要用于避開vue不能檢測(cè)到屬性被刪除；Vue.delete(array,indexOfItem)this.array.$delete(indexOfItem)Vue.delete(obj,keyOfItem)this.obj.$delete(keyOfItem)
26.webpack的編譯原理
webpack的作用
①、依賴管理：方便引用第三方模塊、讓模塊更容易復(fù)用，避免全局注入導(dǎo)致的沖突、避免重復(fù)加載或者加載不需要的模塊。會(huì)一層一層的讀取依賴的模塊，添加不同的入口；同時(shí)，不會(huì)重復(fù)打包依賴的模塊。
②、合并代碼：把各個(gè)分散的模塊集中打包成大文件，減少HTTP的請(qǐng)求鏈接數(shù)，配合UglifyJS（壓縮代碼）可以減少、優(yōu)化代碼的體積。
③、各路插件：統(tǒng)一處理引入的插件，babel編譯ES6文件，TypeScript,eslint 可以檢查編譯期的錯(cuò)誤。
一句話總結(jié)：webpack 的作用就是處理依賴，模塊化，打包壓縮文件，管理插件。
一切皆為模塊，由于webpack只支持js文件，所以需要用loader 轉(zhuǎn)換為webpack支持的模塊，其中plugin 用于擴(kuò)張webpack 的功能，在webpack構(gòu)建生命周期的過(guò)程中，在合適的時(shí)機(jī)做了合適的事情。
webpack怎么工作的過(guò)程
①解析配置參數(shù)，合并從shell(npm install 類似的命令)和webpack.config.js文件的配置信息，輸出最終的配置信息；
②注冊(cè)配置中的插件,讓插件監(jiān)聽webpack構(gòu)建生命周期中的事件節(jié)點(diǎn)，做出對(duì)應(yīng)的反應(yīng)；
③解析配置文件中的entry入口文件，并找出每個(gè)文件依賴的文件，遞歸下去；
④在遞歸每個(gè)文件的過(guò)程中，根據(jù)文件類型和配置文件中的loader找出對(duì)應(yīng)的loader對(duì)文件進(jìn)行轉(zhuǎn)換；
⑤遞歸結(jié)束后得到每個(gè)文件最終的結(jié)果，根據(jù)entry 配置生成代碼chunk(打包之后的名字)；
⑥輸出所以chunk 到文件系統(tǒng)。
27.vue等單頁(yè)面應(yīng)用及其優(yōu)缺點(diǎ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)、后退。
優(yōu)點(diǎn)：
無(wú)刷新體驗(yàn),提升了用戶體驗(yàn)；
前端開發(fā)不再以頁(yè)面為單位，更多地采用組件化的思想，代碼結(jié)構(gòu)和組織方式更加規(guī)范化，便于修改和調(diào)整；
API 共享，同一套后端程序代碼不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端
用戶體驗(yàn)好、快，內(nèi)容的改變不需要重新加載整個(gè)頁(yè)面。
28.什么是vue的計(jì)算屬性computed
計(jì)算屬性是需要復(fù)雜的邏輯，可以用方法method代替
computed:{totalPrice(){return(this.good.price*this.good.count)*this.discount+this.deliver;}}
29.vue-cli提供的幾種腳手架模板
vue-cli 的腳手架項(xiàng)目模板有browserify 和 webpack；
30.組件中傳遞數(shù)據(jù)？
props：exportdefault{props:{message:String//定義傳值的類型<br>},//或者props:["message"]data:{}父組件調(diào)用子組件的方法：父組件this.$refs.yeluosen.childMethod()子組件向父組件傳值并調(diào)用方法$emit組件之間：bus==$emit+$on
31.vue-router實(shí)現(xiàn)路由懶加載（ 動(dòng)態(tài)加載路由 ）
32.vue-router 的導(dǎo)航鉤子,主要用來(lái)作用是攔截導(dǎo)航,讓他完成跳轉(zhuǎn)或取消。
全局的:前置守衛(wèi)、后置鉤子（beforeEach，afterEach）beforeResolve
單個(gè)路由獨(dú)享的:beforeEnter
組件級(jí)的:?beforeRouteEnter（不能獲取組件實(shí)例 this）、beforeRouteUpdate、beforeRouteLeave
這是因?yàn)樵趫?zhí)行路由鉤子函數(shù)beforRouteEnter時(shí)候，組件還沒有被創(chuàng)建出來(lái)；
先執(zhí)行beforRouteEnter，再執(zhí)行組件周期鉤子函數(shù)beforeCreate，可以通過(guò) next 獲取組件的實(shí)例對(duì)象，如：next( (vm)=>{} )，參數(shù)vm就是組件的實(shí)例化對(duì)象。
33.完整的 vue-router 導(dǎo)航解析流程
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ù)。
34.vue-router如何響應(yīng) 路由參數(shù) 的變化？
原來(lái)的組件實(shí)例會(huì)被復(fù)用。這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。你可以簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：
constUser={template:'...',watch:{'$route'(to,from){// 對(duì)路由變化作出響應(yīng)...}}}constUser={template:'...',watch:{'$route'(to,from){// 對(duì)路由變化作出響應(yīng)...}}}
35.vue-router的幾種實(shí)例方法以及參數(shù)傳遞
name傳遞
to來(lái)傳遞
采用url傳參
36.is的用法（用于動(dòng)態(tài)組件且基于 DOM 內(nèi)模板的限制來(lái)工作。）
is用來(lái)動(dòng)態(tài)切換組件，DOM模板解析
<table><tris="my-row"></tr> </table>
37.vuex是什么？怎么使用？哪種功能場(chǎng)景使用它？
是什么：vue框架中狀態(tài)管理:有五種，分別是 State、 Getter、Mutation 、Action、 Module
使用：新建一個(gè)目錄store，
場(chǎng)景：?jiǎn)雾?yè)應(yīng)用中，組件之間的狀態(tài)。音樂播放、登錄狀態(tài)、加入購(gòu)物車
vuex的State特性A、Vuex就是一個(gè)倉(cāng)庫(kù)，倉(cāng)庫(kù)里面放了很多對(duì)象。其中state就是數(shù)據(jù)源存放地，對(duì)應(yīng)于一般Vue對(duì)象里面的dataB、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)，若是store中的數(shù)據(jù)發(fā)生改變，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新C、它通過(guò)mapState把全局的state和getters映射到當(dāng)前組件的computed計(jì)算屬性中vuex的Getter特性A、getters可以對(duì)State進(jìn)行計(jì)算操作，它就是Store的計(jì)算屬性B、雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters可以在多組件之間復(fù)用C、如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用，是可以不用gettersvuex的Mutation特性改變store中state狀態(tài)的唯一方法就是提交mutation，就很類似事件。每個(gè)mutation都有一個(gè)字符串類型的事件類型和一個(gè)回調(diào)函數(shù)，我們需要改變state的值就要在回調(diào)函數(shù)中改變。我們要執(zhí)行這個(gè)回調(diào)函數(shù)，那么我們需要執(zhí)行一個(gè)相應(yīng)的調(diào)用方法：store.commit。Action類似于mutation，不同在于：Action提交的是mutation，而不是直接變更狀態(tài)；Action可以包含任意異步操作，Action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象，因此你可以調(diào)用context.commit提交一個(gè)mutation，或者通過(guò)context.state和context.getters來(lái)獲取state和getters。Action通過(guò)store.dispatch方法觸發(fā)：eg。store.dispatch('increment')vuex的module特性Module其實(shí)只是解決了當(dāng)state中很復(fù)雜臃腫的時(shí)候，module可以將store分割成模塊，每個(gè)模塊中擁有自己的state、mutation、action和getter
