前端框架及项目面试聚焦Vue/React/Webpack2020-12-28演讲人01第5章Vue面试真题演练011.v-show和v
-if的区别022.为何在v-for中用key第5章Vue面试真题演练033.描述Vue组件的生命周期（父子组件）044.
Vue组件如何通讯（常见）055.描述组件渲染和更新的过程066.双向数据绑定v-model的实现原理第5章Vue面试真题
演练7.对MVVM的理解8.computed有何特点9.为何组件data必须是一个函数？10.ajax请求应该放在哪个生命
周期？11.如何将组件所有props传递给子组件？12.如何自己实现v-model第5章Vue面试真题演练13.多个组件
有相同的逻辑，如何抽离？14.何时使用异步组件？15.何时使用keep-alive?16.何时需要使用beforeDesto
ry17.什么是作用域插槽第5章Vue面试真题演练18.Vuex中action和，mutation有何区别19.Vue-
router常用的路由模式20.如何配置Vue-router异步加载21.用vnode描述一个DOM结构22.监听data变
化的核心API是什么23.Vue如何监听数组变化第5章Vue面试真题演练28.Vue常见性能优化方式27.Vue为何是异
步渲染，$nextTick何用？26.简述diff算法过程25.diff算法的时间复杂度24.请描述响应式原理第5章Vue
面试真题演练1.v-show和v-if的区别1.v-show通过CSSdisplay控制显示和隐藏2.v-if组
件真正的渲染和销毁，而不是显示和隐藏3.频繁切换显示状态用v-show，否则用v-if1.v-show和v-if的区别1.v
-show通过CSSdisplay控制显示和隐藏2.v-if组件真正的渲染和销毁，而不是显示和隐藏3.频繁切换显
示状态用v-show，否则用v-if第5章Vue面试真题演练2.为何在v-for中用key1.必须用key，而不能是ind
ex和random2.diff算法中通过tag和key来判断，是否是sameNode3.减少渲染次数，提升渲染性能2.为
何在v-for中用key1.必须用key，而不能是index和random2.diff算法中通过tag和key来判断，是否是
sameNode3.减少渲染次数，提升渲染性能第5章Vue面试真题演练3.描述Vue组件的生命周期（父子组件）1.单组
件生命周期图2.父子组件生命周期关系3.描述Vue组件的生命周期（父子组件）1.单组件生命周期图2.父子组件生命周期关
系第5章Vue面试真题演练4.Vue组件如何通讯（常见）1.父子组件props和this.$emit2.自定义事件
event.$onevent.$offevent.$emit3.vuex4.Vue组件如何通讯（常见）1.父子组
件props和this.$emit2.自定义事件event.$onevent.$offevent.$emit3
.vuex第5章Vue面试真题演练5.描述组件渲染和更新的过程在右侧编辑区输入内容响应式模板渲染虚拟dom第5章Vue
面试真题演练6.双向数据绑定v-model的实现原理1.input元素的value=this.name2.绑定input
事件this.name=$event.target.value3.data更新会触发re-render6.双向数据绑定v-m
odel的实现原理1.input元素的value=this.name2.绑定input事件this.name=$eve
nt.target.value3.data更新会触发re-render第5章Vue面试真题演练8.computed有何特
点1.缓存，data不变不会重新计算2.提高性能8.computed有何特点1.缓存，data不变不会重新计算2.提
高性能第5章Vue面试真题演练9.为何组件data必须是一个函数？vue组件的exportdefault看似是一个对象，实
际上在编译之后vue是一个class类，在不同地方多处使用这个vue组件时，相当于是对这个类的实例化。实例化时去执行data，如果
data不是函数，那多处实例化的这个组件的data数据都会是一样了，改变一个data变量，也会影响其它实例化了这个组件的这个变量。
但是如果data是函数，data中的数据就会在闭包中，不会相互影响。所以data必须是一个函数。9.为何组件data必须是一个
函数？vue组件的exportdefault看似是一个对象，实际上在编译之后vue是一个class类，在不同地方多处使用这个vu
e组件时，相当于是对这个类的实例化。实例化时去执行data，如果data不是函数，那多处实例化的这个组件的data数据都会是一样了
，改变一个data变量，也会影响其它实例化了这个组件的这个变量。但是如果data是函数，data中的数据就会在闭包中，不会相互影响
。所以data必须是一个函数。第5章Vue面试真题演练10.ajax请求应该放在哪个生命周期？1.mounted（组件已
经渲染完，DOM加载完）2.JS是单线程的，ajax异步获取数据3.放在mounted之前没有用，只会让逻辑更加混乱（在
mounted之前，js没有渲染完，数据也是异步获取过程中，不会有提前的效果）10.ajax请求应该放在哪个生命周期？1.mo
unted（组件已经渲染完，DOM加载完）2.JS是单线程的，ajax异步获取数据3.放在mounted之前没有用，只会让
逻辑更加混乱（在mounted之前，js没有渲染完，数据也是异步获取过程中，不会有提前的效果）第5章Vue面试真题演练11.
如何将组件所有props传递给子组件？1.$props2.<Userv-bind=''$props''/>3.
细节知识点，优先级不高11.如何将组件所有props传递给子组件？1.$props2.<Userv-bind=''
$props''/>3.细节知识点，优先级不高第5章Vue面试真题演练13.多个组件有相同的逻辑，如何抽离？1.m
ixin2.以及mixin的一些缺点13.多个组件有相同的逻辑，如何抽离？1.mixin2.以及mixin的一些缺点
第5章Vue面试真题演练14.何时使用异步组件？1.加载大组件2.路由异步加载14.何时使用异步组件？1.加载大
组件2.路由异步加载第5章Vue面试真题演练15.何时使用keep-alive?1.缓存组件，不需要重复渲染2.多
个静态tab页的切换3.优化性能15.何时使用keep-alive?1.缓存组件，不需要重复渲染2.多个静态tab页的
切换3.优化性能第5章Vue面试真题演练防止内存泄露1.解绑自定义事件event.$off2.清楚定时器3.解绑
自定义DOM事件，如windowscroll等16.何时需要使用beforeDestory16.何时需要使用beforeDe
story防止内存泄露1.解绑自定义事件event.$off2.清楚定时器3.解绑自定义DOM事件，如windowsc
roll等第5章Vue面试真题演练18.Vuex中action和，mutation有何区别1.action中处理异步，mu
tation不可以2.mutation做原子操作3.action可以整合多个mutation18.Vuex中action
和，mutation有何区别1.action中处理异步，mutation不可以2.mutation做原子操作3.acti
on可以整合多个mutation第5章Vue面试真题演练19.Vue-router常用的路由模式1.hash默认2.H
5history(需要服务端支持)3.两者比较19.Vue-router常用的路由模式1.hash默认2.H5hi
story(需要服务端支持)3.两者比较第5章Vue面试真题演练20.如何配置Vue-router异步加载在右侧编辑区输
入内容20.如何配置Vue-router异步加载（）=>import()第5章Vue面试真题演练22.监听data变
化的核心API是什么1.Object.defineProperty2.以及对象深度监听、监听数组3.有何缺点22.监听
data变化的核心API是什么1.Object.defineProperty2.以及对象深度监听、监听数组3.有何缺点第
5章Vue面试真题演练23.Vue如何监听数组变化1.Object.defineProperty不能监听数组变化2.重
新定义原型，重写pushpop等方法，实现监听3.Proxy可以原生支持监听数组变化23.Vue如何监听数组变化1.Ob
ject.defineProperty不能监听数组变化2.重新定义原型，重写pushpop等方法，实现监听3.Proxy
可以原生支持监听数组变化第5章Vue面试真题演练24.请描述响应式原理1.监听data变化2.组件渲染和更新流程24.
请描述响应式原理1.监听data变化2.组件渲染和更新流程第5章Vue面试真题演练25.diff算法的时间复杂度1.
O（n）2.在O(n^3)基础上做了一些调整同一层级比较。。。。25.diff算法的时间复杂度1.O（n）2.在O
(n^3)基础上做了一些调整同一层级比较。。。。第5章Vue面试真题演练26.简述diff算法过程1.patch(el
em,vnode)和patch(vnode,newVnode)2.patchVnode和addVnodes和remoVnode
s3.updateChildren（key的重要性）26.简述diff算法过程1.patch(elem,vnode)和p
atch(vnode,newVnode)2.patchVnode和addVnodes和remoVnodes3.update
Children（key的重要性）第5章Vue面试真题演练27.Vue为何是异步渲染，$nextTick何用？1.异步渲染
（以及合并data修改）以提高渲染性能2.$nextTick在DOM更新完之后，触发回调27.Vue为何是异步渲染，$nex
tTick何用？1.异步渲染（以及合并data修改）以提高渲染性能2.$nextTick在DOM更新完之后，触发回调第5章
Vue面试真题演练1.合理使用v-show和v-if2.合理使用computed3.v-for时加key，以及避免和v
-if同时使用4.自定义事件、DOM事件及时销毁5.合理使用异步组件6.合理使用keep-alive7.data层
级不要太深8.使用vue-loader在开发环境做模板编译（预编译）9.webpack层面的优化（后面讲）10.前端
通用的性能优化，如图片懒加载11.使用SSR28.Vue常见性能优化方式28.Vue常见性能优化方式1.合理使用v-show和v-if2.合理使用computed3.v-for时加key，以及避免和v-if同时使用4.自定义事件、DOM事件及时销毁5.合理使用异步组件6.合理使用keep-alive7.data层级不要太深8.使用vue-loader在开发环境做模板编译（预编译）9.webpack层面的优化（后面讲）10.前端通用的性能优化，如图片懒加载11.使用SSRv-for和v-if同时使用时，由于v-for的优先级更高，每次都要计算v-if，造成性能浪费响应式监听，深度监听需要一次性遍历完成data层级太深时，递归的次数多感谢聆听 |
|
