小流的面试题总结

164 阅读3分钟

1、vue生命周期:

beforeCreate->Created->beforeMounte->Mounted->beforeUpdate->Updated->befareDestory->Destored

2、父子组件传值:

emitemit、on、props、enentBus(事件总线)、vuex、attrsattrs、listeners

3、普通函数和箭头函数的区别:

箭头函数没有原型 原型是undefined

箭头函数this指向全局对象 而函数指向引用对象

call、apply、bind方法改变不了箭头函数的指向

4、数组扁平化:

es6: flat()

5、反转字符串:

[..."hello world"].reduce((a, v) => v+a) //reduce实现

[..."hello world"].reverse().join('') //reverse实现

6、jq和vue的区别:

vue是数据驱动,jq是控制dom元素

vue渲染优雅,代码易维护

7、vue双向绑定数据原理

Object.defineProperty()

vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和、getter,在数据变动时发布消息给订阅者,触发响应的监听回调

8、基本数据类型、引用类型、基本类型的区别

数据类型:string、null、undefined、number、Boolean、symbol、bigint 、object(引用数据类型)

9、async/await和promise

使用async函数可以让代码简洁很多,不需要像promise一样使用then,不需要写匿名函数处理promise的resolve的值,也不需要定义多余的data变量,还避免了嵌套代码

async/await 让try/catch可以同时处理同步和异步的错误

10、事件捕获和事件冒泡

11、nextTick、diff、虚拟dom、watch原理

12、vuex

state、getters、mutations、actions、modules

13、es6 解构为什么出现 解决了什么问题

数据取值赋值、获取对象属性值、代码更简洁

13、v-if和v-show的区别

同时使用的话会先遍历再处理渲染

14、vue-for key的作用

diff算法的对比标识、加快diff

15、nextTick

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

16、axios拦截器

请求拦截器(interceptors.request)、响应拦截器(interceptors.response)

api执行顺序:请求拦截器->api请求->响应拦截器

17、keep alive

用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。 总的来说,keep-alive用于保存组件的渲染状态。

18、强制缓存和协商缓存

强缓存不需要向服务器发送请求

协商缓存需要发送一个get请求304

19、性能优化

白屏加载使用骨架屏

减少http请求

静态资源使用CDN

CSS放在文件头部,Javascript文件放在底部

使用字体图标iconfont代替图片图标

多用缓存,不重复加载相同的资源

使用事件委托

布局使用flex弹性布局

20、路由导航守卫

router.beforeEach(全局前置守卫)、router.beforeResolve(全局解析守卫)、router.afterEach(全局后置钩子)

image.png