2021 前端面试 | Vue.js 专题

本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！

转载请注明出处，未经同意，不可修改文章内容。

🔥🔥🔥“前端一万小时”两大明星专栏限时折扣中，欢迎点击公众号菜单栏各模块了解~

❗️❗️❗️
以下链接为本文最新勘误篇章——《面试 | Vue》

• “前端面试题”及“参考答案详解”属于“￥102.4 ￥199 | 面试刷题”私有团队专享内容，需付费阅读；

• 文章列表所列示的文章属于“￥2020 ￥2999 | 从零基础到轻松就业”私有团队专享内容，除开源的部分，其它皆需付费阅读；

▷ Web 前置知识

▷ HTML

▷ CSS

▷ 🚀HTML+CSS 实战：PC 端“简书”静态首页开发（难度：☆☆）

▷ JavaScript 初识

▷ JavaScript 入门

▷ JavaScript 基础

▷ 🚀原生 JS 实战：小 DEMO 系列（难度：☆☆）

▷ ES6+

▷ 🚀原生 JS 实战：造轮子系列（难度：☆☆☆☆）

▷ 前后端交互

▷ 前端拓展

▷ 🚀原生 JS 项目实战：移动端音乐播放器（难度：☆☆☆）

▷ React.js 基础语法学习

▷ 🚀React.js 项目实战：PC 端“简书”开发（难度：☆☆☆☆）

▽ Vue.js 基础语法学习

• 《Vue 介绍——① Hello World》[编号：vue_01]

❗❗️❗️️P.s. 公众号对话框回复 vue_01、vue_02、web_01、html_01 或 css_01 查看参考答案样本~

涉及面试题：
1. Vue.js 是什么？
2. Vue.js 的主要功能是什么？

• 《Vue 介绍——② 开发 TodoList（v-model、v-for、v-on）》[编号：vue_02]

涉及面试题：
1. v-model 的使用？
2. v-on 可以监听多个方法吗？
3. 如何使用事件处理程序？
4. 如何实现双向绑定？
5. v-model 支持什么修饰符？

• 《Vue 介绍——③ MVVM 模式》[编号：vue_03]

涉及面试题：
1. 什么是 MVVM？比之 MVC 有什么区别？
2. Vue 的优点？
3. 渐进式框架的理解？
4. 三大框架的对比？

• 《Vue 介绍——④ 使用组件改造 TodoList》[编号：vue_04]

涉及面试题：
1. 引进组件的步骤？
2. 组件是什么并给个例子？
3. 组件中的全局注册是什么？
4. 为什么你需要局部注册？
5. 局部注册和全局注册在模块系统中有什么区别？

• 《Vue 介绍——⑤ 简单的组件间传值》[编号：vue_05]

涉及面试题：
props 是什么？

• 《Vue 基础精讲——① Vue 实例》[编号：vue_06]

涉及面试题：
1. Vue 实例是什么？
2. 如何访问根实例？
3. 如何访问父实例？

• 《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 的优先级？
3. 条件指令是什么？

• 《Vue 基础精讲——⑧ Vue 中的列表渲染》[编号：vue_13]

涉及面试题：
 1. 说出几种 Vue 当中的指令和它的用法？
 2. 为什么使用 key？
 3. 列举常用的指令？
 4. v-for 指令的目的是什么？
 5. 如何复用有 key 属性的元素？
 6. 为什么不能在同一个元素上同时使用 v-if 和 v-for 指令？
 7. 为什么使用 for 指令时需要 key 属性？
 8. 如何在一个范围内使用 v-for 指令？
 9. 如何在模板上使用 v-for 指令？
10. 什么是数组检测突变的方法？
11. 什么是数组检测非突变方法？
12. 检测数组变化有什么注意事项？
13. 检测对象变化有什么注意事项？

• 《深入理解 Vue 组件——① 使用组件的细节点》[编号：vue_14]

涉及面试题：
1. Vue 组件中 data 为什么必须是一个函数？
2. Vue 的两个核心点？
3. 如何获取 DOM？

• 《深入理解 Vue 组件——② 父子组件间的数据传递》[编号：vue_15]

涉及面试题：
1. Vue 父组件向子组件传递数据？
2. 子组件像父组件传递事件？
3. 跨组件双向数据绑定？
4. 什么是可接受的 prop 类型？
5. props 后面的数据流是什么？
6. 什么是非 prop 属性？
7. props 有哪些可用的验证？

• 《深入理解 Vue 组件——③ 组件参数校验与非 props 特性》
• 《深入理解 Vue 组件——④ 给组件绑定原生事件》
• 《深入理解 Vue 组件——⑤ 非父子组件间的传值》[编号：vue_18]

涉及面试题：
组件间的通信?

• 《深入理解 Vue 组件——⑥ 在 Vue 中使用插槽》[编号：vue_19]

涉及面试题：
什么是 slot？

• 《深入理解 Vue 组件——⑦ 作用域插槽》
• 《深入理解 Vue 组件——⑧ 动态组件与 v-once 指令》[编号：vue_21]

涉及面试题：
什么是动态组件？

• 《Vue 中的动画特效——① Vue 中的 CSS 动画原理》
• 《Vue 中的动画特效——② 在 Vue 中使用 Animate.css 库》
• 《Vue 中的动画特效——③ 在 Vue 中同时使用过渡和动画》
• 《Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合》[编号：vue_25]

涉及面试题：
提供 transitions 有什么可能的方式？

• 《Vue 中的动画特效——⑤ Vue 中多个元素或组件的过渡》
• 《Vue 中的动画特效——⑥ Vue 中的列表过渡》
• 《Vue 中的动画特效——⑦ Vue 中的动画封装》

▽ 🚀Vue.js 项目实战： 移动端“旅游网站”开发（难度：☆☆☆☆）

• 《Vue 实战准备——① 使用“脚手架”搭建项目》
• 《Vue 实战准备——② 项目框架源码解析》[编号：travel_02]

涉及面试题：
请说出 Vue CLI 项目中 src 目录每个文件夹和文件的用法？

• 《Vue 实战准备——③ 单文件组件与 Vue 中的“路由”》[编号：travel_03]

涉及面试题：
1. 单文件组件解决了哪些问题？
2. Vue-router 跳转和 location.href 有什么区别？
3. Vue 里面 router-link 在电脑上有用，在安卓上没反应怎么解决？
4. Vue2 中注册在 router-link 上事件无效解决方法？
5. 什么是 Vue Router 和它的特性？
6. 使用 Vue Router 路由器的步骤是什么并给出一个例子？
7. 什么是路线匹配优先级？
8. 什么是嵌套路由？

• 《Vue 实战准备——④ 单页应用 🆚 多页应用》[编号：travel_04]

涉及面试题：
单页面应用和多页面应用区别及优缺点？

• 《Vue 实战准备——⑤ 拿到一个“移动端”项目，你首先需要做的 4 件事》
• 《首页开发——① Header 组件》[编号：travel_06]

涉及面试题：
1. 何时需要一个单独的根元素？
2. 什么是 Asset URL 转换规则？
3. 是否可能将局部和全局样式混在一起？
4. 在 scoped CSS 中父级样式是否泄漏到子组件中？

• 《首页开发——② 轮播组件》[编号：travel_07]

涉及面试题：
1. 什么是插件及它的各种服务？
2. 如何创建一个插件？
3. 如何使用插件？
4. 如何使用 deep 选择器？

• 《首页开发——③ 图标区域组件》
• 《首页开发——④ “热销推荐”和“周末去哪儿”组件》
• 《首页开发——⑤ AJAX 获取首页数据》
• 《城市选择页开发——① Header 组件》
• 《城市选择页开发——② “搜索框”、“列表”和“字母表”布局》
• 《城市选择页开发——③ AJAX 获取城市选择页数据》
• 《城市选择页开发——④ “列表”与“字母表”联动》
• 《城市选择页开发——⑤ “搜索框”逻辑实现》
• 《城市选择页开发——⑥ Vuex 实现组件数据共享》
• 《城市选择页开发——⑦ localStorage 的使用及 Vuex 的高级使用》
• 《城市选择页开发——⑧ 使用 keep-alive 优化网页性能》[编号：travel_18]

涉及面试题：
keep-alive 标签的目的是什么？

• 《详情页开发——① 动态路由和 Banner 组件布局》
• 《详情页开发——② 公用图片画廊组件》
• 《详情页开发——③ Header 组件（实现 Header 渐隐渐现）》
• 《详情页开发——④ 详情页“列表”和“用户评论”组件》[编号：travel_22]

涉及面试题：
什么是递归组件？

• 《详情页开发——⑤ AJAX 动态获取详情页数据》
• 《详情页开发——⑥ 基础动画组件》
• 《性能优化和项目上线》[编号：travel_25]

涉及面试题：
1. Vue 提供的事件修饰符是什么？
2. 什么是异步组件？
3. 异步组件工厂的结构是什么？