前端面试题整理12

目录

1.Vue中动态路由的实现思路?

2.Vue的路由守卫是如何做到拦截的?

3.Ajax的响应状态readyState有哪些?分别什么意思?

4.React中循环渲染元素key的作用?

5.Js原生方法重写怎么实现?

6.销毁生命周期在什么时候使用?项目中那用过?

7.项目中遇到跨域怎么处理的?为什么会存在跨域?

8.React封装组件的详细过程?

9.Webpack的打包流程?

10.Webpack打包如何性能优化?


1.Vue中动态路由的实现思路?

  1. 在路由配置文件中,定义一个动态路由路径,例如:/user/:id;
  2. 在组件中,使用$route.params.id获取动态路由参数;
  3. 在组件中,根据获取到的参数id,展示不同的内容;

2.Vue的路由守卫是如何做到拦截的?

Vue的路由守卫是通过Vue Router提供的导航守卫来实现的。导航守卫分为全局守卫、路由独享守卫和组件内守卫。在导航到某个路由前,会按照顺序依次执行全局守卫、路由独享守卫和组件内守卫。在这些守卫中,可以进行路由拦截、重定向、取消跳转等操作。具体实现方式如下:

  1. 全局守卫:通过Vue Router提供的beforeEach函数实现;
  2. 路由独享守卫:在路由配置文件中,通过beforeEnter函数实现;
  3. 组件内守卫:在组件中,通过beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave等函数实现。

3.Ajax的响应状态readyState有哪些?分别什么意思?

Ajax的响应状态readyState共有5个状态码,分别是0、1、2、3、4,具体意思如下:

0:请求未初始化

1:服务器连接已建立

2:请求已接收

3:请求处理中

4:请求已完成,且响应已就绪

4.React中循环渲染元素key的作用?

在React中,循环渲染元素时,需要为每个元素添加key属性,key属性的作用是唯一标识该元素,如果不添加key属性,会出现渲染错误的情况。在React中,每个元素都有自己的状态,当元素状态发生变化时,React会根据key属性来判断哪些元素需要更新,哪些元素需要重新渲染。

5.Js原生方法重写怎么实现?

可以通过prototype属性来重写Js原生方法,例如重写Array的push方法:

Array.prototype.push = function(item) {
  console.log(item);
  Array.prototype.push.call(this, item);
}

6.销毁生命周期在什么时候使用?项目中那用过?

在Vue和React中,组件的生命周期中有一个销毁阶段,可以通过beforeDestroy和componentWillUnmount函数来进行一些清理工作,例如清除定时器、取消网络请求等。

在项目中,我曾经使用过beforeDestroy函数来清除定时器。

7.项目中遇到跨域怎么处理的?为什么会存在跨域?

在项目中,如果需要从不同的域名或端口获取数据或资源,就会产生跨域问题。为了解决跨域问题,可以使用JSONP、CORS、代理等方式。其中,JSONP是通过动态添加

你可能感兴趣的:(面试,前端)