轉(zhuǎn)載自：https://blog.csdn.net/Missbelover/article/details/88230837#insertcode
每一個(gè)組件或者實(shí)例都會(huì)經(jīng)歷一個(gè)完整的生命周期扛芽，總共分為三個(gè)階段：初始化阳仔、運(yùn)行中擂煞、銷毀贴谎。
實(shí)例、組件通過new Vue() 創(chuàng)建出來之后會(huì)初始化事件和生命周期撇簿，然后就會(huì)執(zhí)行beforeCreate鉤子函數(shù)崎页，這個(gè)時(shí)候，數(shù)據(jù)還沒有掛載呢厢洞，只是一個(gè)空殼，無法訪問到數(shù)據(jù)和真實(shí)的dom典奉，一般不做操作
掛載數(shù)據(jù)犀变，綁定事件等等，然后執(zhí)行created函數(shù)秋柄，這個(gè)時(shí)候已經(jīng)可以使用到數(shù)據(jù)，也可以更改數(shù)據(jù),在這里更改數(shù)據(jù)不會(huì)觸發(fā)updated函數(shù)蠢正，在這里可以在渲染前倒數(shù)第二次更改數(shù)據(jù)的機(jī)會(huì)骇笔，不會(huì)觸發(fā)其他的鉤子函數(shù)，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始找實(shí)例或者組件對應(yīng)的模板嚣崭，編譯模板為虛擬dom放入到render函數(shù)中準(zhǔn)備渲染笨触，然后執(zhí)行beforeMount鉤子函數(shù)，在這個(gè)函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成雹舀，馬上就要渲染,在這里也可以更改數(shù)據(jù)芦劣，不會(huì)觸發(fā)updated，在這里可以在渲染前最后一次更改數(shù)據(jù)的機(jī)會(huì)说榆，不會(huì)觸發(fā)其他的鉤子函數(shù)虚吟，一般可以在這里做初始數(shù)據(jù)的獲取
接下來開始render，渲染出真實(shí)dom签财，然后執(zhí)行mounted鉤子函數(shù)串慰，此時(shí)，組件已經(jīng)出現(xiàn)在頁面中唱蒸，數(shù)據(jù)邦鲫、真實(shí)dom都已經(jīng)處理好了,事件都已經(jīng)掛載好了，可以在這里操作真實(shí)dom等事情…
當(dāng)組件或?qū)嵗臄?shù)據(jù)更改之后神汹，會(huì)立即執(zhí)行beforeUpdate庆捺，然后vue的虛擬dom機(jī)制會(huì)重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進(jìn)行對比之后重新渲染古今，一般不做什么事兒
當(dāng)更新完成后，執(zhí)行updated滔以，數(shù)據(jù)已經(jīng)更改完成捉腥，dom也重新render完成，可以操作更新后的虛擬dom
當(dāng)經(jīng)過某種途徑調(diào)用$destroy方法后醉者，立即執(zhí)行beforeDestroy但狭，一般在這里做一些善后工作，例如清除計(jì)時(shí)器撬即、清除非指令綁定的事件等等
組件的數(shù)據(jù)綁定立磁、監(jiān)聽…去掉后只剩下dom空殼，這個(gè)時(shí)候剥槐，執(zhí)行destroyed唱歧，在這里做善后工作也可以
2.Vue路由的用法
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的粒竖，適合用于構(gòu)建單頁面應(yīng)用颅崩。
vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑蕊苗，并將路徑和組件映射起來沿后。
傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的朽砰。在vue-router單頁面應(yīng)用中尖滚，則是路徑之間的切換，也就是組件的切換瞧柔。
3.Vue底層的原理
vue前端面試題
1漆弄、active-class是哪個(gè)組件的屬性？嵌套路由怎么定義造锅？
答：vue-router模塊的router-link組件撼唾。
2、怎么定義vue-router的動(dòng)態(tài)路由哥蔚？怎么獲取傳過來的動(dòng)態(tài)參數(shù)倒谷？
答：在router目錄下的index.js文件中，對path屬性加上/:id肺素。 使用router對象的params.id
3恨锚、vue-router有哪幾種導(dǎo)航鉤子？
答：三種倍靡，一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)猴伶，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。第二種：組件內(nèi)的鉤子；第三種：單獨(dú)路由獨(dú)享組件
4他挎、scss是什么筝尾？安裝使用的步驟是？有哪幾大特性办桨？
答：預(yù)處理css筹淫，把css當(dāng)前函數(shù)編寫，定義變量,嵌套呢撞。 先裝css-loader损姜、node-loader、sass-loader等加載器模塊殊霞，在webpack-base.config.js配置文件中加多一個(gè)拓展:extenstion摧阅，再加多一個(gè)模塊：module里面test、loader
4.1绷蹲、scss是什么棒卷？在vue.cli中的安裝使用步驟是？有哪幾大特性祝钢？
答：css的預(yù)編譯比规。
使用步驟：
第一步：用npm 下三個(gè)loader（sass-loader、css-loader拦英、node-sass）
第二步：在build目錄找到webpack.base.config.js蜒什，在那個(gè)extends屬性中加一個(gè)拓展.scss
第三步：還是在同一個(gè)文件，配置一個(gè)module屬性
第四步：然后在組件的style標(biāo)簽加上lang屬性 疤估，例如：lang=”scss”
有哪幾大特性:
1吃谣、可以用變量，例如（$變量名稱=值）做裙；
2、可以用混合器肃晚，例如（）
3锚贱、可以嵌套
5、mint-ui是什么关串？怎么使用拧廊？說出至少三個(gè)組件使用方法？
答：基于vue的前端組件庫晋修。npm安裝吧碾，然后import樣式和js，vue.use（mintUi）全局引入墓卦。在單個(gè)組件局部引入：import {Toast} from ‘mint-ui’倦春。組件一：Toast(‘登錄成功’)；組件二：mint-header；組件三：mint-swiper
6睁本、v-model是什么尿庐？怎么使用？ vue中標(biāo)簽怎么綁定事件呢堰？
答：可以實(shí)現(xiàn)雙向綁定抄瑟，指令（v-class、v-for枉疼、v-if皮假、v-show、v-on）骂维。vue的model層的data屬性惹资。綁定事件：<input @click=doLog() />
7、axios是什么席舍？怎么使用布轿？描述使用它實(shí)現(xiàn)登錄功能的流程？
答：請求后臺(tái)資源的模塊来颤。npm install axios -S裝好汰扭，然后發(fā)送的是跨域，需在配置文件中config/index.js進(jìn)行設(shè)置福铅。后臺(tái)如果是Tp5則定義一個(gè)資源路由萝毛。js中使用import進(jìn)來，然后.get或.post滑黔。返回在.then函數(shù)中如果成功笆包，失敗則是在.catch函數(shù)中
8、axios+tp5進(jìn)階中略荡，調(diào)用axios.post(‘a(chǎn)pi/user’)是進(jìn)行的什么操作庵佣？axios.put(‘a(chǎn)pi/user/8′)呢？
答：跨域汛兜，添加用戶操作巴粪，更新操作。
9粥谬、什么是RESTful API肛根？怎么使用?
答：是一個(gè)api的標(biāo)準(zhǔn)，無狀態(tài)請求漏策。請求的路由地址是固定的派哲，如果是tp5則先路由配置中把資源路由配置好。標(biāo)準(zhǔn)有：.post .put .delete
10掺喻、vuex是什么芭届？怎么使用储矩？哪種功能場景使用它？
答：vue框架中狀態(tài)管理喉脖。在main.js引入store椰苟，注入。新建了一個(gè)目錄store树叽，…… export 舆蝴。場景有：單頁應(yīng)用中，組件之間的狀態(tài)题诵。音樂播放洁仗、登錄狀態(tài)、加入購物車
11性锭、mvvm框架是什么赠潦？它和其它框架（jquery）的區(qū)別是什么？哪些場景適合草冈？
答：一個(gè)model+view+viewModel框架她奥，數(shù)據(jù)模型model，viewModel連接兩個(gè)
區(qū)別：vue數(shù)據(jù)驅(qū)動(dòng)怎棱，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點(diǎn)操作哩俭。
場景：數(shù)據(jù)操作比較多的場景，更加便捷
12拳恋、自定義指令（v-check凡资、v-focus）的方法有哪些？它有哪些鉤子函數(shù)谬运？還有哪些鉤子函數(shù)參數(shù)隙赁？
答：全局定義指令：在vue對象的directive方法里面有兩個(gè)參數(shù)，一個(gè)是指令名稱梆暖，另外一個(gè)是函數(shù)伞访。組件內(nèi)定義指令：directives
鉤子函數(shù)：bind（綁定事件觸發(fā)）、inserted(節(jié)點(diǎn)插入的時(shí)候觸發(fā))轰驳、update（組件內(nèi)相關(guān)更新）
鉤子函數(shù)參數(shù)：el咐扭、binding
13、說出至少4種vue當(dāng)中的指令和它的用法滑废？
答：v-if：判斷是否隱藏；v-for：數(shù)據(jù)循環(huán)出來袜爪；v-bind:class：綁定一個(gè)屬性蠕趁；v-model：實(shí)現(xiàn)雙向綁定
14、vue-router是什么辛馆？它有哪些組件俺陋？
答：vue用來寫路由一個(gè)插件豁延。router-link、router-view
15腊状、導(dǎo)航鉤子有哪些诱咏？它們有哪些參數(shù)？
答：導(dǎo)航鉤子有：a/全局鉤子和組件內(nèi)獨(dú)享的鉤子缴挖。b/beforeRouteEnter袋狞、afterEnter、beforeRouterUpdate映屋、beforeRouteLeave
參數(shù)：有to（去的那個(gè)路由）苟鸯、from（離開的路由）、next（一定要用這個(gè)函數(shù)才能去到下一個(gè)路由棚点，如果不用就攔截）最常用就這幾種
16早处、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ù)對象進(jìn)行遞歸遍歷，包括子屬性對象的屬性甘有，都加上 setter和getter
這樣的話诉儒，給這個(gè)對象的某個(gè)值賦值，就會(huì)觸發(fā)setter亏掀，那么就能監(jiān)聽到了數(shù)據(jù)變化
第二步：compile解析模板指令忱反，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖滤愕，并將每個(gè)指令對應(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變更的雙向綁定效果叁执。
ps：16題答案同樣適合”vue data是怎么實(shí)現(xiàn)的？”此面試題卑硫。
17徒恋、請?jiān)敿?xì)說下你對vue生命周期的理解？
答：總共分為8個(gè)階段創(chuàng)建前/后欢伏，載入前/后入挣，更新前/后，銷毀前/后硝拧。
創(chuàng)建前/后： 在beforeCreated階段径筏，vue實(shí)例的掛載元素el和數(shù)據(jù)對象data都為undefined，還未初始化障陶。在created階段滋恬，vue實(shí)例的數(shù)據(jù)對象data有了， el和數(shù)據(jù)對象data都為undefined抱究，還未初始化恢氯。在created階段，vue實(shí)例的數(shù)據(jù)對象data有了鼓寺，el和數(shù)據(jù)對象data都為undefined勋拟，還未初始化。在created階段妈候，vue實(shí)例的數(shù)據(jù)對象data有了敢靡，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方法后主胧，對data的改變不會(huì)再觸發(fā)周期函數(shù)叭首，說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在
18踪栋、請說下封裝 vue 組件的過程焙格？
答：首先，組件可以提升整個(gè)項(xiàng)目的開發(fā)效率夷都。能夠把頁面抽象成多個(gè)相對獨(dú)立的模塊眷唉，解決了我們傳統(tǒng)項(xiàng)目開發(fā)：效率低、難維護(hù)囤官、復(fù)用性等問題冬阳。
然后，使用Vue.extend方法創(chuàng)建一個(gè)組件党饮，然后使用Vue.component方法注冊組件肝陪。子組件需要數(shù)據(jù)，可以在props中接受定義刑顺。而子組件修改好數(shù)據(jù)后氯窍，想把數(shù)據(jù)傳遞給父組件《滋茫可以采用emit方法狼讨。
19、你是怎么認(rèn)識(shí)vuex的柒竞？
答：vuex可以理解為一種開發(fā)模式或框架政供。比如PHP有thinkphp，java有spring等朽基。
通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動(dòng)組件的變化（好比spring的IOC容器對bean進(jìn)行集中管理）布隔。
應(yīng)用級的狀態(tài)集中放在store中； 改變狀態(tài)的方式是提交mutations踩晶，這是個(gè)同步的事物执泰； 異步邏輯應(yīng)該封裝在action中。
20渡蜻、vue-loader是什么术吝？使用它的用途有哪些？
答：解析.vue文件的一個(gè)加載器茸苇，跟template/js/style轉(zhuǎn)換成js模塊排苍。
用途：js可以寫es6、style樣式可以scss或less学密、template可以加jade等
21淘衙、請說出vue.cli項(xiàng)目中src目錄每個(gè)文件夾和文件的用法？
答：assets文件夾是放靜態(tài)資源腻暮；components是放組件彤守；router是定義路由相關(guān)的配置;view視圖毯侦；app.vue是一個(gè)應(yīng)用主組件；main.js是入口文件
22具垫、vue.cli中怎樣使用自定義的組件侈离？有遇到過哪些問題嗎？
答：第一步：在components目錄新建你的組件文件（smithButton.vue）筝蚕，script一定要export default {
第二步：在需要用的頁面（組件）中導(dǎo)入：import smithButton from ‘…/components/smithButton.vue’
第三步：注入到vue的子組件的components屬性上面,components:{smithButton}
第四步：在template視圖view中使用卦碾，
問題有：smithButton命名，使用的時(shí)候則smith-button起宽。
23洲胖、聊聊你對Vue.js的template編譯的理解二鳄？
答：簡而言之澎现，就是先轉(zhuǎn)化成AST樹悴侵，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點(diǎn)）
詳情步驟：
首先析显，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式）程拭，compile是createCompiler的返回值淤堵，createCompiler是用以創(chuàng)建編譯器的嘀掸。另外compile還負(fù)責(zé)合并option涯竟。
然后赴魁，AST會(huì)經(jīng)過generate（將AST語法樹轉(zhuǎn)化成render funtion字符串的過程）得到render函數(shù)卸奉，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點(diǎn)颖御，里面有（標(biāo)簽名榄棵、子節(jié)點(diǎn)、文本等等）
一潘拱、什么是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的對象。
在MVVM架構(gòu)下川无，View 和 Model 之間并沒有直接的聯(lián)系呛占，而是通過ViewModel進(jìn)行交互，Model 和 ViewModel 之間的交互是雙向的懦趋， 因此View 數(shù)據(jù)的變化會(huì)同步到Model中晾虑，而Model 數(shù)據(jù)的變化也會(huì)立即反應(yīng)到View 上。
ViewModel 通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動(dòng)的帜篇，無需人為干涉糙捺，因此開發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM, 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題笙隙，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來統(tǒng)一管理继找。
二、mvvm和mvc區(qū)別逃沿？它和其它框架（jquery）的區(qū)別是什么？哪些場景適合幻锁？
mvc和mvvm其實(shí)區(qū)別并不大凯亮。都是一種設(shè)計(jì)思想。主要就是mvc中Controller演變成mvvm中的viewModel哄尔。mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低假消，加載速度變慢，影響用戶體驗(yàn)岭接。
區(qū)別：vue數(shù)據(jù)驅(qū)動(dòng)富拗，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點(diǎn)操作。
場景：數(shù)據(jù)操作比較多的場景鸣戴，更加便捷
三啃沪、vue的優(yōu)點(diǎn)是什么？
低耦合窄锅。視圖（View）可以獨(dú)立于Model變化和修改创千，一個(gè)ViewModel可以綁定到不同的"View"上，當(dāng)View變化的時(shí)候Model可以不變入偷，當(dāng)Model變化的時(shí)候View也可以不變追驴。
可重用性。你可以把一些視圖邏輯放在一個(gè)ViewModel里面疏之，讓很多view重用這段視圖邏輯殿雪。
獨(dú)立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel）锋爪，設(shè)計(jì)人員可以專注于頁面設(shè)計(jì)丙曙。
可測試。界面素來是比較難于測試的几缭，而現(xiàn)在測試可以針對ViewModel來寫河泳。
四、 組件之間的傳值年栓？
父組件與子組件傳值
父組件通過標(biāo)簽上面定義傳值
子組件通過props方法接受數(shù)據(jù)
子組件向父組件傳遞數(shù)據(jù)
子組件通過$emit方法傳遞參數(shù)
五拆挥、路由之間跳轉(zhuǎn)
聲明式（標(biāo)簽跳轉(zhuǎn)） 編程式（ js跳轉(zhuǎn)）
六、vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎纸兔？
第一步：在components目錄新建你的組件文件（indexPage.vue）惰瓜，script一定要export default {}
第二步：在需要用的頁面（組件）中導(dǎo)入：import indexPage from ‘@/components/indexPage.vue’
第三步：注入到vue的子組件的components屬性上面,components:{indexPage}
第四步：在template視圖view中使用，
例如有indexPage命名汉矿，使用的時(shí)候則index-page
七崎坊、vue如何實(shí)現(xiàn)按需加載配合webpack設(shè)置
webpack中提供了require.ensure()來實(shí)現(xiàn)按需加載。以前引入路由是通過import 這樣的方式引入洲拇，改為const定義的方式進(jìn)行引入奈揍。
不進(jìn)行頁面按需加載引入方式：import home from ‘…/…/common/home.vue’
進(jìn)行頁面按需加載的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))
八、vuex面試相關(guān)
（1）vuex是什么赋续？怎么使用男翰？哪種功能場景使用它？
vue框架中狀態(tài)管理纽乱。在main.js引入store蛾绎，注入。新建一個(gè)目錄store鸦列，…… export 租冠。場景有：單頁應(yīng)用中，組件之間的狀態(tài)薯嗤。音樂播放顽爹、登錄狀態(tài)、加入購物車
（2）vuex有哪幾種屬性骆姐？
有五種话原，分別是 State、 Getter诲锹、Mutation 繁仁、Action、 Module
vuex的State特性
A归园、Vuex就是一個(gè)倉庫黄虱，倉庫里面放了很多對象。其中state就是數(shù)據(jù)源存放地庸诱，對應(yīng)于一般Vue對象里面的data
B捻浦、state里面存放的數(shù)據(jù)是響應(yīng)式的，Vue組件從store中讀取數(shù)據(jù)桥爽，若是store中的數(shù)據(jù)發(fā)生改變朱灿，依賴這個(gè)數(shù)據(jù)的組件也會(huì)發(fā)生更新
C、它通過mapState把全局的 state 和 getters 映射到當(dāng)前組件的 computed 計(jì)算屬性中
vuex的Getter特性
A钠四、getters 可以對State進(jìn)行計(jì)算操作盗扒，它就是Store的計(jì)算屬性
B跪楞、 雖然在組件內(nèi)也可以做計(jì)算屬性，但是getters 可以在多組件之間復(fù)用
C侣灶、 如果一個(gè)狀態(tài)只在一個(gè)組件內(nèi)使用甸祭，是可以不用getters
vuex的Mutation特性
Action 類似于 mutation，不同在于：Action 提交的是 mutation褥影，而不是直接變更狀態(tài)池户；Action 可以包含任意異步操作。
（3）不用Vuex會(huì)帶來什么問題凡怎？
可維護(hù)性會(huì)下降校焦，想修改數(shù)據(jù)要維護(hù)三個(gè)地方；
可讀性會(huì)下降统倒，因?yàn)橐粋€(gè)組件里的數(shù)據(jù)斟湃，根本就看不出來是從哪來的；
增加耦合檐薯，大量的上傳派發(fā)，會(huì)讓耦合性大大增加注暗，本來Vue用Component就是為了減少耦合坛缕，現(xiàn)在這么用，和組件化的初衷相背捆昏。
九赚楚、 v-show和v-if指令的共同點(diǎn)和不同點(diǎn)
v-show指令是通過修改元素的display的CSS屬性讓其顯示或者隱藏
v-if指令是直接銷毀和重建DOM達(dá)到讓元素顯示和隱藏的效果
十、 如何讓CSS只在當(dāng)前組件中起作用
將當(dāng)前組件的
包裹動(dòng)態(tài)組件時(shí)骗卜，會(huì)緩存不活動(dòng)的組件實(shí)例宠页，主要用于保留組件狀態(tài)或避免重新渲染。
十二寇仓、Vue中引入組件的步驟?
1）采用ES6的import … from …語法或CommonJS的require()方法引入組件
2）對組件進(jìn)行注冊,代碼如下
// 注冊
Vue.component(‘my-component’, {
template: ‘
A custom component!
’
})
3）使用組件
十三举户、指令v-el的作用是什么?
提供一個(gè)在頁面上已存在的 DOM 元素作為 Vue 實(shí)例的掛載目標(biāo).可以是 CSS 選擇器，也可以是一個(gè) HTMLElement 實(shí)例
十四遍烦、在Vue中使用插件的步驟
采用ES6的import … from …語法或CommonJSd的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以傳入一個(gè)選項(xiàng)對象Vue.use(MyPlugin, { someOption: true })
十五俭嘁、請列舉出3個(gè)Vue中常用的生命周期鉤子函數(shù)
created: 實(shí)例已經(jīng)創(chuàng)建完成之后調(diào)用,在這一步,實(shí)例已經(jīng)完成數(shù)據(jù)觀測, 屬性和方法的運(yùn)算, watch/event事件回調(diào). 然而, 掛載階段還沒有開始, $el屬性目前還不可見
mounted: el被新創(chuàng)建的 vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子服猪。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素供填，當(dāng)mounted被調(diào)用時(shí)vm. el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子罢猪。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素近她，當(dāng) mounted 被調(diào)用時(shí) vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子膳帕。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素粘捎，當(dāng)mounted被調(diào)用時(shí)vm.el 也在文檔內(nèi)。
activated: keep-alive組件激活時(shí)調(diào)用
十六、active-class是哪個(gè)組件的屬性晌端？
vue-router模塊的router-link組件捅暴。
十七、怎么定義vue-router的動(dòng)態(tài)路由以及如何獲取傳過來的動(dòng)態(tài)參數(shù)咧纠？
在router目錄下的index.js文件中蓬痒，對path屬性加上/:id。
使用router對象的params.id漆羔。
十八梧奢、vue-router有哪幾種導(dǎo)航鉤子？
三種演痒，一種是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)亲轨，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截。
第二種：組件內(nèi)的鉤子鸟顺；
第三種：單獨(dú)路由獨(dú)享組件
十九惦蚊、生命周期相關(guān)面試題
總共分為8個(gè)階段創(chuàng)建前/后，載入前/后讯嫂，更新前/后蹦锋，銷毀前/后。
創(chuàng)建前/后： 在beforeCreate階段欧芽，vue實(shí)例的掛載元素el和數(shù)據(jù)對象data都為undefined莉掂，還未初始化。在created階段千扔，vue實(shí)例的數(shù)據(jù)對象data有了憎妙，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方法后护昧，對data的改變不會(huì)再觸發(fā)周期函數(shù)魂迄，說明此時(shí)vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在
（1）惋耙、什么是vue生命周期
答： Vue 實(shí)例從創(chuàng)建到銷毀的過程捣炬，就是生命周期熊昌。也就是從開始創(chuàng)建、初始化數(shù)據(jù)湿酸、編譯模板婿屹、掛載Dom→渲染、更新→渲染推溃、卸載等一系列過程昂利，我們稱這是 Vue 的生命周期。
（2）铁坎、vue生命周期的作用是什么
答：它的生命周期中有多個(gè)事件鉤子蜂奸，讓我們在控制整個(gè)Vue實(shí)例的過程時(shí)更容易形成好的邏輯。
（3）硬萍、vue生命周期總共有幾個(gè)階段
答：可以總共分為8個(gè)階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后
（4）扩所、第一次頁面加載會(huì)觸發(fā)哪幾個(gè)鉤子
答：第一次頁面加載時(shí)會(huì)觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個(gè)鉤子
（5）、DOM 渲染在 哪個(gè)周期中就已經(jīng)完成
答：DOM 渲染在 mounted 中就已經(jīng)完成了朴乖。
（6）祖屏、簡單描述每個(gè)周期具體適合哪些場景
答：生命周期鉤子的一些使用方法：
beforecreate : 可以在這加個(gè)loading事件，在加載實(shí)例時(shí)觸發(fā)
created : 初始化完成時(shí)的事件寫在這里买羞，如在這結(jié)束loading事件袁勺，異步請求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點(diǎn)
updated : 如果對數(shù)據(jù)統(tǒng)一處理哩都，在這里寫上相應(yīng)函數(shù)
beforeDestroy : 可以做一個(gè)確認(rèn)停止事件的確認(rèn)框
nextTick : 更新數(shù)據(jù)后立即操作dom
二十、說出至少4種vue當(dāng)中的指令和它的用法婉徘？
v-if：判斷是否隱藏漠嵌；v-for：數(shù)據(jù)循環(huán)；v-bind:class：綁定一個(gè)屬性盖呼；v-model：實(shí)現(xiàn)雙向綁定
二十一儒鹿、vue-loader是什么？使用它的用途有哪些几晤？
解析.vue文件的一個(gè)加載器约炎。
用途：js可以寫es6、style樣式可以scss或less蟹瘾、template可以加jade等
二十二圾浅、scss是什么？在vue.cli中的安裝使用步驟是憾朴？有哪幾大特性狸捕？
答：css的預(yù)編譯。
使用步驟：
第一步：先裝css-loader众雷、node-loader灸拍、sass-loader等加載器模塊
第二步：在build目錄找到webpack.base.config.js做祝，在那個(gè)extends屬性中加一個(gè)拓展.scss
第三步：在同一個(gè)文件，配置一個(gè)module屬性
第四步：然后在組件的style標(biāo)簽加上lang屬性 鸡岗，例如：lang=”scss”
特性:
可以用變量混槐，例如（$變量名稱=值）；
可以用混合器轩性，例如（）
可以嵌套
二十三声登、為什么使用key？
當(dāng)有相同標(biāo)簽名的元素切換時(shí)炮姨，需要通過 key 特性設(shè)置唯一的值來標(biāo)記以讓 Vue 區(qū)分它們捌刮，否則 Vue 為了效率只會(huì)替換相同標(biāo)簽內(nèi)部的內(nèi)容。
二十四舒岸、為什么避免 v-if 和 v-for 用在一起
當(dāng) Vue 處理指令時(shí)绅作，v-for 比 v-if 具有更高的優(yōu)先級，通過v-if 移動(dòng)到容器元素蛾派，不會(huì)再重復(fù)遍歷列表中的每個(gè)值俄认。取而代之的是，我們只檢查它一次洪乍，且不會(huì)在 v-if 為否的時(shí)候運(yùn)算 v-for眯杏。
二十五、VNode是什么壳澳？虛擬 DOM是什么岂贩？
Vue在 頁面上渲染的節(jié)點(diǎn)，及其子節(jié)點(diǎn)稱為“虛擬節(jié)點(diǎn) (Virtual Node)”巷波，簡寫為“VNode”萎津。“虛擬 DOM”是由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼抹镊。
Vue的路由實(shí)現(xiàn)：hash模式 和 history模式
hash模式：在瀏覽器中符號“#”锉屈，#以及#后面的字符稱之為hash，用window.location.hash讀瓤宥颈渊；
特點(diǎn)：hash雖然在URL中，但不被包括在HTTP請求中终佛；用來指導(dǎo)瀏覽器動(dòng)作俊嗽，對服務(wù)端安全無用，hash不會(huì)重加載頁面铃彰。
history模式：history采用HTML5的新特性乌询；且提供了兩個(gè)新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進(jìn)行修改豌研，以及popState事件的監(jiān)聽到狀態(tài)變更妹田。
Vue與Angular以及React的區(qū)別唬党？
（版本在不斷更新，以下的區(qū)別有可能不是很正確鬼佣。我工作中只用到vue驶拱，對angular和react不怎么熟）
1.與AngularJS的區(qū)別
相同點(diǎn)：
都支持指令：內(nèi)置指令和自定義指令；都支持過濾器：內(nèi)置過濾器和自定義過濾器晶衷；都支持雙向數(shù)據(jù)綁定蓝纲；都不支持低端瀏覽器。
不同點(diǎn)：
AngularJS的學(xué)習(xí)成本高晌纫，比如增加了Dependency Injection特性税迷，而Vue.js本身提供的API都比較簡單、直觀锹漱；在性能上箭养，AngularJS依賴對數(shù)據(jù)做臟檢查，所以Watcher越多越慢哥牍；Vue.js使用基于依賴追蹤的觀察并且使用異步隊(duì)列更新毕泌，所有的數(shù)據(jù)都是獨(dú)立觸發(fā)的。
2.與React的區(qū)別
相同點(diǎn)：
React采用特殊的JSX語法嗅辣，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式撼泛，對文件內(nèi)容都有一些約定，兩者都需要編譯后使用澡谭；中心思想相同：一切都是組件愿题，組件實(shí)例之間可以嵌套；都提供合理的鉤子函數(shù)蛙奖，可以讓開發(fā)者定制化地去處理需求潘酗；都不內(nèi)置列數(shù)AJAX，Route等功能到核心包外永，而是以插件的方式加載崎脉；在組件開發(fā)中都支持mixins的特性拧咳。
不同點(diǎn)：
React采用的Virtual DOM會(huì)對渲染出來的結(jié)果做臟檢查伯顶；Vue.js在模板中提供了指令，過濾器等骆膝，可以非常方便祭衩，快捷地操作Virtual DOM。
對keep-alive 的了解阅签？
keep-alive是 Vue 內(nèi)置的一個(gè)組件掐暮，可以使被包含的組件保留狀態(tài)，或避免重新渲染政钟。
在vue 2.1.0 版本之后路克，keep-alive新加入了兩個(gè)屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存樟结，優(yōu)先級大于include) 。
參數(shù)解釋
include - 字符串或正則表達(dá)式精算，只有名稱匹配的組件會(huì)被緩存
exclude - 字符串或正則表達(dá)式瓢宦，任何名稱匹配的組件都不會(huì)被緩存
include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“灰羽，”分隔字符串驮履、正則表達(dá)式、數(shù)組廉嚼。當(dāng)使用正則或者是數(shù)組時(shí)玫镐，要記得使用v-bind 。
一句話就能回答的面試題
1.css只在當(dāng)前組件起作用
答：在style標(biāo)簽中寫入scoped即可 例如：
2.v-if 和 v-show 區(qū)別
答：v-if按照條件是否渲染怠噪，v-show是display的block或none恐似；
3.route和router的區(qū)別
route是“路由信息對象”，包括path舰绘，params蹂喻，hash，query捂寿，fullPath口四，matched，name等路由信息參數(shù)
router是“路由實(shí)例”對象包括了路由的跳轉(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: 提交事件不再重載頁面蹂空；.stop: 阻止單擊事件冒泡；.self: 當(dāng)事件發(fā)生在該元素本身而不是子元素的時(shí)候會(huì)觸發(fā)果录；.capture: 事件偵聽上枕，事件發(fā)生的時(shí)候會(huì)調(diào)用
7.v-on 可以綁定多個(gè)方法嗎？
答：可以
8.vue中 key 值的作用弱恒？
答：當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)辨萍，它默認(rèn)用“就地復(fù)用”策略。如果數(shù)據(jù)項(xiàng)的順序被改變返弹，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序锈玉， 而是簡單復(fù)用此處每個(gè)元素爪飘，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素。key的作用主要是為了高效的更新虛擬DOM拉背。
9.什么是vue的計(jì)算屬性悦施？
答：在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理去团，且可能多次使用的情況下抡诞，盡量采取計(jì)算屬性的方式。好處：①使得數(shù)據(jù)處理結(jié)構(gòu)清晰土陪；②依賴于數(shù)據(jù)昼汗，數(shù)據(jù)更新，處理結(jié)果自動(dòng)更新鬼雀；③計(jì)算屬性內(nèi)部this指向vm實(shí)例顷窒；④在template調(diào)用時(shí)，直接寫計(jì)算屬性名即可源哩；⑤常用的是getter方法鞋吉，獲取數(shù)據(jù)，也可以使用set方法改變數(shù)據(jù)励烦；⑥相較于methods谓着，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算坛掠，但是依賴數(shù)據(jù)不變的時(shí)候computed從緩存中獲取赊锚，不會(huì)重新計(jì)算。
10.vue等單頁面應(yīng)用及其優(yōu)缺點(diǎn)
答：優(yōu)點(diǎn)：Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件屉栓，核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)舷蒲。MVVM、數(shù)據(jù)驅(qū)動(dòng)友多、組件化牲平、輕量、簡潔域滥、高效纵柿、快速、模塊友好骗绕。
缺點(diǎn)：不支持低版本的瀏覽器藐窄，最低只支持到IE9资昧；不利于SEO的優(yōu)化（如果要支持SEO酬土，建議通過服務(wù)端來進(jìn)行渲染組件）；第一次加載首頁耗時(shí)相對長一些格带；不可以使用瀏覽器的導(dǎo)航按鈕需要自行實(shí)現(xiàn)前進(jìn)撤缴、后退刹枉。
作者：今天星期八
來源：CSDN
原文：https://blog.csdn.net/Missbelover/article/details/88230837
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接屈呕！
