Vue面试大纲

本文是根据一部vue面试课程总结的内容大纲

慕课网原课程地址：https://coding.imooc.com/class/419.html

b站免费地址：https://www.bilibili.com/video/BV14K411H7VX

1 1-1 课程导学

2 2-1 先看几个面试题

v-show和v-if的区别
为何v-for中要用key
描述vue组件生命周期（有父子组件的情况下）
vue组件如何通讯
描述组件渲染和更新的过程
双向数据绑定v-model的实现原理
react组件如何通讯
jsx本质是什么
context是什么，有何用途？
shouldComponentUpdate的用途
描述redux单向数据流
setState是同步还是异步（多为场景题）
基于react设计一个todolist（组件结构，redux state数据结构）
基于vue设计一个购物车（组件结构，vuex state数据结构）
前端代码为何要进行构建和打包？
module chunk bundle分别是什么意思，有何区别？
loader和plugin的区别
webpack如何实现懒加载
webpack常见性能优化
babel-runtime和babel-polyfill的区别

如何应对上述面试题？

框架的使用（基本使用，高级特性，周边插件）
框架的原理（基本原理的了解，热门技术的深度，全面性）
框架的实际应用，即设计能力（组件结构，数据结构）

面试官为何要这样考察？

保障候选人能正常工作----考察使用
多个候选人竞争时，选择有技术追求的----考察原理
看候选人是否能独立承担项目----考察设计能力

3 3-1 vue使用-考点串讲

基本使用，组件使用----常用，必须会

高级特性----不常用，但体现深度

vuex和vue-router使用

4 3-2 vue基本使用

日常使用，必须掌握，面试必考（不一定全考）

梳理知识点，从冗长的文档中摘除考点和重点

考查形式不限（参考后面的面试真题），但都在范围之内

指令、插值

插值、表达式
指令、动态属性
v-html：会有xss风险，会覆盖子组件

computed和watch

computed有缓存，data不变则不会重新计算
watch如何深度监听？
watch监听引用类型，拿不到oldVal

class和style

使用动态属性
使用驼峰式写法

条件渲染

v-if v-else的用法，可使用变量，也可以使用===表达式
v-if和v-show的区别？
v-if和v-show的使用场景？

5 3-3 vue基本知识点串讲-part2

循环（列表）渲染

如何遍历对象？----也可以用v-for
key的重要性。key不能乱写（如random或者index）
v-for和v-if不能一起使用！

事件

event参数，自定义参数
事件修饰符，按键修饰符
【观察】事件被绑定到哪里？

event是原生的

时间被挂在到当前元素

事件修饰符

按键修饰符

表单

v-model
常见表单项textarea checkbox radio select
修饰符 lazy number trim

总结

必须掌握，否则面试不会通过
重点和考点

6 3-4 vue父子组件如何通讯

vue组件使用

props和$emit
组件间通讯-自定义事件
组件生命周期

7 3-5 如何用自定义事件进行vue组件通讯

自定义事件

绑定事件
beforeDestroy()销毁事件

8 3-6 vue父子组件生命周期调用顺序

生命周期（单个组件）

挂载阶段
更新阶段
销毁阶段

生命周期（父子组件）

create由外而内
mounted由内而外

9 3-7 面试会考察哪些vue高级特性

不是每个都很常用，但用到的时候必须知道
考察候选人对vue的掌握是否全面，且有深度
考察做过的项目是否有深度和复杂度（至少能用到高级特性）

keep-alive

mixin

10 3-8 vue如何自己实现v-model

自定义v-model

11 3-9 vue组件更新之后如何获取最新DOM

$nextTick、refs

vue是异步渲染
data改变之后，DOM不会立刻渲染
$nextTick会在DOM渲染之后被触发，以获取最新DOM节点

12 3-10 slot是什么

slot

基本使用
作用域插槽
具名插槽

13 3-11 vue动态组件是什么

动态组件

:is="compontent-name"用法
需要根据数据，动态渲染的场景。即组件类型不确定

14 3-12 vue如何异步加载组件

异步组件（很常见

import()函数
按需加载，异步加载大组件

15 3-13 vue如何缓存组件

keep-alive

缓存组件
频繁切换，不需要重复渲染
vue常见性能优化

16 3-14 vue组件如何抽离公共逻辑

mixin

多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决方案，会有一些问题
Vue3提出的Composition API旨在解决这些问题

mixin的问题

变量来源不明确，不利于阅读
多mixin可能会造成命名冲突
mixin和组件可能出现多对多的关系，复杂度较高

17 3-15 vue高级特性知识点小结

18 3-16 vuex知识点串讲

面试考点并不多（因为熟悉vue之后，vuex没有难度）

但基本概念、基本使用和API必须要掌握

可能会考察state的数据结构设计

vuex基本概念

state
getter
action
mutation

用于vue的组件

dispatch
commit
mapState
mapGetters
mapActions
mapMutations

19 3-17 vue-router知识点串讲

面试考点并不多（前提是熟悉vue）

路由模式（hash、H5history）

hash模式（默认），如http://abc.cpm/#/user/10
H5 history模式，如http://abc.com/user/20
后者需要server端支持，因此无特殊需求可选择前者

路由配置（动态路由、懒加载）

20 3-18 vue使用-考点总结和复习

基本使用，组件使用

高级特性

vuex和vue-router的使用

21 4-1 vue原理-大厂必考

面试为何会考察原理？

知其然知其所以然----各行业通用的道理
了解原理，才能应用的更好（竞争激烈，择优录取）
大厂造轮子（有钱有资源，业务定制，技术KPI）

面试中如何考察？以何种方式？

考察重点，而不是考察细节。掌握好2/8原则
和使用相关联的原理，例如vdom、模板渲染
整体流程是否全面？热门技术是否有深度？

vue原理包括哪些？

组件化
响应式
vdom和diff
模板编译
渲染过程
前端路由

22 4-2 如何理解MVVM

组件化基础

“很久以前”就有组件化
数据驱动视图（MVVM，setState）

“很久以前”的组件化

asp jsp php已经有组件化了
nodejs中也有类似的组件化

数据驱动视图

传统组件，只是静态渲染，更新还要依赖于操作DOM
数据驱动视图——Vue MVVM
数据驱动视图——React setState

Vue MVVM模型

23 4-3 监听data变化的核心API是什么

Vue响应式

组件data的数据一旦变化，立刻触发视图的更新
实现数据驱动视图的第一步
考察Vue原理的第一题
核心API----Object.defineProperty
如何实现响应式，代码演示
Object.defineProperty的一些缺点（Vue3.0启用Proxy）

Proxy有兼容性问题

Proxy兼容性不好，且无法polyfill
Vue2.x还会存在一段时间，所以都得学
Vue3.0相关知识

Object.defineProperty基本用法

Object.defineProperty实现响应式

监听对象，监听数组
复杂对象，深度监听
几个缺点

24 4-4 如何深度监听data变化

Object.defineProperty缺点

深度监听，需要递归到底，一次性计算量大
无法监听新增属性/删除属性（Vue.set Vue.delete)
无法原生监听数组，需要特殊处理

25 4-5 vue如何监听数组变化

重新定义数组原型

26 4-6 虚拟DOM-面试里的网红

vdom是实现vue和react的重要基石
diff算法是vdom中最核心、最关键的部分
vdom是一个热门话题，也是面试中的热门问题

虚拟dom和diff

DOM操作非常耗费性能
以前用JQuery，可以自行控制DOM操作的时机，手动调整
Vue和React是数据驱动视图，如何有效控制DOM操作？

解决方案--vdom

有了一定复杂度，想减少计算次数比较难
能不能把计算，更多的转移为JS计算？因为JS执行速度很快
vdom--用JS模拟DOM结构，计算出最小的变更，操作DOM

用JS模拟DOM结构

tag/element
props
chrildrens

通过snabbdom学习vdom

强大简洁的vdom库，易学易用
Vue参考它实现的vdom和diff
Vue3.0重写了vdom的代码，优化了性能
但vdom的基本理念不变，面试考点也不变
react vdom具体实现和vue也不同，但不妨碍统一学习

27 4-7 用过虚拟DOM吗

diff算法

diff算法是vdom中最核心、最关键的部分
diff算法能在日常使用vue react中体现出来（如key)
diff算法是前端热门话题，是面试的宠儿

28 4-8 虚拟DOM-diff算法概述

diff算法概述

diff即对比，是一个广泛的概念，如linux diff命令、git diff等
两个js对象也可以做diff
两棵树做diff，如这里的vdom diff

树diff的时间复杂度O(n^3)

第一，遍历tree1；第二，遍历tree2
第三，排序
1000个节点，要计算1亿次，不可用

优化时间复杂度到O(n)

只比较同一层级，不跨级比较
tag不相同，则直接删掉重建，不再深度比较
tag和key，两者相同，则认为是相同节点，不再深度比较

29 4-9 深入diff算法源码-生成vnode

snabbdom-源码解读

h函数
patch函数
vnode是什么

30 4-10 深入diff算法源码-patch函数

31 4-11 深入diff算法源码-patchVnode函数

32 4-12 深入diff算法源码-updateChildren函数

不要追究细节

33 4-13 虚拟DOM-考点总结和复习

diff算法总结

patchVnode
addVnodes removeVnodes
updateChildren(key的重要性)

vdom和diff-总结

细节不重要，updateChildren的过程也不重要，不要深究
vdom核心概念很重要：h、vnode、patch、diff、key等
vdom存在的价值更加重要：数据驱动视图，控制DOM操作等

34 4-14 模板编译前置知识点-with语法

模板编译

模板是vue开发中最常用的部分，即与使用相关联的原理
它不是html，有指令、插值、js表达式，到底是什么？
面试不会直接问，但会通过“组件渲染和更新过程”考察
前置知识：js的with语法
vue template complier将模板便以为render函数
执行render函数生成vnode

with语法

改变{}内自由变量的查找规则，当做obj属性来查找
如果找不到匹配的obj属性，就会报错
with要慎用，它打破了作用域规则，易读性变差

35 4-15 vue模板被编译成什么

编译模板

模板不是html，有指令、插值、js表达式，能实现判断、循环
html是标签语言，只有js才能实现判断、循环(图灵完备的)
因此，模板一定是转换为某种js代码，即编译模板
模板编译为render函数，执行render函数返回vnode
基于vnode再执行patch和diff(后面会讲)
使用webpack vue-loader，会在开发环境下编译模板(重要)

36 4-16 vue组件可用render代替template

vue组件中使用render代替template

讲完模板编译，再讲render，就比较好理解了
在有些复杂情况下，不能用template，可以考虑用render
react一直都用render(没有模板)，和这里一样

总结

with语法
模板到render函数，再到vnode，再到渲染和更新
vue组件可以用render代替template

37 4-17 回顾和复习已学的知识点

组件渲染/更新过程

一个组件渲染到页面，修改data触发更新(数据驱动更新)
其背后原理是什么，需要掌握哪些要点？
考察对流程了解的全面程度
初次渲染过程
更新过程
异步渲染

回顾学过的知识

响应式：监听data属性getter setter(包括数组)
模板编译：模板到render函数，再到vnode
vdom：patch(elem,vnode)和patch(vnode,newVnode)

38 4-18 vue组件是如何渲染和更新的

初次渲染过程

解析模板为render函数(或在开发环境中已完成，vue-loader)
触发响应式，监听data属性 getter setter
执行render函数，生成vnode，patch(elem,vnode)

更新过程

修改data，触发setter(此前在getter中已被监听)
重新执行render函数，生成newVnode
patch(vnode,newVnode)

39 4-19 vue组件是异步渲染的

异步渲染

回顾$nextTick
汇总data的修改，一次性更新视图
减少DOM操作次数，提高性能

总结

渲染和响应式的关系
渲染和模板编译的关系
渲染和vdom的关系
初次渲染过程
更新过程
异步渲染

40 4-20 如何用JS实现hash路由

前端路由原理

稍微复杂一点的SPA，都需要路由
vue-router也是vue全家桶的标配之一
属于“和日常使用相关联的原理”，面试里常考
回顾vue-router的路由模式
hash
H5 history

网页url组成部分

location.protocol
location.hostname
location.host
location.port
location.pathname
location.search
location.hash

hash的特点

hash变化会触发网页跳转，即浏览器的前进、后退
hash变化不会刷新页面，SPA必需的特点
hash永远不会提交到server端(前端自生自灭)

引起hash变化的行为

js修改url
手动修改
浏览器的前进、后退

4-21 如何用JS实现H5 history路由

H5 history

用url规范的路由，但跳转时不刷新页面
history.pushState 重要
window.onpopstate 重要

正常页面浏览与改造成H5 history模式的区别

总结

hash-window.onhashchange
H5 history-history.pushState和window.onpopstate
H5 history需要后端支持

两者选择

to B的系统推荐用hash，简单易用，对url规范不敏感
to C的系统，可以考虑选择H5 history，但需要服务端支持
能选择简单的，就别用复杂的，要考虑成本和收益

42 4-22 vue原理-考点总结和复习

Vue原理-总结

组件化
响应式
vdom和diff
模板编译
渲染过程
前端路由

组件化

组件化的历史
数据驱动视图
MVVM

响应式

Object.defineProperty
监听对象(深度),监听数组
Object.defineProperty的缺点(Vue3用Proxy，后面会讲)

vdom和diff

应用背景
vnode结构
snabbdom使用：vnode h patch

模板编译

with语法
模板编译为render函数
执行render函数生成vnode

组件渲染/更新过程

初次渲染过程
更新过程
异步渲染

前端路由原理

hash
H5 history
两者对比

43 5-1 vue真题演练1-v-for为何使用key

Vue面试真题演练来源

自己觉得是面试重点
网上收集整理的面试题
热门技术和知识点

v-show和v-if的区别

v-show 通过CSS display控制显示和隐藏
v-if 组件真正的渲染和销毁，而不是显示和隐藏
频繁切换显示状态用v-show，否则用v-if

为何在v-for中用key

必须用key，且不能是index和random
diff算法中通过tag和key来判断，是否是sameNode
减少渲染次数，提升渲染性能

描述Vue组件生命周期(父子组件)

单组件生命周期图
父子组件生命周期图

Vue组件如何通讯(常见的方式)

父子组件props和this.$emit
自定义事件event.$on event.$off event.$emit
vuex

描述组件渲染和更新的过程

44 5-2 vue真题演练2-组件data为何是函数 18_44

双向数据绑定v-model的实现原理

input元素的value=this.name
绑定input事件this.name=$event.target.value
data更新触发re-render

对MVVM的理解

computed有何特点

缓存，data不变不会重新计算
提高性能

为何组件data必须是一个函数？

定义的.vue文件、定义的vue组件是一个class，每个地方去使用这个组件时，实际上是对这个class的实例化
在实例化的时候执行data()，如果data不是函数，那么每个实例的数据将会相同、会共享
如果data()是函数，那么data中的数据将会处于闭包之中，不会造成数据的共享

ajax请求应该放在哪个生命周期

mounted
js是单线程的，ajax异步获取数据
放在mounted之前没有用，只要js没有渲染完，ajax就会在异步的排队请求中，放在mounted之前只会让逻辑更加混乱。除非有特殊的情况

45 5-3 vue真题演练3-何时使用keep-alive

如何将组件所有props传递给子组件？

$props
<User v-bind="$props" />
细节知识点，优先级不高

如何自己实现v-model

多个组件有相同的逻辑，如何抽离？

mixin
以及mixin的一些缺点

何时要使用异步组件？

加载大组件
路由异步加载

何时需要使用keep-alive？

缓存组件，不需要重复渲染
如多个静态tab页的切换
优化性能

46 5-4 vue真题演练4-何时需要使用beforeDestroy

何时需要使用beforeDestory

解绑自定义事件event.$off
清除定时器
解绑自定的DOM事件，如window scroll等

什么是作用域插槽

在slot里面，会有一个自己的data，我们想要将data传给使用slot的地方，就可以使用作用域插槽

Vuex中action和mutation有何区别

action中处理异步，mutation不可以
mutation做原子操作
action可以整合多个mutation

Vue-router常用的路由模式

hash默认
H5 history(需要服务端支持)
两者比较

如何配置Vue-router异步加载

import

47 5-5 vue真题演练5-diff算法时间复杂度

请用vnode描述一个DOM结构

tag
props
children

监听data变化的核心API是什么

Object.defineProperty
以及深度监听、监听数组
有何缺点

Vue如何监听数组变化

Object.defineProperty不能监听数组变化
重新定义原型，重写push pop等方法，实现监听
Proxy可以原生支持监听数组变化

请描述响应式原理

监听data变化
组件渲染和更新的流程

diff算法的时间复杂度

O(n)
在O(n^3)基础上做了一些调整

48 5-6 vue真题演练6-vue常见性能优化

简述diff算法过程

patch(elem,vnode)和patch(vnode,newVnode)
patchVnode和addVnodes和removeVnodes
updateChildren(key的重要性)

Vue为何是异步渲染，$nextTick何用？

异步渲染(以及合并data修改)，以提高渲染性能
$nextTick在DOM更新完之后，触发回调

Vue常见性能优化方式

合理使用v-show和v-if
合理使用computed
v-for时加key，以及避免和v-if同时使用
自定义事件、DOM事件及时销毁
合理使用异步组件
合理使用keep-alive
data层级不要太深
使用vue-loader在开发环境做模板编译(预编译)
合理使用keep-alive
webpack层面的优化(后面会讲)
前端通用的性能优化，如图片懒加载
使用SSR

49 6-1 vue3要来了vue2就过时了吗

Vue3

Vue3尚未发布，还在开发中(就在本月8月发布)
面试会考察候选人对新技术的关注程度(Vue太热门)
新版本发布之后，再做补充

Vue3升级内容

全部用ts重写(响应式、vdom、模板编译等)
性能提升，代码量减少
会调整部分api

Vue2.x马上就要过时了吗？

Vue3从正式发布到推广开来，还需要一段时间
Vue2.x应用范围非常广，有大量项目需要维护、升级
Proxy存在浏览器兼容性问题，且不能polyfill

接下来

社区热门知识点：Proxy重写响应式
其他面试题，待发布后再补充

50 6-2 Proxy 基本使用-part1

Proxy实现响应式

回顾Object.defineProperty
Proxy实现响应式
两者对比

Object.defineProperty的缺点

深度监听需要一次性递归
无法监听新增属性/删除属性(Vue.set Vue.delete)
无法原生监听数组，需要特殊处理

Proxy实现响应式

基本使用
Reflect
实现响应式

Proxy基本使用

51 6-3 Proxy 基本使用-part2

Reflect作用

和Proxy能力一一对应
规范化、标准化、函数式
替代掉Object上的工具函数

52 6-4 vue3用Proxy实现响应式

Proxy实现响应式

深度监听，性能更好
可监听新增/删除属性
可监听数组变化

总结

Proxy能规避Object.defineProperty的问题
Proxy无法兼容所有浏览器，无法polyfill

posted @ 2020-08-10 13:04 xk39 阅读(4193641) 评论(0) 收藏举报

刷新页面返回顶部

xk39

Vue面试大纲

1 1-1 课程导学

2 2-1 先看几个面试题

如何应对上述面试题？

面试官为何要这样考察？

3 3-1 vue使用-考点串讲

4 3-2 vue基本使用

指令、插值

computed和watch

class和style

条件渲染

5 3-3 vue基本知识点串讲-part2

循环（列表）渲染

事件

事件修饰符

按键修饰符

表单

总结

6 3-4 vue父子组件如何通讯

vue组件使用

7 3-5 如何用自定义事件进行vue组件通讯

自定义事件

8 3-6 vue父子组件生命周期调用顺序

生命周期（单个组件）

生命周期（父子组件）

9 3-7 面试会考察哪些vue高级特性

keep-alive

mixin

10 3-8 vue如何自己实现v-model

自定义v-model

11 3-9 vue组件更新之后如何获取最新DOM

$nextTick、refs

12 3-10 slot是什么

slot

13 3-11 vue动态组件是什么

动态组件

14 3-12 vue如何异步加载组件

异步组件（很常见

15 3-13 vue如何缓存组件

keep-alive

16 3-14 vue组件如何抽离公共逻辑

mixin

mixin的问题

17 3-15 vue高级特性知识点小结

相关的面试技巧

18 3-16 vuex知识点串讲

面试考点并不多（因为熟悉vue之后，vuex没有难度）

但基本概念、基本使用和API必须要掌握

可能会考察state的数据结构设计

vuex基本概念

用于vue的组件

19 3-17 vue-router知识点串讲

面试考点并不多（前提是熟悉vue）

路由模式（hash、H5history）

路由配置（动态路由、懒加载）

20 3-18 vue使用-考点总结和复习

基本使用，组件使用

高级特性

vuex和vue-router的使用

21 4-1 vue原理-大厂必考

面试为何会考察原理？

面试中如何考察？以何种方式？

vue原理包括哪些？

22 4-2 如何理解MVVM

组件化基础

“很久以前”的组件化

数据驱动视图

Vue MVVM模型

23 4-3 监听data变化的核心API是什么

Vue响应式

Proxy有兼容性问题

Object.defineProperty基本用法

Object.defineProperty实现响应式

24 4-4 如何深度监听data变化

Object.defineProperty缺点

25 4-5 vue如何监听数组变化

重新定义数组原型

26 4-6 虚拟DOM-面试里的网红

虚拟dom和diff

组件渲染/更新过程