1.vue優(yōu)點拾徙？
答：輕量級框架：只關(guān)注視圖層，是一個構(gòu)建數(shù)據(jù)的視圖集合暂衡，大小只有幾十kb狂巢；
簡單易學：國人開發(fā)唧领，中文文檔斩个，不存在語言障礙 受啥，易于理解和學習滚局；
雙向數(shù)據(jù)綁定：保留了angular的特點藤肢，在數(shù)據(jù)操作方面更為簡單嘁圈；
組件化：保留了react的優(yōu)點丑孩，實現(xiàn)了html的封裝和重用温学，在構(gòu)建單頁面應用方面有著獨特的優(yōu)勢仗岖；
視圖轧拄，數(shù)據(jù)檩电，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單俐末，不需要進行邏輯代碼的修改卓箫，只需要操作數(shù)據(jù)就能完成相關(guān)操作烹卒；
虛擬DOM：dom操作是非常耗費性能的旅急， 不再使用原生的dom操作節(jié)點藐吮，極大解放dom操作炎码，但具體操作的還是dom不過是換了另一種方式潦闲；
運行速度更快:相比較與react而言歉闰，同樣是操作虛擬dom和敬，就性能而言昼弟，vue存在很大的優(yōu)勢舱痘。
2.vue父組件向子組件傳遞數(shù)據(jù)塌碌？
答：通過props
3.子組件像父組件傳遞事件台妆？
答：refs.domName
8.說出幾種vue當中的指令和它的用法碑幅？
答：v-model雙向數(shù)據(jù)綁定戴陡；
v-for循環(huán)；
v-if v-show 顯示與隱藏沟涨；
v-on事件恤批；v-once: 只綁定一次。
- vue-loader是什么裹赴？使用它的用途有哪些喜庞？
答：vue文件的一個加載器，將template/js/style轉(zhuǎn)換成js模塊棋返。
用途：js可以寫es6延都、style樣式可以scss或less、template可以加jade等
10.為什么使用key?
答：需要使用key來給每個節(jié)點做一個唯一標識睛竣，Diff算法就可以正確的識別此節(jié)點晰房。
作用主要是為了高效的更新虛擬DOM。
11.axios及安裝?
答：請求后臺資源的模塊射沟。npm install axios --save裝好殊者，
js中使用import進來，然后.get或.post验夯。返回在.then函數(shù)中如果成功猖吴，失敗則是在.catch函數(shù)中。
12.v-modal的使用挥转。
答：v-model用于表單數(shù)據(jù)的雙向綁定海蔽，其實它就是一個語法糖，這個背后就做了兩個操作：
v-bind綁定一個value屬性绑谣；
v-on指令給當前元素綁定input事件党窜。
13.請說出vue.cli項目中src目錄每個文件夾和文件的用法？
答：assets文件夾是放靜態(tài)資源借宵；components是放組件幌衣；router是定義路由相關(guān)的配置; app.vue是一個應用主組件；main.js是入口文件暇务。
14.分別簡述computed和watch的使用場景
答：computed:
當一個屬性受多個屬性影響的時候就需要用到computed
最典型的栗子： 購物車商品結(jié)算的時候
watch:
當一條數(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這個回調(diào)括改，讓修改后的data值渲染更新到dom元素之后在獲取，才能成功家坎。
17.vue組件中data為什么必須是一個函數(shù)嘱能？
答：因為JavaScript的特性所導致吝梅，在component中，data必須以函數(shù)的形式存在惹骂，不可以是對象苏携。
組建中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義对粪，這樣每次復用組件的時候右冻，都會返回一份新的data，相當于每個組件實例都有自己私有的數(shù)據(jù)空間著拭，它們只負責各自維護的數(shù)據(jù)纱扭，不會造成混亂。而單純的寫成對象形式儡遮，就是所有的組件實例共用了一個data乳蛾，這樣改一個全都改了。
18.漸進式框架的理解
答：主張最少鄙币；可以根據(jù)不同的需求選擇不同的層級肃叶；
19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的？
答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的爱榔， 也就是說數(shù)據(jù)和視圖同步被环，數(shù)據(jù)發(fā)生變化，視圖跟著變化详幽，視圖變化筛欢，數(shù)據(jù)也隨之發(fā)生改變；
核心：關(guān)于VUE雙向數(shù)據(jù)綁定唇聘，其核心是 Object.defineProperty()方法版姑。
20.單頁面應用和多頁面應用區(qū)別及優(yōu)缺點
答：單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用迟郎，瀏覽器一開始要加載所有必須的 html, js, css剥险。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。但在寫的時候宪肖，還是會分開寫（頁面片段）表制，然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)控乾，僅刷新局部資源么介。多應用于pc端。
多頁面（MPA）蜕衡，就是指一個應用中有多個頁面壤短，頁面跳轉(zhuǎn)時是整頁刷新
單頁面的優(yōu)點：
用戶體驗好，快，內(nèi)容的改變不需要重新加載整個頁面久脯，基于這一點spa對服務器壓力較心呻省；前后端分離帘撰；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）跑慕。
單頁面缺點：
不利于seo；導航不可用骡和，如果一定要導航需要自行實現(xiàn)前進相赁、后退。（由于是單頁面不能用瀏覽器的前進后退功能慰于，所以需要自己建立堆棧管理）钮科；初次加載時耗時多；頁面復雜度提高很多婆赠。
21.v-if和v-for的優(yōu)先級
答：當 v-if 與 v-for 一起使用時绵脯，v-for 具有比 v-if 更高的優(yōu)先級，這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中休里。所以蛆挫，不推薦v-if和v-for同時使用。
如果v-if和v-for一起用的話妙黍，vue中的的會自動提示v-if應該放到外層去悴侵。
22.assets和static的區(qū)別
答：相同點：assets和static兩個都是存放靜態(tài)資源文件。項目中所需要的資源文件圖片拭嫁，字體圖標可免，樣式文件等都可以放在這兩個文件下，這是相同點
不相同點：assets中存放的靜態(tài)資源文件在項目打包時做粤，也就是運行npm run build時會將assets中放置的靜態(tài)資源文件進行打包上傳浇借，所謂打包簡單點可以理解為壓縮體積，代碼格式化怕品。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務器妇垢。static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄肉康，直接上傳至服務器闯估。因為避免了壓縮直接進行上傳，在打包時會提高一定的效率吼和，但是static中的資源文件由于沒有進行壓縮等操作涨薪，所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務器中就會占據(jù)更大的空間纹安。
建議：將項目中template需要的樣式文件js文件等都可以放置在assets中尤辱，走打包這一流程。減少體積厢岂。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中光督，因為這些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理塔粒，直接上傳结借。
23.vue常用的修飾符
答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡卒茬；
.prevent：等同于JavaScript中的event.preventDefault()船老，防止執(zhí)行預設的行為（如果事件可取消，則取消該事件圃酵，而不停止事件的進一步傳播）柳畔；
.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)郭赐；
.self：只會觸發(fā)自己范圍內(nèi)的事件薪韩，不包含子元素；
.once：只會觸發(fā)一次捌锭。
24.vue的兩個核心點
答：數(shù)據(jù)驅(qū)動俘陷、組件系統(tǒng)
數(shù)據(jù)驅(qū)動：ViewModel，保證數(shù)據(jù)和視圖的一致性观谦。
組件系統(tǒng)：應用類UI可以看作全部是由組件樹構(gòu)成的拉盾。
25.vue和jQuery的區(qū)別
答：jQuery是使用選擇器（("lable").val();,它還是依賴DOM元素的值。
Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了承桥。對數(shù)據(jù)進行操作不再需要引用相應的DOM對象驻粟，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實現(xiàn)相互的綁定凶异。這就是傳說中的MVVM蜀撑。 - 引進組件的步驟
答: 在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)业舍；
引進router，然后使用router.push('/url')來跳轉(zhuǎn)升酣，使用了diff算法舷暮，實現(xiàn)了按需加載，減少了dom的消耗噩茄。
其實使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的下面，因為vue-router就是用了history.pushState()，尤其是在history模式下绩聘。 - vue slot
答：簡單來說诸狭，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示君纫、不顯示驯遇、在哪個地方顯示、如何顯示蓄髓，就是slot分發(fā)負責的活叉庐。
31.你們vue項目是打包了一個js文件，一個css文件会喝，還是有多個文件陡叠？
答：根據(jù)vue-cli腳手架規(guī)范，一個js文件肢执，一個CSS文件枉阵。
32.Vue里面router-link在電腦上有用，在安卓上沒反應怎么解決预茄？
答：Vue路由在Android機上有問題兴溜，babel問題，安裝babel polypill插件解決耻陕。
33.Vue2中注冊在router-link上事件無效解決方法
答： 使用@click.native拙徽。原因：router-link會阻止click事件，.native指直接監(jiān)聽一個原生事件诗宣。
34.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題
答: 方法一：只用a標簽膘怕，不適用button標簽；方法二：使用button標簽和Router.navigate方法
35.axios的特點有哪些
答：從瀏覽器中創(chuàng)建XMLHttpRequests召庞；
node.js創(chuàng)建http請求岛心；
支持Promise API来破；
攔截請求和響應；
轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù)忘古；
取消請求讳癌；
自動換成json。
axios中的發(fā)送字段的參數(shù)是data跟params兩個存皂，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的，data的作為一個請求體進行發(fā)送
params一般適用于get請求逢艘，data一般適用于post put 請求旦袋。
36.請說下封裝 vue 組件的過程？
答：1. 建立組件的模板它改，先把架子搭起來疤孕，寫寫樣式，考慮好組件的基本邏輯央拖。(os：思考1小時祭阀，碼碼10分鐘，程序猿的準則鲜戒。)
2. 準備好組件的數(shù)據(jù)輸入专控。即分析好邏輯，定好 props 里面的數(shù)據(jù)遏餐、類型伦腐。
3. 準備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯失都，做好要暴露出來的方法柏蘑。
4. 封裝完畢了，直接調(diào)用即可
37.params和query的區(qū)別
答：用法：query要用path來引入粹庞，params要用name來引入咳焚，接收參數(shù)都是類似的，分別是this.route.params.name庞溜。
url地址顯示：query更加類似于我們ajax中g(shù)et傳參革半，params則類似于post，說的再簡單一點流码，前者在瀏覽器地址欄中顯示參數(shù)督惰，后者則不顯示
注意點：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 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽伏伯、編譯模板橘洞、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)说搅，這給了用戶在不同階段添加自己的代碼的機會震檩。（ps：生命周期鉤子就是生命周期函數(shù)）例如，如果要通過某些插件操作DOM節(jié)點蜓堕，如想在頁面渲染完后彈出廣告窗抛虏， 那我們最早可在mounted 中進行。
2.第一次頁面加載會觸發(fā)哪幾個鉤子套才？
答：beforeCreate迂猴， created， beforeMount背伴， mounted
3.簡述每個周期具體適合哪些場景
答：beforeCreate：在new一個vue實例后沸毁，只有一些默認的生命周期鉤子和默認事件，其他的東西都還沒創(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實例已經(jīng)初始化完成了嘲碧。此時組件脫離了創(chuàng)建階段，進入到了運行階段父阻。 如果我們想要通過插件操作頁面上的DOM節(jié)點愈涩，最早可以在和這個階段中進行
beforeUpdate： 當執(zhí)行這個鉤子時，頁面中的顯示的數(shù)據(jù)還是舊的加矛，data中的數(shù)據(jù)是更新后的履婉， 頁面還沒有和最新的數(shù)據(jù)保持同步
updated：頁面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的
beforeDestory：Vue實例從運行階段進入到了銷毀階段荒椭，這個時候上所有的 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é)點進行一些需要的操作。
5.vue獲取數(shù)據(jù)在哪個周期函數(shù)
答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.
6.請詳細說下你對vue生命周期的理解茧球？
答：總共分為8個階段創(chuàng)建前/后庭瑰，載入前/后，更新前/后抢埋，銷毀前/后弹灭。
創(chuàng)建前/后： 在beforeCreated階段，vue實例的掛載元素el還沒有捡鱼。
載入前/后：在beforeMount階段，vue實例的route 和
router是VueRouter的實例堡距，在script標簽中想要導航到不同的URL,使用
router.to(-1)
$route為當前router跳轉(zhuǎn)對象。里面可以獲取當前路由的name,path,query,parmas等羽戒。
7.vue-router的兩種模式
答:hash模式：即地址欄 URL 中的 # 符號缤沦；
history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法易稠。（需要特定瀏覽器支持）缸废。
8.vue-router實現(xiàn)路由懶加載（ 動態(tài)加載路由 ）
答:三種方式
第一種：vue異步組件技術(shù) ==== 異步加載，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件。
第二種：路由懶加載(使用import)企量。
第三種：webpack提供的require.ensure()测萎，vue-router配置路由，使用webpack的require.ensure技術(shù)届巩，也可以實現(xiàn)按需加載硅瞧。這種情況下，多個路由指定相同的chunkName恕汇，會合并打包成一個js文件腕唧。
vuex常見面試題
1.vuex是什么？怎么使用瘾英？哪種功能場景使用它枣接？
答：vue框架中狀態(tài)管理。在main.js引入store缺谴，注入但惶。
新建了一個目錄store.js，….. export 湿蛔。
場景有：單頁應用中膀曾，組件之間的狀態(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請求代碼應該寫在組件的methods中還是vuex的actions中？
答：如果請求來的數(shù)據(jù)是不是要被其他組件公用陆蟆，僅僅在請求的組件內(nèi)使用雷厂，就不需要放入vuex 的state里。
