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 动态获取详情页数据》
• 《详情页开发——⑥ 基础动画组件》
• 《性能优化和项目上线》