248道面試題帶你玩轉Vue(持續更新)

要招一個會vue的開發者：

• 做爲面試官的你，你還會每次都只是問這些老土的問題嗎？

  • 你對MVVM的理解是什麼？
  • 你知道什麼是雙向綁定嗎？你瞭解它的原理嗎？
  • 說說vue的生命週期有哪些？
  • 組件通信有哪些？
  • 你用過vuex嗎？
  • ...

• 做爲面試者的你，在網上搜索下「vue面試題及答案」，看完後你是否是以爲：

  • 本身掌握了武林祕籍？
  • 能忽悠住面試官了？
  • 我熟練掌握vue了？

記一次印象深入的面試

面試過不少小夥伴（要招會vue的開發者），沒工做經驗的，5年工做經驗的，甚至10多年工做經驗的...讓我印象最深，也以爲最爲經典的一個面試：

• 有一天，來了一位5年前端工做經驗的小夥子，在不少項目中使用過vue的面試者，故事就從這裏開始了：

• （開篇省略N多對話……）

• 我：看你簡歷上說你在項目中有用到過vue對嗎？

• 小夥子：有啊，咱們項目中就有用到過……

• 我：你認爲你對vue的理解到什麼程度？（對自個人認知）

• 小夥子：作過不少項目，基本上都瞭解了，很熟練

• 我：不錯，那我問下你 「vue爲何要求組件模板只能有一個根元素？」

• 小夥子：恩……沒在乎過

• 我：不要緊，那 「你瞭解vue的diff算法嗎？」

• 小夥子：恩……沒用到過

• 我：沒事，那我再問下你，「在.vue文件中style是必須的嗎？那script是必須的嗎？爲何？」

• 小夥子：恩……(此時小夥子有點着急了，說)

• 小夥子：你爲什麼 不按套路提問 呢？你應該這樣問我：MVVM是什麼，生命週期有哪些，雙向綁定的原理啊，我對這些比較熟悉。

• 我：此時的我，被反問給愣住了（難道是我錯了嗎？我是農村來的不懂套路，還好我經歷過風風雨雨，僞裝鎮定下）。

• 我：這樣啊，你給我說下，生命週期的原理是什麼？

• 小夥子：……

• 我：要你本身實現一個雙向綁定的微型框架你該怎麼作呢？

• 小夥子：……

• （繼續省略N多對話……）

• 小夥子走前，跟我說了句：哥，我之後不敢再說我會vue了，回去我要再好好學習vue……

• 後話：估計小夥子出門後，確定會千萬個吐槽：面試造火箭工做擰螺絲

30多位小夥伴傾力貢獻

• 看到網上vue相關的題量都很是少，徹底不能知足你們對知識的渴望。因此我聯繫了30多位真正使用過vue，從各個方面篩選出了248個vue相關的知識點，全方面爲你保駕護航！這些知識點還會持續更新……
• 目前vue相關的知識點收錄量爲全網（全球）第一
• 收錄在了《前端面試每日3+1》的vue面試題

還有疑問？

• 問：這些題有答案嗎？
• 答：有，在你腦中！授人以魚不如授人以漁（只有本身動手去作，去思考纔會變成你的答案，理解背後的原理才能作到遊刃有餘，不要去背，分分鐘露餡！）
• 問：知識點會過時嗎？
• 答：會，但沒這麼快，活到老學到老，框架常常更新，知識點就會持續更新
• 問：這麼多知識點我該怎麼學？
• 答：先挑些你會的，找點成就感，而後再查漏補缺，堅持天天學習

有更好的建議嗎？

• 勤思考
• 多動手
• 善總結

對了打個廣告

• 《前端面試每日3+1》，學習不打烊，充電加油只爲遇到更好的本身，365天無節假日，天天早上5點純手工發佈面試題（死磕本身，愉悅你們）。
• 但願你們在這浮誇的前端圈裏，保持冷靜，堅持天天花20分鐘來學習與思考。
• 在這變幻無窮，類庫層出不窮的前端，建議你們不要等到找工做時，才狂刷題，提倡每日學習！（不忘初心，html、css、javascript纔是基石！）

超多題預警開始……

題目最後更新時間：2019.07.02

vue | vue-cli | vue-router | vuex | ElementUI | ElementUI | mint-ui

若是你以爲這些題太easy了，能夠到github上聯繫做者貢獻你以爲好玩、有趣、有挑戰性的題讓你們來挑戰吧。

vue

• 你知道vue的模板語法用的是哪一個web模板引擎的嗎？說說你對這模板引擎的理解
• 你知道v-model的原理嗎？說說看
• 你有使用過vue開發多語言項目嗎？說說你的作法？
• 在使用計算屬性的時，函數名和data數據源中的數據能夠同名嗎？
• vue中data的屬性能夠和methods中的方法同名嗎？爲何？
• 怎麼給vue定義全局的方法？
• vue2.0再也不支持v-html中使用過濾器了怎麼辦？
• 怎麼解決vue打包後靜態資源圖片失效的問題？
• 怎麼解決vue動態設置img的src不生效的問題？
• 使用vue後怎麼針對搜索引擎作SEO優化？
• 跟keep-alive有關的生命週期是哪些？描述下這些生命週期
• 若是如今讓你從vue/react/angularjs三個中選擇一個，你會選哪一個？說說你的理由
• 你知道vue2.0兼容IE哪一個版本以上嗎？
• 使用vue開發一個todo小應用，談下你的思路
• 你有看過vue推薦的風格指南嗎？列舉出你知道的幾條
• 你是從vue哪一個版本開始用的？你知道1.x和2.x有什麼區別嗎？
• 你知道vue中key的原理嗎？說說你對它的理解
• vue中怎麼重置data？
• vue渲染模板時怎麼保留模板中的HTML註釋呢？
• Vue.observable你有了解過嗎？說說看
• 你知道style加scoped屬性的用途和原理嗎？
• 你期待vue3.0有什麼功能或者改進的地方？
• vue邊界狀況有哪些？
• 如何在子組件中訪問父組件的實例？
• watch的屬性用箭頭函數定義結果會怎麼樣？
• 在vue項目中若是methods的方法用箭頭函數定義結果會怎麼樣？
• 在vue項目中如何配置favicon？
• 你有使用過babel-polyfill模塊嗎？主要是用來作什麼的？
• 說說你對vue的錯誤處理的瞭解？
• 在vue事件中傳入$event，使用e.target和e.currentTarget有什麼區別？
• 在.vue文件中style是必須的嗎？那script是必須的嗎？爲何？
• vue怎麼實現強制刷新組件？
• vue自定義事件中父組件怎麼接收子組件的多個參數？
• 實際工做中，你總結的vue最佳實踐有哪些？
• vue給組件綁定自定義事件無效怎麼解決？
• vue的屬性名稱與method的方法名稱同樣時會發生什麼問題？
• vue變量名若是以_、$開頭的屬性會發生什麼問題？怎麼訪問到它們的值？
• vue使用v-for遍歷對象時，是按什麼順序遍歷的？如何保證順序？
• vue若是想擴展某個現有的組件時，怎麼作呢？
• 說下listeners的使用場景
• 分析下vue項目本地開發完成後部署到服務器後報404是什麼緣由呢？
• v-once的使用場景有哪些？
• 說說你對vue的表單修飾符.lazy的理解
• vue爲何要求組件模板只能有一個根元素？
• EventBus註冊在全局上時，路由切換時會重複觸發事件，如何解決呢？
• 怎麼修改vue打包後生成文件路徑？
• 你有使用作過vue與原生app交互嗎？說說vue與ap交互的方法
• 使用vue寫一個tab切換
• vue中什麼是遞歸組件？舉個例子說明下？
• 怎麼訪問到子組件的實例或者子元素？
• 在子組件中怎麼訪問到父組件的實例？
• 在組件中怎麼訪問到根實例？
• 說說你對Object.defineProperty的理解
• vue組件裏寫的原生addEventListeners監聽事件，要手動去銷燬嗎？爲何？
• vue組件裏的定時器要怎麼銷燬？
• vue組件會在何時下被銷燬？
• 使用vue渲染大量數據時應該怎麼優化？說下你的思路！
• 在vue中使用this應該注意哪些問題？
• 你有使用過JSX嗎？說說你對JSX的理解
• 說說組件的命名規範
• 怎麼配置使vue2.0+支持TypeScript寫法？
• <template></template>有什麼用？
• vue的is這個特性你有用過嗎？主要用在哪些方面？
• vue的:class和:style有幾種表示方式？
• 你瞭解什麼是函數式組件嗎？
• vue怎麼改變插入模板的分隔符？
• 組件中寫name選項有什麼做用？
• 說說你對provide和inject的理解
• 開發過程當中有使用過devtools嗎？
• 說說你對slot的理解有多少？slot使用場景有哪些？
• 你有使用過動態組件嗎？說說你對它的理解
• prop驗證的type類型有哪幾種？
• prop是怎麼作驗證的？能夠設置默認值嗎？
• 怎麼緩存當前打開的路由組件，緩存後想更新當前組件怎麼辦呢？
• 說說你對vue組件的設計原則的理解
• 你瞭解vue的diff算法嗎？
• vue如何優化首頁的加載速度？
• vue打包成最終的文件有哪些？
• ajax、fetch、axios這三都有什麼區別？
• vue能監聽到數組變化的方法有哪些？爲何這些方法能監聽到呢？
• vue中是如何使用event對象的？
• vue首頁白屏是什麼問題引發的？如何解決呢？
• 說說你對單向數據流和雙向數據流的理解
• 移動端ui你用的是哪一個ui庫？有遇到過什麼問題嗎？
• 你知道nextTick的原理嗎？
• 說說你對v-clock和v-pre指令的理解
• 寫出你知道的表單修飾符和事件修飾符
• 說說你對proxy的理解
• 你有本身用vue寫過UI組件庫嗎？
• 用vue怎麼實現一個換膚的功能？
• 有在vue中使用過echarts嗎？踩過哪些坑？如何解決的？
• 若是讓你教一個2-3年經驗前端經驗的同事使用vue，你該怎麼教？
• vue性能的優化的方法有哪些？
• SSR解決了什麼問題？有作過SSR嗎？你是怎麼作的？
• 說說你以爲認爲的vue開發規範有哪些？
• vue部署上線前須要作哪些準備工做？
• vue過渡動畫實現的方式有哪些？
• vue在created和mounted這兩個生命週期中請求數據有什麼區別呢？
• vue父子組件雙向綁定的方法有哪些？
• vue怎麼獲取DOM節點？
• vue項目有作過單元測試嗎？
• vue項目有使用過npm run build --report嗎？
• 如何解決vue打包vendor過大的問題？
• webpack打包vue速度太慢怎麼辦？
• vue在開發過程當中要同時跟N個不一樣的後端人員聯調接口（請求的url不同）時你該怎麼辦？
• vue要作權限管理該怎麼作？若是控制到按鈕級別的權限怎麼作？
• 說下你的vue項目的目錄結構，若是是大型項目你該怎麼劃分結構和劃分組件呢？
• 在移動端使用vue，你以爲最佳實踐有哪些？
• 大家項目爲何會選vue而不選擇其它的框架呢？
• 對於即將到來的vue3.0特性你有什麼瞭解的嗎？
• vue開發過程當中你有使用什麼輔助工具嗎？
• vue和微信小程序寫法上有什麼區別？
• 怎麼緩存當前的組件？緩存後怎麼更新？
• 你瞭解什麼是高階組件嗎？能否舉個例子說明下？
• 爲何咱們寫組件的時候能夠寫在.vue裏呢？能夠是別的文件名後綴嗎？
• vue-loader是什麼？它有什麼做用？
• 說說你對vue的extend（構造器）的理解，它主要是用來作什麼的？
• 若是將axios異步請求同步化處理？
• 怎麼捕獲組件vue的錯誤信息？
• 爲何vue使用異步更新組件？
• 如何實現一個虛擬DOM？說說你的思路
• 寫出多種定義組件模板的方法
• SPA單頁面的實現方式有哪些？
• 說說你對SPA單頁面的理解，它的優缺點分別是什麼？
• 說說你都用vue作過哪些類型的項目？
• 在vue項目中如何引入第三方庫（好比jQuery）？有哪些方法能夠作到？
• 使用vue手寫一個過濾器
• 你有使用過render函數嗎？有什麼好處？
• 寫出你經常使用的指令有哪些？
• 手寫一個自定義指令及寫出如何調用
• 組件進來請求接口時你是放在哪一個生命週期？爲何？
• 你有用過事件總線(EventBus)嗎？說說你的理解
• 說說vue的優缺點分別是什麼？
• DOM渲染在哪一個週期中就已經完成了？
• 第一次加載頁面時會觸發哪幾個鉤子？
• vue生命週期總共有幾個階段？
• vue生命週期的做用是什麼？
• vue和angular有什麼區別呢？
• 如何引入scss？引入後如何使用？
• 使用vue開發過程你是怎麼作接口管理的？
• 爲什麼官方推薦使用axios而不用vue-resource？
• 你瞭解axios的原理嗎？有看過它的源碼嗎？
• 你有封裝過axios嗎？主要是封裝哪方面的？
• 如何中斷axios的請求？
• axios是什麼？怎樣使用它？怎麼解決跨域的問題？
• 說說你對vue的template編譯的理解？
• v-on能夠綁定多個方法嗎？
• vue經常使用的修飾符有哪些？列舉並說明
• 你認爲vue的核心是什麼？
• v-model是什麼？有什麼用呢？
• 說說你對vue的mixin的理解，有什麼應用場景？
• SPA首屏加載速度慢的怎麼解決？
• 刪除數組用delete和Vue.delete有什麼區別？
• 動態給vue的data添加一個新的屬性時會發生什麼？怎樣解決？
• 組件和插件有什麼區別？
• 說說你使用vue過程當中遇到的問題（坑）有哪些，你是怎麼解決的？
• 說說你對選項el,template,render的理解
• vue實例掛載的過程是什麼？
• vue在組件中引入插件的方法有哪些？
• v-if和v-for的優先級是什麼？若是這兩個同時出現時，那應該怎麼優化才能獲得更好的性能？
• 分別說說vue能監聽到數組或對象變化的場景，還有哪些場景是監聽不到的？沒法監聽時有什麼解決方案？
• $nextTick有什麼做用？
• 爲何data屬性必須聲明爲返回一個初始數據對應的函數呢？
• 怎麼在watch監聽開始以後當即被調用？
• watch怎麼深度監聽對象變化？
• watch和計算屬性有什麼區別？
• vue如何監聽鍵盤事件？
• v-for循環中key有什麼做用？
• 怎麼在vue中使用插件？
• 你有寫過自定義組件嗎？
• 說說你對keep-alive的理解是什麼？
• 怎麼使css樣式只在當前組件中生效？
• 你有看過vue的源碼嗎？若是有那就說說看
• 你有寫過自定義指令嗎？自定義指令的生命週期（鉤子函數）有哪些？
• v-show和v-if有什麼區別？使用場景分別是什麼？
• 說說你對MVC、MVP、MVVM模式的理解
• 說下你對指令的理解？
• 請描述下vue的生命週期是什麼？
• vue組件之間的通訊都有哪些？
• 什麼是虛擬DOM？
• 什麼是雙向綁定？原理是什麼？
• vue和react有什麼不一樣？使用場景是什麼？
• 說說vue的優缺點
• 有使用過vue嗎？說說你對vue的理解

vue-cli

• vue-cli提供了的哪幾種腳手架模板？
• vue-cli工程中經常使用的npm命令有哪些？
• 在使用vue-cli開發vue項目時，自動刷新頁面的原理你瞭解嗎？
• vue-cli3插件有寫過嗎？怎麼寫一個代碼生成插件？
• vue-cli生成的項目可使用es六、es7的語法嗎？爲何？
• vue-cli怎麼解決跨域的問題？
• vue-cli中你常常的加載器有哪些？
• 你知道什麼是腳手架嗎？
• 說下你瞭解的vue-cli原理？你能夠本身實現個類vue-cli嗎？
• 怎麼使用vue-cli3建立一個項目？
• vue-cli3你有使用過嗎？它和2.x版本有什麼區別？
• vue-cli默認是單頁面的，那要弄成多頁面該怎麼辦呢？
• 不用vue-cli，你本身有搭建過vue的開發環境嗎？流程是什麼？

vue-router

• vue-router怎麼重定向頁面？
• vue-router怎麼配置404頁面？
• 切換路由時，須要保存草稿的功能，怎麼實現呢？
• vue-router路由有幾種模式？說說它們的區別？
• vue-router有哪幾種導航鉤子（ 導航守衛 ）？
• 說說你對router-link的瞭解
• vue-router如何響應路由參數的變化？
• 你有看過vue-router的源碼嗎？說說看
• 切換到新路由時，頁面要滾動到頂部或保持原先的滾動位置怎麼作呢？
• 在什麼場景下會用到嵌套路由？
• 如何獲取路由傳過來的參數？
• 說說active-class是哪一個組件的屬性？
• 在vue組件中怎麼獲取到當前的路由信息？
• vur-router怎麼重定向？
• 怎樣動態加載路由？
• 怎麼實現路由懶加載呢？
• 若是讓你從零開始寫一個vue路由，說說你的思路
• 說說vue-router完整的導航解析流程是什麼？
• 路由之間是怎麼跳轉的？有哪些方式？
• 若是vue-router使用history模式，部署時要注意什麼？
• route和router有什麼區別？
• vue-router鉤子函數有哪些？都有哪些參數？
• vue-router是用來作什麼的？它有哪些組件？

vuex

• 你有寫過vuex中store的插件嗎？
• 你有使用過vuex的module嗎？主要是在什麼場景下使用？
• vuex中actions和mutations有什麼區別？
• vuex使用actions時不支持多參數傳遞怎麼辦？
• 你以爲vuex有什麼缺點？
• 你以爲要是不用vuex的話會帶來哪些問題？
• vuex怎麼知道state是經過mutation修改仍是外部直接修改的？
• 請求數據是寫在組件的methods中仍是在vuex的action中？
• 怎麼監聽vuex數據的變化？
• vuex的action和mutation的特性是什麼？有什麼區別？
• 頁面刷新後vuex的state數據丟失怎麼解決？
• vuex的state、getter、mutation、action、module特性分別是什麼？
• vuex的store有幾個屬性值？分別講講它們的做用是什麼？
• 你理解的vuex是什麼呢？哪些場景會用到？不用會有問題嗎？有哪些特性？
• 使用vuex的優點是什麼？
• 有用過vuex嗎？它主要解決的是什麼問題？推薦在哪些場景用？

ElementUI

• ElementUI是怎麼作表單驗證的？在循環裏對每一個input驗證怎麼作呢？
• 你有二次封裝過ElementUI組件嗎？
• ElementUI怎麼修改組件的默認樣式？
• ElementUI的穿梭組件若是數據量大會變卡怎麼解決不卡的問題呢？
• ElementUI表格組件如何實現動態表頭？
• ElementUI使用表格組件時有遇到過問題嗎？
• 有閱讀過ElementUI的源碼嗎？
• 項目中有使用過ElementUI嗎？有遇到過哪些問題？它的使用場景主要是哪些？
• 有用過哪些vue的ui？說說它們的優缺點？

mint-ui

• mint-ui使用過程當中有沒有遇到什麼坑？怎麼解決的？
• 說出幾個mint-ui經常使用的組件
• mint-ui是什麼？你有使用過嗎？