vue常見面試題

1.vue優(yōu)點(diǎn)入热？

? ? ? 答：輕量級框架：只關(guān)注視圖層，是一個構(gòu)建數(shù)據(jù)的視圖集合晓铆，大小只有幾十kb勺良；

? ? ? ? ? ? ? 簡單易學(xué)：國人開發(fā)，中文文檔骄噪，不存在語言障礙 尚困，易于理解和學(xué)習(xí)；

? ? ? ? ? ? ? 雙向數(shù)據(jù)綁定：保留了angular的特點(diǎn)链蕊，在數(shù)據(jù)操作方面更為簡單事甜；

? ? ? ? ? ? ? 組件化：保留了react的優(yōu)點(diǎn)忙芒，實(shí)現(xiàn)了html的封裝和重用，在構(gòu)建單頁面應(yīng)用方面有著獨(dú)特的優(yōu)勢讳侨；

? ? ? ? ? ? ? 視圖呵萨，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單跨跨，不需要進(jìn)行邏輯代碼的修改潮峦，只需要操作數(shù)據(jù)就能完成相關(guān)操作；

? ? ? ? ? ? 虛擬DOM：dom操作是非常耗費(fèi)性能的勇婴， 不再使用原生的dom操作節(jié)點(diǎn)忱嘹，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式耕渴；

? ? ? ? ? ? 運(yùn)行速度更快:相比較與react而言拘悦，同樣是操作虛擬dom，就性能而言橱脸，vue存在很大的優(yōu)勢础米。

? 2.vue父組件向子組件傳遞數(shù)據(jù)？

? ? ? ? 答：通過props

3.子組件像父組件傳遞事件添诉？

答：$emit方法

4.v-show和v-if指令的共同點(diǎn)和不同點(diǎn)屁桑？

? ? ? ? 答: 共同點(diǎn)：都能控制元素的顯示和隱藏；

? ? ? ? ? ? ? 不同點(diǎn)：實(shí)現(xiàn)本質(zhì)方法不同栏赴，v-show本質(zhì)就是通過控制css中的display設(shè)置為none蘑斧，控制隱藏，只會編譯一次须眷；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素竖瘾，若初始值為false，就不會編譯了花颗。而且v-if不停的銷毀和創(chuàng)建比較消耗性能捕传。

? ? ? ? ? ? ? 總結(jié)：如果要頻繁切換某節(jié)點(diǎn)，使用v-show(切換開銷比較小捎稚，初始開銷較大)乐横。如果不需要頻繁切換某節(jié)點(diǎn)使用v-if（初始渲染開銷較小，切換開銷比較大）今野。

? 5.如何讓CSS只在當(dāng)前組件中起作用葡公？

答：在組件中的style前面加上scoped

6.<keep-alive></keep-alive>的作用是什么?

答:keep-alive?是 Vue 內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)条霜，或避免重新渲染催什。

7.如何獲取dom?

? ? ? 答：ref="domName" 用法：this.$refs.domName

? 8.說出幾種vue當(dāng)中的指令和它的用法？

? ? ? 答：v-model雙向數(shù)據(jù)綁定宰睡；

? ? ? ? ? ? ? v-for循環(huán)蒲凶；

? ? ? ? ? ? ? v-if v-show 顯示與隱藏气筋；

? ? ? ? ? ? ? v-on事件；v-once: 只綁定一次旋圆。

9. vue-loader是什么宠默？使用它的用途有哪些？

? ? ? ? 答：vue文件的一個加載器灵巧，將template/js/style轉(zhuǎn)換成js模塊搀矫。

用途：js可以寫es6编丘、style樣式可以scss或less奏篙、template可以加jade等

10.為什么使用key?

? ? ? ? 答：需要使用key來給每個節(jié)點(diǎn)做一個唯一標(biāo)識传惠，Diff算法就可以正確的識別此節(jié)點(diǎn)聂宾。

作用主要是為了高效的更新虛擬DOM。

11.axios及安裝?

? ? ? ? 答：請求后臺資源的模塊循狰。npm install axios --save裝好功氨，

js中使用import進(jìn)來祟滴，然后.get或.post麦到。返回在.then函數(shù)中如果成功绿饵，失敗則是在.catch函數(shù)中。

12.v-modal的使用隅要。

答：v-model用于表單數(shù)據(jù)的雙向綁定蝴罪，其實(shí)它就是一個語法糖，這個背后就做了兩個操作：

?? v-bind綁定一個value屬性步清；

?? v-on指令給當(dāng)前元素綁定input事件。

13.請說出vue.cli項(xiàng)目中src目錄每個文件夾和文件的用法虏肾？

? ? ? 答：assets文件夾是放靜態(tài)資源廓啊；components是放組件；router是定義路由相關(guān)的配置; app.vue是一個應(yīng)用主組件封豪；main.js是入口文件谴轮。

14.分別簡述computed和watch的使用場景

? ? ? 答：computed:

　　　　當(dāng)一個屬性受多個屬性影響的時候就需要用到computed

　　　　最典型的栗子： 購物車商品結(jié)算的時候

? ? ? ? ? ? ?watch:

　　　　當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch

　　　　栗子：搜索數(shù)據(jù)

15.v-on可以監(jiān)聽多個方法嗎？

答：可以吹埠，栗子：<input? type="text"? v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">第步。

16.$nextTick的使用

? ? ? 答：當(dāng)你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更新后的值缘琅，

你需要使用$nextTick這個回調(diào)粘都，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功刷袍。

17.vue組件中data為什么必須是一個函數(shù)翩隧？

? ? ? 答：因?yàn)镴avaScript的特性所導(dǎo)致，在component中呻纹，data必須以函數(shù)的形式存在堆生，不可以是對象专缠。

　　組建中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義淑仆，這樣每次復(fù)用組件的時候涝婉，都會返回一份新的data，相當(dāng)于每個組件實(shí)例都有自己私有的數(shù)據(jù)空間蔗怠，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)嘁圈，不會造成混亂。而單純的寫成對象形式蟀淮，就是所有的組件實(shí)例共用了一個data最住，這樣改一個全都改了。

18.漸進(jìn)式框架的理解

? ? ? ? 答：主張最少怠惶；可以根據(jù)不同的需求選擇不同的層級涨缚；

19.Vue中雙向數(shù)據(jù)綁定是如何實(shí)現(xiàn)的？

? ? ? ? ? 答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實(shí)現(xiàn)的策治， 也就是說數(shù)據(jù)和視圖同步脓魏，數(shù)據(jù)發(fā)生變化，視圖跟著變化通惫，視圖變化茂翔，數(shù)據(jù)也隨之發(fā)生改變；

? ? ? ? 核心：關(guān)于VUE雙向數(shù)據(jù)綁定履腋，其核心是 Object.defineProperty()方法珊燎。

? 20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

答：單頁面應(yīng)用（SPA），通俗一點(diǎn)說就是指只有一個主頁面的應(yīng)用遵湖，瀏覽器一開始要加載所有必須的 html, js, css悔政。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。但在寫的時候延旧，還是會分開寫（頁面片段）谋国，然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)迁沫，僅刷新局部資源芦瘾。多應(yīng)用于pc端。

多頁面（MPA）集畅，就是指一個應(yīng)用中有多個頁面近弟，頁面跳轉(zhuǎn)時是整頁刷新

單頁面的優(yōu)點(diǎn)：

用戶體驗(yàn)好，快牡整，內(nèi)容的改變不需要重新加載整個頁面藐吮，基于這一點(diǎn)spa對服務(wù)器壓力較小；前后端分離谣辞；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）迫摔。

單頁面缺點(diǎn)：

不利于seo；導(dǎo)航不可用泥从，如果一定要導(dǎo)航需要自行實(shí)現(xiàn)前進(jìn)句占、后退。（由于是單頁面不能用瀏覽器的前進(jìn)后退功能躯嫉，所以需要自己建立堆棧管理）纱烘；初次加載時耗時多；頁面復(fù)雜度提高很多祈餐。

21.v-if和v-for的優(yōu)先級

? ? ? ? 答：當(dāng) v-if 與 v-for 一起使用時擂啥，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復(fù)運(yùn)行于每個 v-for 循環(huán)中帆阳。所以哺壶，不推薦v-if和v-for同時使用。

如果v-if和v-for一起用的話蜒谤，vue中的的會自動提示v-if應(yīng)該放到外層去山宾。

22.assets和static的區(qū)別

答：相同點(diǎn)：assets和static兩個都是存放靜態(tài)資源文件。項(xiàng)目中所需要的資源文件圖片鳍徽，字體圖標(biāo)资锰，樣式文件等都可以放在這兩個文件下，這是相同點(diǎn)?

不相同點(diǎn)：assets中存放的靜態(tài)資源文件在項(xiàng)目打包時阶祭，也就是運(yùn)行npm run build時會將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳绷杜，所謂打包簡單點(diǎn)可以理解為壓縮體積，代碼格式化胖翰。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務(wù)器接剩。static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程，而是直接進(jìn)入打包好的目錄萨咳，直接上傳至服務(wù)器。因?yàn)楸苊饬藟嚎s直接進(jìn)行上傳疫稿，在打包時會提高一定的效率培他，但是static中的資源文件由于沒有進(jìn)行壓縮等操作，所以文件的體積也就相對于assets中打包后的文件提交較大點(diǎn)遗座。在服務(wù)器中就會占據(jù)更大的空間舀凛。

建議：將項(xiàng)目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程途蒋。減少體積猛遍。而項(xiàng)目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因?yàn)檫@些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理懊烤，直接上傳梯醒。

23.vue常用的修飾符

答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡腌紧；

.prevent：等同于JavaScript中的event.preventDefault()茸习，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件壁肋，而不停止事件的進(jìn)一步傳播）号胚；

.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)浸遗；

.self：只會觸發(fā)自己范圍內(nèi)的事件猫胁，不包含子元素；

.once：只會觸發(fā)一次跛锌。

? 24.vue的兩個核心點(diǎn)

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

數(shù)據(jù)驅(qū)動：ViewModel，保證數(shù)據(jù)和視圖的一致性察净。

組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的驾茴。

25.vue和jQuery的區(qū)別

答：jQuery是使用選擇器（$）選取DOM對象，對其進(jìn)行賦值氢卡、取值锈至、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象译秦，而數(shù)據(jù)和界面是在一起的峡捡。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。?

Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了筑悴。對數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對象们拙，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實(shí)現(xiàn)相互的綁定阁吝。這就是傳說中的MVVM砚婆。

26. 引進(jìn)組件的步驟

? ? ? ? 答: 在template中引入組件；

? ? ? ? ? ? ? 在script的第一行用import引入路徑突勇；

? ? ? ? ? ? ? 用component中寫上組件名稱装盯。

27.delete和Vue.delete刪除數(shù)組的區(qū)別

? ? ? ? 答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值甲馋。

28.SPA首屏加載慢如何解決

? ? ? ? 答：安裝動態(tài)懶加載所需插件埂奈；使用CDN資源。

29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

答：使用location.href='/url'來跳轉(zhuǎn)定躏，簡單方便账磺，但是刷新了頁面芹敌；

? ? ? ? 使用history.pushState('/url')，無刷新頁面垮抗，靜態(tài)跳轉(zhuǎn)氏捞；

? 引進(jìn)router，然后使用router.push('/url')來跳轉(zhuǎn)借宵，使用了diff算法幌衣，實(shí)現(xiàn)了按需加載，減少了dom的消耗壤玫。

其實(shí)使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的豁护，因?yàn)関ue-router就是用了history.pushState()，尤其是在history模式下欲间。

? 30. vue slot

? ? ? 答：簡單來說楚里，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示猎贴、不顯示班缎、在哪個地方顯示、如何顯示她渴，就是slot分發(fā)負(fù)責(zé)的活达址。

31.你們vue項(xiàng)目是打包了一個js文件，一個css文件趁耗，還是有多個文件沉唠？

? ? ? ? 答：根據(jù)vue-cli腳手架規(guī)范，一個js文件苛败，一個CSS文件满葛。

32.Vue里面router-link在電腦上有用，在安卓上沒反應(yīng)怎么解決罢屈？

? ? ? 答：Vue路由在Android機(jī)上有問題嘀韧，babel問題，安裝babel polypill插件解決缠捌。

33.Vue2中注冊在router-link上事件無效解決方法

? ? ? 答： 使用@click.native锄贷。原因：router-link會阻止click事件，.native指直接監(jiān)聽一個原生事件曼月。

34.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題

? ? ? 答: 方法一：只用a標(biāo)簽肃叶，不適用button標(biāo)簽；方法二：使用button標(biāo)簽和Router.navigate方法

?35.axios的特點(diǎn)有哪些

? ? ? 答：從瀏覽器中創(chuàng)建XMLHttpRequests十嘿；

? ? ? ? ? ? ?node.js創(chuàng)建http請求；

? ? ? ? ? ? ?支持Promise API岳锁；

? ? ? ? ? ? ?攔截請求和響應(yīng)绩衷；

? ? ? ? ? ? ?轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；

? ? ? ? ? ? ?取消請求；

? ? ? ? ? ? ?自動換成json咳燕。

axios中的發(fā)送字段的參數(shù)是data跟params兩個勿决，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的，data的作為一個請求體進(jìn)行發(fā)送

params一般適用于get請求招盲，data一般適用于post put 請求低缩。

36.請說下封裝 vue 組件的過程？

? ? ? ? 答：1. 建立組件的模板曹货，先把架子搭起來咆繁，寫寫樣式，考慮好組件的基本邏輯顶籽。(os：思考1小時玩般，碼碼10分鐘，程序猿的準(zhǔn)則礼饱。)

　　2.??準(zhǔn)備好組件的數(shù)據(jù)輸入坏为。即分析好邏輯，定好 props 里面的數(shù)據(jù)镊绪、類型匀伏。

　　3.? 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯蝴韭，做好要暴露出來的方法够颠。

　　4.? 封裝完畢了，直接調(diào)用即可

37.params和query的區(qū)別

? ? ? 答：用法：query要用path來引入万皿，params要用name來引入摧找，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name牢硅。

? ? ? ? url地址顯示：query更加類似于我們ajax中g(shù)et傳參蹬耘，params則類似于post，說的再簡單一點(diǎn)减余，前者在瀏覽器地址欄中顯示參數(shù)综苔，后者則不顯示

? ? ? ? 注意點(diǎn)：query刷新不會丟失query里面的數(shù)據(jù)

params刷新 會 丟失 params里面的數(shù)據(jù)。

38.vue初始化頁面閃動問題

? ? ? 答：使用vue開發(fā)時位岔，在vue初始化之前如筛，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象抒抬，看到類似于{{message}}的字樣杨刨，雖然一般情況下這個時間很短暫，但是我們還是有必要讓解決這個問題的擦剑。

首先：在css里加上[v-cloak] {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display: none;

? ? ? }妖胀。

如果沒有徹底解決問題芥颈，則在根元素加上style="display: none;" :style="{display: 'block'}"

39.vue更新數(shù)組時觸發(fā)視圖更新的方法

? ? ? ? 答:push()；pop()赚抡；shift()爬坑；unshift()；splice()涂臣； sort()盾计；reverse()

40.vue常用的UI組件庫

? ? ? ? 答：Mint UI，element赁遗，VUX

41.vue修改打包后靜態(tài)資源路徑的修改

答：cli2版本：將 config/index.js 里的 assetsPublicPath 的值改為 './' 署辉。

? ? ? ? ? ? ? ? ? ? ? build: {

? ? ? ? ? ? ...

? ? ? ? ? ? assetsPublicPath: './',

? ? ? ? ? ? ? ? ? ...?

? ? ? ? ? ? ? ? }

cli3版本：在根目錄下新建vue.config.js 文件，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）

? ? ? ? module.exports = {

? publicPath: '', // 相對于 HTML 頁面（目錄相同） ? ? ? }

生命周期函數(shù)面試題

? 1.什么是 vue 生命周期吼和？有什么作用涨薪？

答：每個 Vue 實(shí)例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設(shè)置數(shù)據(jù)監(jiān)聽刚夺、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等末捣。同時在這個過程中也會運(yùn)行一些叫做 生命周期鉤子 的函數(shù)侠姑，這給了用戶在不同階段添加自己的代碼的機(jī)會莽红。（ps：生命周期鉤子就是生命周期函數(shù)）例如，如果要通過某些插件操作DOM節(jié)點(diǎn)鬼店，如想在頁面渲染完后彈出廣告窗， 那我們最早可在mounted 中進(jìn)行巍棱。

2.第一次頁面加載會觸發(fā)哪幾個鉤子倒得？

答：beforeCreate， created缠劝， beforeMount帆竹， mounted

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

答：beforeCreate：在new一個vue實(shí)例后侨舆，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件耗啦，其他的東西都還沒創(chuàng)建凿菩。在beforeCreate生命周期執(zhí)行的時候蚀苛，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法

create：data 和 methods都已經(jīng)被初始化好了玷氏，如果要調(diào)用 methods 中的方法堵未，或者操作 data 中的數(shù)據(jù)，最早可以在這個階段中操作

beforeMount：執(zhí)行到這個鉤子的時候盏触，在內(nèi)存中已經(jīng)編譯好了模板了渗蟹，但是還沒有掛載到頁面中，此時赞辩，頁面還是舊的

mounted：執(zhí)行到這個鉤子的時候雌芽，就表示Vue實(shí)例已經(jīng)初始化完成了。此時組件脫離了創(chuàng)建階段辨嗽，進(jìn)入到了運(yùn)行階段世落。 如果我們想要通過插件操作頁面上的DOM節(jié)點(diǎn)，最早可以在和這個階段中進(jìn)行

beforeUpdate： 當(dāng)執(zhí)行這個鉤子時糟需，頁面中的顯示的數(shù)據(jù)還是舊的屉佳，data中的數(shù)據(jù)是更新后的， 頁面還沒有和最新的數(shù)據(jù)保持同步

updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了篮灼，都是最新的

beforeDestory：Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段忘古，這個時候上所有的 data 和 methods ， 指令诅诱， 過濾器 ……都是處于可用狀態(tài)髓堪。還沒有真正被銷毀

destroyed： 這個時候上所有的 data 和 methods ， 指令娘荡， 過濾器 ……都是處于不可用狀態(tài)干旁。組件已經(jīng)被銷毀了。

4.created和mounted的區(qū)別

答：created:在模板渲染成html前調(diào)用炮沐，即通常初始化某些屬性值争群，然后再渲染成視圖。

mounted:在模板渲染成html后調(diào)用大年，通常是初始化頁面完成后换薄，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作。

5.vue獲取數(shù)據(jù)在哪個周期函數(shù)

答：一般 created/beforeMount/mounted 皆可.

比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

? 6.請?jiān)敿?xì)說下你對vue生命周期的理解翔试？

答：總共分為8個階段創(chuàng)建前/后轻要，載入前/后，更新前/后垦缅，銷毀前/后冲泥。

創(chuàng)建前/后： 在beforeCreated階段，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變化時漫试，會觸發(fā)beforeUpdate和updated方法六敬。

銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)驾荣，說明此時vue實(shí)例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定外构，但是dom結(jié)構(gòu)依然存在。

vue路由面試題

1.mvvm 框架是什么播掷？

答：vue是實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架审编，當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖層歧匈。在vue中垒酬，使用了雙向綁定技術(shù)，就是View的變化能實(shí)時讓Model發(fā)生變化件炉，而Model的變化也能實(shí)時更新到View勘究。

2.vue-router 是什么?它有哪些組件

答：vue用來寫路由一個插件。router-link斟冕、router-view

3.active-class 是哪個組件的屬性口糕？

答：vue-router模塊的router-link組件。children數(shù)組來定義子路由

4.怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值磕蛇？

答：在router目錄下的index.js文件中景描，對path屬性加上/:id。? 使用router對象的params.id秀撇。

? 5.vue-router 有哪幾種導(dǎo)航鉤子?

答：三種超棺，

第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截捌袜。

第二種：組件內(nèi)的鉤子

第三種：單獨(dú)路由獨(dú)享組件

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

? ? ? 答：$router是VueRouter的實(shí)例说搅，在script標(biāo)簽中想要導(dǎo)航到不同的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)

? ? $route為當(dāng)前router跳轉(zhuǎn)對象虏等。里面可以獲取當(dāng)前路由的name,path,query,parmas等弄唧。

7.vue-router的兩種模式

答:hash模式：即地址欄 URL 中的 # 符號适肠；

history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的?pushState()?和?replaceState()?方法候引。（需要特定瀏覽器支持）侯养。

? ? 8.vue-router實(shí)現(xiàn)路由懶加載（ 動態(tài)加載路由 ）

? ? 答:三種方式

? ? ? ? 第一種：vue異步組件技術(shù) ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實(shí)現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件澄干。

? ? ? ? 第二種：路由懶加載(使用import)逛揩。

? ? ? ? 第三種：webpack提供的require.ensure()，vue-router配置路由麸俘，使用webpack的require.ensure技術(shù)辩稽，也可以實(shí)現(xiàn)按需加載。這種情況下从媚，多個路由指定相同的chunkName逞泄，會合并打包成一個js文件。

vuex常見面試題

1.vuex是什么拜效？怎么使用喷众？哪種功能場景使用它？

答：vue框架中狀態(tài)管理紧憾。在main.js引入store到千，注入。

新建了一個目錄store.js赴穗，…..?export?憔四。

場景有：單頁應(yīng)用中，組件之間的狀態(tài)望抽。音樂播放加矛、登錄狀態(tài)、加入購物車

? 2.vuex有哪幾種屬性煤篙？

? ? ? 答：有五種斟览，分別是 State、 Getter辑奈、Mutation 苛茂、Action、 Module

state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法鸠窗，同步妓羊！

actions => 像一個裝飾器，包裹mutations稍计，使之可以異步躁绸。

modules => 模塊化Vuex

? 3.Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中？

? ? ? ? 答：如果請求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請求的組件內(nèi)使用净刮，就不需要放入vuex 的state里剥哑。

如果被其他地方復(fù)用，這個很大幾率上是需要的淹父，如果需要株婴，請將請求放入action里，方便復(fù)用暑认。

以上面試題僅供個人學(xué)習(xí)困介，如有錯誤請指正。謝謝蘸际。