2020 前端面試 | Vue.js 專題

本文版權歸 「公衆號 | 前端一萬小時」 全部，歡迎轉載！

轉載請註明出處，未經贊成，不可修改文章內容。
複製代碼

• 「前端面試題」及「參考答案詳解」屬於「￥102.4 | 面試刷題」私有團隊專享內容，需付費閱讀；

• 文章列表所列示的文章屬於「￥1024 | 從零基礎到輕鬆就業」私有團隊專享內容，除開源的部分，其它皆需付費閱讀；

---

▷ Web 前置知識

▷ HTML

▷ CSS

▷ 🚀HTML+CSS 實戰：PC 端「簡書」靜態首頁開發（難度：☆☆）

▷ JavaScript 初識

▷ JavaScript 入門

▷ JavaScript 基礎

▷ 🚀原生 JS 實戰：小 DEMO 系列（難度：☆☆）

▷ ES6+

▷ 🚀原生 JS 實戰：造輪子系列（難度：☆☆☆☆）

▷ 先後端交互（🔥🔥🔥優化重寫中，預計 11.10 22:00 完成）

▷ 前端拓展

▷ 🚀原生 JS 項目實戰：移動端音樂播放器（難度：☆☆☆）

▷ React.js 基礎語法學習

▷ 🚀React.js 項目實戰：PC 端「簡書」開發（難度：☆☆☆☆）

▽ Vue.js 基礎語法學習

• 《Vue 介紹——① Hello World》
• 《Vue 介紹——② 開發 TodoList（v-model、v-for、v-on）》[編號：vue_02]

涉及面試題：
1. v-model 的使用？
2. v-on 能夠監聽多個方法嗎？
複製代碼

• 《Vue 介紹——③ MVVM 模式》[編號：vue_03]

涉及面試題：
1. 什麼是 MVVM？比之 MVC 有什麼區別？
2. Vue 的優勢？
3. 漸進式框架的理解？
4. 三大框架的對比？
複製代碼

• 《Vue 介紹——④ 使用組件改造 TodoList》[編號：vue_04]

涉及面試題：
引進組件的步驟？
複製代碼

• 《Vue 介紹——⑤ 簡單的組件間傳值》
• 《Vue 基礎精講——① Vue 實例》
• 《Vue 基礎精講——② Vue 實例生命週期》[編號：vue_07]

涉及面試題：
1. Vue 生命週期的做用是什麼？
2. 什麼是 Vue 生命週期？
3. 第一次頁面加載會觸發哪幾個鉤子？
4. 簡述每一個週期具體適合哪些場景？
5. created 和 mounted 的區別？
6. Vue 獲取數據在哪一個周期函數？
7. $nextTick 的使用？
複製代碼

• 《Vue 基礎精講——③ Vue 的模板語法》
• 《Vue 基礎精講——④ 計算屬性、方法與偵聽器》[編號：vue_09]

涉及面試題：
computed 計算屬性的用法？與 watch、methods 的區別？分別簡述 computed 和 watch 的使用場景？
複製代碼

• 《Vue 基礎精講——⑤ 計算屬性的 getter 和 setter》[編號：vue_10]

涉及面試題：
Vue.set 視圖更新？
複製代碼

• 《Vue 基礎精講——⑥ Vue 中的樣式綁定》[編號：vue_11]

涉及面試題：
如何讓 CSS 只在當前組件中起做用？
複製代碼

• 《Vue 基礎精講——⑦ Vue 中的條件渲染》[編號：vue_12]

涉及面試題：
1. v-show 和 v-if 指令的共同點和不一樣點？
2. v-if 和 v-for 的優先級？
複製代碼

• 《Vue 基礎精講——⑧ Vue 中的列表渲染》[編號：vue_13]

涉及面試題：
1. 說出幾種 Vue 當中的指令和它的用法？
2. 爲何使用 key？
3. 列舉經常使用的指令？
複製代碼

• 《深刻理解 Vue 組件——① 使用組件的細節點》[編號：vue_14]

涉及面試題：
1. Vue 組件中 data 爲何必須是一個函數？
2. Vue 的兩個核心點？
3. 如何獲取 DOM？
複製代碼

• 《深刻理解 Vue 組件——② 父子組件間的數據傳遞》[編號：vue_15]

涉及面試題：
1. Vue 父組件向子組件傳遞數據？
2. 子組件像父組件傳遞事件？
3. 跨組件雙向數據綁定？
複製代碼

• 《深刻理解 Vue 組件——③ 組件參數校驗與非 props 特性》
• 《深刻理解 Vue 組件——④ 給組件綁定原生事件》
• 《深刻理解 Vue 組件——⑤ 非父子組件間的傳值》[編號：vue_18]

涉及面試題：
組件間的通訊?
複製代碼

• 《深刻理解 Vue 組件——⑥ 在 Vue 中使用插槽》
• 《深刻理解 Vue 組件——⑦ 做用域插槽》
• 《深刻理解 Vue 組件——⑧ 動態組件與 v-once 指令》
• 《Vue 中的動畫特效——① Vue 中的 CSS 動畫原理》
• 《Vue 中的動畫特效——② 在 Vue 中使用 Animate.css 庫》
• 《Vue 中的動畫特效——③ 在 Vue 中同時使用過渡和動畫》
• 《Vue 中的動畫特效——④ Vue 中的 JS 動畫與 Velocity.js 的結合》
• 《Vue 中的動畫特效——⑤ Vue 中多個元素或組件的過渡》
• 《Vue 中的動畫特效——⑥ Vue 中的列表過渡》
• 《Vue 中的動畫特效——⑦ Vue 中的動畫封裝》

▽ 🚀Vue.js 項目實戰： 移動端「旅遊網站」開發（難度：☆☆☆☆）

• 《Vue 實戰準備——① 使用「腳手架」搭建項目》
• 《Vue 實戰準備——② 項目框架源碼解析》[編號：travel_02]

涉及面試題：
請說出 Vue CLI 項目中 src 目錄每一個文件夾和文件的用法？
複製代碼

• 《Vue 實戰準備——③ 單文件組件與 Vue 中的「路由」》[編號：travel_03]

涉及面試題：
1. Vue-router 跳轉和 location.href 有什麼區別？
2. Vue 裏面 router-link 在電腦上有用，在安卓上沒反應怎麼解決？
3. Vue2 中註冊在 router-link 上事件無效解決方法？
4. RouterLink 在 IE 和 Firefox 中不起做用（路由不跳轉）的問題？
複製代碼

• 《Vue 實戰準備——④ 單頁應用 🆚 多頁應用》[編號：travel_04]

涉及面試題：
單頁面應用和多頁面應用區別及優缺點？
複製代碼

• 《Vue 實戰準備——⑤ 拿到一個「移動端」項目，你首先須要作的 4 件事》
• 《首頁開發——① Header 組件》
• 《首頁開發——② 輪播組件》
• 《首頁開發——③ 圖標區域組件》
• 《首頁開發——④ 「熱銷推薦」和「週末去哪兒」組件》
• 《首頁開發——⑤ AJAX 獲取首頁數據》
• 《城市選擇頁開發——① Header 組件》
• 《城市選擇頁開發——② 「搜索框」、「列表」和「字母表」佈局》
• 《城市選擇頁開發——③ AJAX 獲取城市選擇頁數據》
• 《城市選擇頁開發——④ 「列表」與「字母表」聯動》
• 《城市選擇頁開發——⑤ 「搜索框」邏輯實現》
• 《城市選擇頁開發——⑥ Vuex 實現組件數據共享》
• 《城市選擇頁開發——⑦ localStorage 的使用及 Vuex 的高級使用》
• 《城市選擇頁開發——⑧ 使用 keep-alive 優化網頁性能》
• 《詳情頁開發——① 動態路由和 Banner 組件佈局》
• 《詳情頁開發——② 公用圖片畫廊組件》
• 《詳情頁開發——③ Header 組件（實現 Header 漸隱漸現）》
• 《詳情頁開發——④ 詳情頁「列表」和「用戶評論」組件》
• 《詳情頁開發——⑤ AJAX 動態獲取詳情頁數據》
• 《詳情頁開發——⑥ 基礎動畫組件》
• 《性能優化和項目上線》