web前端面试总结

最新推荐文章于 2022-09-16 00:33:41 发布

重生之我是菜鸡程序员

最新推荐文章于 2022-09-16 00:33:41 发布

阅读量262

点赞数 1

分类专栏： vue 前端 JavaScript 文章标签： vue.js 面试 javascript

本文链接：https://blog.csdn.net/NiHao___/article/details/119859281

版权

vue 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

问题1 ：自我介绍略单一，公司的业务模式不太清楚（公司是自研？外包？）

问题2：团队开发任务分配问题，你们是怎么分配任务的，人员配置是怎样的？

问题3：项目部分功能略简单（面试官认为），同学们可适当把其他项目里有亮点的功能搬过来说也行

问题4：人力资源项目中，权限功能的实现细节？

首先是对路由的实现

问题4：人力资源项目中，菜单是怎么做的？

问题4：人力资源项目中，按钮的权限如何控制？

问题5：人力资源项目中，工作流程怎么做的，从发起流程--审批流程---........---流程结束，都有哪些节点？

问题6：人力资源项目中，流程中若有需要回退流程，怎么办？

问题7：介绍一下vue虚拟dom？

它是一个object对象模型用来模拟真实的dom 作用是高效的渲染页面减少不必要的dom操作提高渲染效率

问题8：vue中组件间的传参介绍下？

父传子：props

子传父： this.$emit

兄弟：event bus

祖传孙：$props 链、 attrs

孙传祖：$listeners

问题9：子组件如何调用父组件？

问题10：有封装过组件么？怎么编写一个可复用的组件？

问题11：怎么配置嵌套路由？

问题12 ：forEach、map、forof的区别?

forEach不能加 break return continue

.map 只能遍历数组，默认有返回值,返回的数组

forof是遍历对象的方法

问题13：this指向函数

问题14：rest常用的请求方式用过哪些？

GET:查询；
POST：新增；
PUT：修改；
DELETE：删除；

问题15:vue的生命周期及你个人的理解

beforeCreate :当创建new Vue实例的时候触发，此时组件上的对象都没有创建，没有办法拿到methods， data， computed等上的方法和数据。

created：当Vue实例创建完毕触发，可以拿到methods，data的数据和方法但是挂载阶段还没开始，可以在这里发请求。

beforeMount：在实例被挂载的时候触发，相关的render函数被调用，完成了data初始化，但是还没有挂载到html页面上

mounted:容器初始化完毕后触发，挂在页面，渲染页面，可以在这里发送一些请求

beforeUpdata:更新data中的数据之前触发，可以在这里验证更新数据是否正确

updated：数据更新完毕后触发可以拿到更新后的DOM

beforeDestroy：摧毁Vue实例之前触发，在这里可以清除定时器，解绑事件

destroyed：在Vue实例摧毁之后触发，在这里所有的事件监听会被移除，所有子实例也会被摧毁，该钩子在服务器端渲染期间不被调用

补充：如何销毁Vue实例 this.$destroy()

问题16：delete和vue.delete的区别

delete会删除数组的值，但是它依然会在内存中占位置而vue.delete会删除数组在内存中的占位

vue.delete可以避免vue检测不到新的property

4.axios是什么，怎么使用，描述它实现登录功能的过程

axios 的是一种异步请求，用法和ajax类似，安装npm install axios --save 即可使用

特性：可以在node.js发送http请求

拦截请求和响应

自动转化JSON格式

5.vue路由的两个传参方式的不用点

get

this.$router.push('/addres?id=12345')
this.$router.push({path: "/addres", query: { id: 12345 }})

post

this.$router.push({ name: "addres", params: { id: 12345 }})

6.小程序和h5页面的生命周期的区别

小程序：加载=》显示=》加载完成=》页面隐藏=》页面卸载

7windon.onload和jquery里面的$(document).ready(Fuction()｛｝的区别

windon.onload:必须在所有页面加载完毕执行，不能同时写多个，后面的将会覆盖前面的。 $(document).ready()：是页面中所有HTML ，CSS DOM结构加载后就会执行，其他图片可能没有加载完。可以同时编写多个，并且都可以得到执行。

1、forEach、map、forof的区别，常用哪个

2、typeof输出有那些值

所有类型

3、闭包及其应用

1.函数发生嵌套；2.内部函数使用了外部函数的变量

缺点：内存消耗很大，内存泄露。

解决：在退出函数之前，将不使用的局部变量全部删除。

3、数组去重

4、盒子水平垂直居中

5、响应式布局

6、深浅拷贝

7、call和apply

8、async和await

9、localStorage、sessionStorage、cookie

存储大小的不同：

localStorage的大小一般为5M
sessionStorage的大小一般为5M
cookies的大小一般为4K

有效期不同：

localStorage的有效期为永久有效，除非你进行手动删除。
sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。
cookies在设置的有效之前有效，当超过有效期便会失效。

与服务器端的通信

localStorage不参与服务器端的通信。
sessionStorage不参与服务器端的通信。
cookies参与服务器端通信，每次都会携带http的头信息中。（如果使用cookie保存过多数据会带来性能问题）

10、this指向

11、vue双向数据绑定

vue双向绑定就是指model层与view层的同步，两者之间任意一个发生变化都会同步更新到另一者。ViewModel之中有一个 Binder,在ViewModel更新Model上的数据时，Binder会自动将更行后的数据传给View，反过来当用户对View进行操作时，Binder会将数据自动更新到Model中

12、computed和watch的区别

computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

computed中的函数必须要用return返回，watch中的函数不是必须要用return

使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。

14、$nextTick()

nextTick属于微任务,后接一个回调
在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

15、$set()

如果我们直接为对象增加新属性并赋值、数组的增删，并不会触发页面的更新

16、computed 和 watch的区别，深度监听怎么写

深度监听加上deep：true 能用箭头函数，箭头函数，this指向全局

17、上线后的项目界面和设计稿不一致，如何去查找问题

18、如何改变element-ui的css样式

/deep/ 或者style表上不写scoped

19、router中query和params的区别

params只能用name来引入路由，query用path/name来引入

params传值一刷新就没了，query传值刷新还存在

取值用法类似分别是this.$route.params.name和this.$route.query.name。

params类似于post，query更加类似于我们ajax中get传参

20、Echarts的使用

1.先安装导入

2.一定要注意给宽高（不然图是不会出来的）

3.想要什么类型的，在官网上选好了，粘出来

4.改成你想要的数据和样式

21、首屏加载优化

1.对第三方的js库进行打包分离

2.使用gizp压缩

3.代码层面优化合理使用v-if和v-show 合理使用watch和computed 使用v-for必须添加key v-for不要和v-if同时使用定时器的销毁

4.路由懒加载，图片懒加载 img标签只要src存在就会直接发请求，动态加载img标签，精灵图雪碧图

5.请求缓存，短期不变的数据先放在localStorage中

22、微任务和宏任务区别