2021 前端面试 | Vue.js 专题

38,331 阅读7分钟
本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!

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

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

❗️❗️❗️
以下链接为本文最新勘误篇章——《面试 | 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. 异步组件工厂的结构是什么?