前端面试准备材料

183 阅读12分钟

1路由懒加载的功能:路由懒加载也叫作延迟加载,使用懒加载可以减少我们第一次打开项目首页的时间,不至于页面出现长时间的白屏,即使添加了开场动画也不好看,而使用懒加载的话就可以减少这样的情况发生,优化用户的体验,如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

  1. vue异步组件
  2. es提案的import()
  3. webpack的require,ensure()

2,什么是package.json

1、通过命令生成的vue项目就包含package.json,这是vue项目的表述文件,依赖包就是根据package.json来安装的。

面试项目重点: 在项目里遇到什么大坑? 把思路理清说出来

我在团队中有什么突出的亮点说出来。

v-model实际上时语法糖,下面就是语法糖的构造过程。

而v-model自定义指令下包裹的语法是input的value属性、input事件

  • input属性绑定——inputV变量,也就是将值传给input;
  • input事件,该事件在input的值inputV改变时触发,事件触发时给inputV重新赋值,所赋的值是$event.target.value,也就是当前触发input事件对象的dom的value值,也就是该input的值。

这就完成了v-model的数据双向绑定。

我们会发现elementUI的所有自定义组件都适用v-model这一语法糖,除了input之外,select、textarea也用到这一语法糖。
  • text和textarea元素:v-model使用value属性设置初始值并绑定变量input事件更新值
  • checkbox和radio元素:v-model使用checked属性设置初始值并绑定变量,change事件更新值;
  • select元素:v-model使用value属性设置初始值并绑定变量,change事件更新值;

原型原型链:1,有了一个函数对象,就有了原型。切记这一点,讨论原型,不能脱离了函数,它是原型真正归属的地方,原型只是函数的一个属性!。2,知道了原型的概念,我们再看看原型链。一般面试官问简单介绍一下原型链时,标准答案基本是:“每个对象都有一个属性_proto_指向它的原型,最终指向null,当访问对象上的属性时,如果找不到,就会寻找_proto_上有没有,找到就返回该属性,否者返回undefined,这样形成的链表型数据结构就是原型链”。

Event Loop是什么

event loop是一个执行模型,在不同的地方有不同的实现。浏览器和NodeJS基于不同的技术实现了各自的Event Loop。

tcp断开连接的四次挥手:1,客户端向服务器请求断开连接 2,服务器表示已经收到了客户端断开连接的请求 3,服务器收到客户端断开连接且已经没有数据需要发送给客户端的时候向客户端请求断开连接 4,服务器表示已经收到了客户端断开连接的请求 结果:至此服务器到客户端的连接关闭 客户端到服务器的连接也关闭了 四次挥手保证了双端正确的断开连接

解释一下生命周期:Vue实例从创建到销毁的过程就是生命周期,就是指从创建、初始化数据、编译模板、挂载DOM到渲染、更新渲染、销毁等一系列过程,他主要分为8个阶段,创建前后、载入前后、更新前后、销毁前、销毁后、以及一些特殊场景的生命周期,接下来我说一下这8个阶段分别做了什么事情。

image.png Created和 mounted的区别: Created:是在组件实例一旦创建完成的时候立即调用,这时候页面dom节点并未生成
Mounted :是在页面dom节点渲染完毕之后就立即执行的created的触发时机要比mounted更早一些
两者的相同点都是可以拿到实例对象的属性和方法,但是如果放在mouted请求有可能导致页面闪动,但如果在页面加载完成则不会会出现此情况。

$nexttick的作用: 1、问题 父组件向子组件传值,父组件值更新,调用子组件方法,方法中拿到的还是旧值。 2、原因 在父组件值改变的方法中,修改传递给子组件的值,直接调用子组件的方法,此时,子组件的dom还未更新,需要等整个父组件(包含子组件)更新完毕后再调用子组件的方法。 3、解决办法 在父组件改变值的方法中使用:

this.nextTick(()=>this.nextTick(()=>{ this.refs.子组件使用标签身上ref的值.子组件的方法() }), 1 2 3 等整个组件DOM更新完毕后(此时子组件接收的父组件的值也更新了)再调用子组件的方法,此时,子组件的方法使用的就是父组件传递的最新的值。

keepalive作用:keep-alive 是 vue 内置的组件,用 keep-alive 包裹组件时,会缓存不活动的组件实例,而不是销毁他们。主要用于保存组件状态或避免重复创建。避免重复渲染导致的性能问题。

特点

  • 它是一个抽象组件,自身不会渲染一个 dom 元素,也不会出现在组件的父组件链中。
  • 当组件在 keep-alive 内被切换,组件的 activated 和 deactivated 这两个生命周期钩子函数会被执行。组件一旦被 缓存,再次渲染就不会执行 created、mounted 生命周期钩子函数。
  • 要求同时只有一个子组件被渲染。
  • 不会在函数式组件中正常工作,因为它们没有缓存实例。

### 1.1. 认识插槽slot

在开发中,我们会经常封装一个个可复用的组件:

  • 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定的div、span等等这些元素;
  • 比如某种情况下我们使用组件希望组件显示的是一个按钮,某种情况下我们使用组件希望显示的是一张图片;
  • 我们应该让使用者可以决定某一块区域到底存放什么内容;

举个栗子:假如我们定制一个通用的导航组件 - NavBar

  • 这个组件分成三块区域:左边-中间-右边,每块区域的内容是不固定;
  • 左边区域可能显示一个菜单图标,也可能显示一个返回按钮,可能什么都不显示;
  • 中间区域可能显示一个搜索框,也可能是一个列表,也可能是一个标题,等等;
  • 右边可能是一个文字,也可能是一个图标,也可能什么都不显示;

这个时候我们就可以来定义插槽slot:

  • 插槽的使用过程其实是抽取共性、保留不同;
  • 我们会将共同的元素、内容依然在组件内进行封装;
  • 同时会将不同的元素使用slot作为占位,让外部决定到底显示什么样的元素;

es6常见语法: 一,var let const区别

  1. var 声明的变量作用域在所处的函数内,let 和 const 声明的变量作用域在所处的大括号内。
  2. var 声明的变量存在变量提升现象,let 和 const 声明的变量不存在变量提升现象。
  3. const 声明变量时必须要赋值,赋值之后不能再重新赋值。

二,箭头函数 ...

三,解构赋值:解构就是把数据结构进行分解,然后赋值给定义的变量

四,set:Set 是 ES6 提供的一种数据结构,它和数组很像,但是它里面的数据是不可重复

五,模板字符串

**如何理解重排和重绘: 重排就是当页面的结构发生变化了,就会重排,比如改变变字体的大小,增删 DOM 元素这样的。重绘就是页面结构没有变化,只是外观变了,比如改了一下字体颜色、背景颜色这样的。就只会发生重绘。重排一定会导致重绘,重绘不一定导致重排

解释下rem:rem是css3的一个相对单位,rem可以成比例的调正字体的大小。用途:在需要适配多端设备的话使用rem

媒体查询 不同端的设备下,在css文件中,1px所表示的物理像素的大小是不同的,因此通过一套样式,是无法实现各端的自适应。由此我们联想:

如果一套样式不行,那么能否给每一种设备各一套不同的样式来实现自适应的效果?

答案是肯定的。

使用@media媒体查询可以针对不同的媒体类型定义不同的样式,特别是响应式页面,可以针对不同屏幕的大小,编写多套样式,从而达到自适应的效果。

BFC 全称:Block Formatting Context, 名为 "块级格式化上下文"。

W3C官方解释为:BFC它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,Block Formatting Context提供了一个环境,HTML在这个环境中按照一定的规则进行布局。

简单来说就是,BFC是一个完全独立的空间(布局环境),让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢,BFC可以看做是一个CSS元素属性

什么是跨域: 了解跨域首先要了解同源策略,同源策略是指两个url地址的域名,端口和协议相同,不相同的话就形成了跨域。跨域简单来说就是我请求的接口地址和打开的网址不同源,就是跨域 解决跨域有几种方法,1,cors让后端设置项目头。2,jsonp,利用前端的script标签发送请求没有跨域限制来获取数据 。限制:利用script标签发送请求只支持get请求,不支持post请求。3,nginx反向代理 4,proxy(只能在本地开发环境中生效,上线就失效了,dist文件直接放到后端服务器中)

vue双向绑定原理:当生成一个vue实例时,会先去用object.defineProperty()来截取属性的getter和setter,当数据变化时会触发setter,setter会触发dep订阅搜集相对于属性的所有更新方法。

最近的项目介绍: 我最近的做的项目是是个后台管理系统,这个后台管理系统主要是对电商平台的数据展示数据维护,是给内部人员开发的一个管理平台,内容人员可以对里面的商品进行添加删除操作,可以添加用户和修改权限的操作。 这个项目所用到的技术栈有 vue ,vue-router,axios,vuex,echarts和elementui , 我在这个项目里主要是负责登录模块,用户权限模块和商品管理模块,登录模块:用户在登录的时候输入账号和密码通过请求登录接口返回token和用户信息,返回的token值我是放在了sessionStorage中。在这个项目里对axios进行二次封装,其中封装了axios请求拦截器axios.interceptors.request.use ,在请求拦截器中将登录获取到的token值保存到请求头中以方便每天请求都携带token,和响应拦截器axios.interceptors.response.use以便于对服务器返回的数据进行修改操作。在用户权限模块我是先获取用户权限列表渲染用户权限,然后实现分配用户权限的功能,利用elementui的el-tree组件对用户的权限以树状图的形态进行展示,并根据需求封装了递归函数,对每个用户的权限进行递归循环处理,将用户权限目录转换成树形结构的数据展示出来。我还负责项目的商品分类模块,首先请求商品分类的接口获取数据,利用elementui的级联选择器cascader对获得的数据进行渲染,通过cascader的props属性对渲染规则进行配置,使v-model绑定分类id,当点击分类时携带指定分类的id请求接口获取分类的动态参数和静态属性的分类。

vue的双向绑定原理: vue数据的双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持,在数据变化时发布消息给订阅者,触发相应的监听回调。也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变;

EventBus的简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex作为状态管理中心,将通知的概念上升到共享状态层次。

for in 和 for of 简单来说就是它们两者都可以用于[遍历],不过for in遍历的是数组的索引(index),而for of遍历的是数组元素值(value)

BFC:块级格式化上下文

理解:BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性, 当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.

防抖节流: 防抖:防抖是指在事件触发n秒后再执行[回调],如果在n秒内再次被触发,则重新计算时间。 2、节流:节流是指如果持续触发某个事件,则每隔n秒执行一次。

em、rem的区别:

rem与em都是相对单位,我们使用它们的目的就是为了适应各种手机屏幕。

rem是根据html根节点来计算的,而em是继承父元素的字体。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

v-if用在只显示一次的地方 比如一套系统 有管理员有用户 登录完呈现不同的状态。 v-show比如登录框里面的校验密码是否正确的提示框就应该v-show

Diff算法是一种对比算法。对比两者是旧虚拟DOM和新虚拟DOM,对比出是哪个虚拟节点更改了,找出这个虚拟节点,并只更新这个虚拟节点所对应的真实节点,而不用更新其他数据没发生改变的节点,实现精准地更新真实DOM,进而提高效率

路由用户鉴权:前端有一份动态路由表,等到用户登录拿到用户的角色之后根据当前登录用户的角色去筛选出可以访问的路由,形成一份定制路由表,然后动态挂载路由。这样做的好处就是,前端每开发一个页面不需要让后端再去配一下路由和权限了,

通过带有 token 请求头的请求方法,后端可以判断到是哪一个用户,前端也可以通过获取权限接口获得该用户的权限列表,根据权限列表做一份路由映射表,如果后端返回的数据结构与前端的路由设置的数据结构不同,此时还需编写此映射路由的业务功能函数。如果该用户拥有此路由权限,则通过在全局路由监控中 router.beforeEach 进行 router 中的 addRoutes 方法将有权限的路由配置添加到路由当中,侧边栏也可根据路由列表中的 meta 字段中关键字的判断进行相应的渲染。如果权限的颗粒度小到一个按钮,则可根据后端返回的权限列表映射出的权限参数,通过 v-if 进行判断该功能组件是否渲染。
在路由管理中通过 router.beforeEach 钩子中判断当前的路由权限是否为空,是的话则可执行获取权限路由的接口:

CDN 的工作原理 就是将源站的资源缓存CDN各个节点上,当请求命中了某个节点的资源缓存时,立即返回客户端,避免每个请求的资源都通过源站获取,避免网络拥塞、缓解源站压力,保证用户访问资源的速度和体验

session,token,cookie的区别和作用:

image.png

echars基本图解: 1653320903(1).png