vue面试会问哪些问题,前端面试题 vue

1.HTML和网络基础

http于https以及他们的区别(必问)。

https://blog.csdn.net/qq_38289815/article/details/80969419

HTTP与TCP三次握手四次分手，状态码，cookie和webstorage

https://blog.csdn.net/u012194956/article/details/79110212

输入Url后发生了什么(包含状态码)

https://www.jianshu.com/p/a877684a4cdd

前端性能优化

https://www.cnblogs.com/yangzhou33/p/9944106.html

减少http请求，合理设置 HTTP缓存使用浏览器缓存启用压缩CSS SpritesLazyLoad ImagesCSS放在页面最上部，javascript放在页面最下面尽量避免使用 eval和 Function

1.请求中的cookie问题(被两家公司问到)

https://segmentfault.com/a/1190000016032594

https://www.cnblogs.com/yihuite-zch/p/10670364.html

https://www.cnblogs.com/nuccch/p/7875189.html

9.前端跨域问题

https://segmentfault.com/a/1190000011145364?utm_source=tag-newest

25.webpack面试相关

https://segmentfault.com/a/1190000018704305

https://segmentfault.com/a/1190000011383224

Css

移动端适配方案(移动端必问)

https://blog.csdn.net/chenjuan1993/article/details/81710022

移动端1px的解决方案

https://segmentfault.com/a/1190000011466832

15.flex布局

https://www.jianshu.com/p/e70e8e782e5b

https://www.cnblogs.com/cblx/p/8976309.html

https://www.cnblogs.com/ghfjj/p/6541666.html

16.grid布局

https://www.cnblogs.com/moqiutao/p/8682142.html

17.BFC

https://segmentfault.com/a/1190000013647777

根元素或包含根元素的元素浮动元素 float ＝ left | right 或 inherit（≠ none）绝对定位元素 position ＝ absolute 或 fixeddisplay ＝ inline-block | flex | inline-flex | table-cell 或 table-captionoverflow ＝ hidden | auto 或 scroll (≠ visible)

19.水平居中的几种方法

https://www.cnblogs.com/00feixi/p/10116877.html

21.层叠上下文   https://www.jianshu.com/p/0f88946a0746

26.CSS 选择器优先级：

内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素选择器 = 关系选择器 = 伪元素选择器 > 通配符选择器

27.清除浮动

https://blog.csdn.net/weimob258616/article/details/89196161

28.垂直居中

https://segmentfault.com/a/1190000019072679?utm_source=tag-newest

9.css实现图片自适应宽高

https://blog.csdn.net/weixin_33701251/article/details/88610565

div { height: 400px; width: 500px; border: 1px solid black; background-repeat: no-repeat; background-size: contain; background-position: center; } .div1 { background-image: url(./peiqi1.png); } .div2 { background-image: url(./peiqi2.png); } .div3 { background-image: url(./peiqi4.jpeg); } /*背景图解决方法，background-size: contain; 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/ JavaScript

前端执行顺序问题(必问)

https://www.jianshu.com/p/62c7d633a879

https://www.jianshu.com/p/7c8959bb0651

1.手写ajax(自己封装一下ajax)

https://www.jianshu.com/p/d644c398be06

2.原生js实现发布订阅

https://segmentfault.com/a/1190000014267382

4.作用域链、原型链、闭包

https://blog.csdn.net/qq_21428081/article/details/82462815

5.1JavaScript如何实现一个类，怎么实例化这个类？

https://github.com/poetries/FE-Interview-Questions/blob/master/JavaScript.md

5.2Javascript如何实现继承？

https://mountain-buzhou.github.io/Interview-Book/Collection/Inherit.html

https://github.com/poetries/FE-Interview-Questions/blob/master/JavaScript.md

https://www.jianshu.com/p/4ad701bd7b89

6.Js的几种排序算法

https://segmentfault.com/a/1190000010413296

https://mp.weixin.qq.com/s/eTZQOXOK_8Gnq83FxD0mGA

7.Js中的this问题(面试重点，结合原型链)

https://blog.csdn.net/weixin_40890907/article/details/82724822

https://www.cnblogs.com/pssp/p/5216085.html

https://blog.csdn.net/weixin_43359898/article/details/90676911

8.对象的深拷贝

https://www.jianshu.com/p/ce89606aa90c

https://blog.csdn.net/qq_40420294/article/details/89930283

function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {}; if(typeof extendObj !== 'object'){ return "Not a object"; } else{ for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object') { result[key] = deepCopy(obj[key]); //如果是对象，递归复制 } else { result[key] = obj[key]; } } } } return result;}数组 var a = [1,2,3]var b =Array.from(a);b =[...a]

10.call和apply,bind

https://www.jianshu.com/p/dc4c60c512c4

11.Promise

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

12.async和await

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

14.普通函数和箭头函数的区别

https://www.cnblogs.com/biubiuxixiya/p/8610594.html

20.js中的几种方法setTimeout,promise,promise.then, async,await执行顺序问题

https://www.cnblogs.com/Mr-Rshare/p/10969044.html

29.函数防抖和节流(✨)

https://juejin.im/entry/58c0379e44d9040068dc952f

https://juejin.im/post/5c404329e51d4551e064a332

30.JavaScript事件代理（事件委托）

https://blog.csdn.net/qq_38128179/article/details/86293394

31.Js数组的sort方法内部使用的是什么排序

https://www.jianshu.com/p/0ddbc3c8f683

32.浏览器的事件循环机制(对应nodejs的事件循环)

https://segmentfault.com/a/1190000012748907

32.如何给localStorage设置一个过期时间？

https://blog.csdn.net/weixin_43254766/article/details/83618630

Vue

13.vuex 中store的使用

https://blog.csdn.net/zeternityyt/article/details/80041526

18.Vue 父子组件传值

https://www.cnblogs.com/padding1015/p/7878741.html

22.vue中双向绑定的实现原理--数据劫持结合发布订阅

https://segmentfault.com/a/1190000006599500

https://www.cnblogs.com/libin-1/p/6893712.html

https://segmentfault.com/a/1190000013276124

https://www.cnblogs.com/canfoo/p/6891868.html

22.1从发布-订阅模式到Vue响应系统

https://segmentfault.com/a/1190000013338801

23.vue-cli工程的问题

http://www.javanx.cn/20190712/vue-cli-2/

24.vue-router相关面试题

https://blog.csdn.net/weixin_41639609/article/details/88721627

原理：https://segmentfault.com/a/1190000018584560

31.Vue中的虚拟DOM(Vue的原理实现之一)

https://blog.csdn.net/fundebug/article/details/93715457

32.Vue图片懒加载vue-lazyload的使用及原理

https://www.zhihu.com/search?type=content&q=vue%20lazyload

33.实现一个事件发布订阅类，其实就是eventEmitter

https://zhuanlan.zhihu.com/p/60324936

34.vue this.$nextTick的原理和作用

https://segmentfault.com/a/1190000012861862

35.路由拦截

router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (localStorage.getItem('token')) { // 通过vuex state获取当前的token是否存在 next(); } else { next({ path: '/', query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); } });

36.http response 拦截器

axios.interceptors.response.use( response => { if(response.data.ec == '000003'){ //判断token是否过期，如果过期就返回登录页面 router.push({ path:"/", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error => { return Promise.reject(error) })

 

辛苦总结，渡己渡人。如果有用，欢迎评论点赞~

 

可刷的题：

饥人谷押题：https://zhuanlan.zhihu.com/p/59707202

大神面试多公司总结：https://segmentfault.com/a/1190000017818146

前端工程师手册、合格前端系列第九弹-前端面试那些事、2018前端面试押题（讲义）、Interview Book。

Vue面试

Finally 几个总结的比较好的文章集合

https://segmentfault.com/a/1190000016351284

https://juejin.im/entry/58abdf05da2f607e924eb9d1

ES6：

https://www.cnblogs.com/theblogs/p/10575845.html

https://www.cnblogs.com/fengxiongZz/p/8191503.html

ES6高频问题：https://www.jianshu.com/p/cf4496ecc0b0

 

 

web前端面试宝典1（https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions）

web前端面试宝典2（https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese）