中高级前端面试题总结第一期

写在前面

首先说明 不是水文，我只是希望通过面试题的形式给你们看一些看似比较牛逼的概念，其实很简单的东西，我最近在写vue3的项目，所以等我写好之后我再更新vue3的教程，虽然早就想更新了，但是一直不是没有一个拿得出收的v3项目嘛，我也很着急的嘛，写完之后我就更新v3+vite+antdv的文章。

Vue中的组件和插件有什么区别

• 定义不同：

vue中组件是指.vue结尾的文件，一个合格的组件具备相对单一的功能，具有复用性强，耦合度低的特点，名字叫做components，
vue中的插件是指用来扩展vue本身功能的一些工具，比如vue-router、babel等或者是一些第三方的插件等，个人理解指令也是插件的一种，只是一些内置插件而已，名字叫做plugin

• 注册方式不同：

vue组件的注册方式有两种，一种是在当前页面进行注册，也叫作局部注册，第二种是在mian.js中注册，也叫作全局注册
vue插件则是直接挂载到vue实例上，也就是vue.prototype上实现的，最后是通过Vue.use（插件名字）进行注册

• 作用域不同：

vue组件一般是作用域某一块的功能业务，且组件是可以反复使用的
vue插件则是直接作用域vue本身，或者是项目全局，插件只能注册一次，不可以重复注册

• 实现方式不同：

vue组件直接就是一个vue文件，或者是内部的使用Vue.component进行直接添加的template代码块
插件则是暴露出来一个install方法，两个参数，第一个参数是Vue的构造器，第二个参数是可选对象

Vue实例挂载的过程中发生了什么

• new Vue的时候回调用_init方法

• 调用$mount进行页面的挂载

• 挂载的时候主要是通过mountComponent方法

• 定义updateComponent更新函数

• 执行render生成虚拟Dom

• _update将虚拟DOM生成真是DOM结构，渲染到页面上

Vue组件之间的通信方式有哪些

搞明白这个问题，首先要明白的是什么是组件通信，组建通信就是不同的组件之间通过一些方式进行数据的传递，那么既然是不同组件之间，就存在不同的关系，比如父子关系，兄弟关系，同根关系或者是毫无关系本身也是一种关系，这里就分别说一下不同关系组件之间传递的方式：

• 父子组件

方法一：通过props和emit进行参数的传递

方法二：通过$parent或者$root也可以

方法三：通过ref，

方法四：通过provide/inject进行参数传递

• 兄弟组件之间

方法一：EventBus：创建一个时间总线eventbus，兄弟组件通过$emit触发自定义事件，第二个参数作为传递的值

另一个组件通过$on进行监听自定义事件

方法二：通过vuex进行数据的传递

方法三：通过pinia进行数据的传递

• 同一个根组件

方法一：通过provide/inject传递数据

方法二：通过$root

• 毫无关系组件

方法一：vuex

方法二：pinia

Vue.observable简单介绍一下

可以简单的将他理解为一个可以被观察的方法，他可以让对象中的数据编程响应式的，我们前面说了关于非关系组件之间的通信可以通过的方式很多，其中包括了eventbus和vuex以及后面的pinia，其实只有eventbus是真正意义上的传递数据，另外两个都属于是一个存储类型的方式，那么observable其实也可以理解为一个小型的存储库，可以进行跨组件公用数据，理解了这里，应用场景就比较明显了，就是当我们需要公用数据的时候其实是可以考虑使用这种方法的

什么是虚拟dom，如何实现一个虚拟dom

虚拟DOM是根据页面上真实DOM映射出来的一个对象，他本身只是对真实DOM的抽象，使用对象的属性来描述节点，最后通过操作使虚拟DOM映射到真实DOM上，创建虚拟DOM是为了更好的将虚拟节点渲染到页面上，所以虚拟DOM对象的节点与真实节点是一一对应的，现在的框架react或者vue都有虚拟DOM的应用，他们通过diff算法，得出每一次页面更新做出来的最小单位的变化，进行更新，从而达到提升性能的目的。
这里不写代码，创建一个虚拟DOM的步骤是：构造子类构造函数Ctor- installComponentHooks安装组件钩子函数- 实例化vNode，这部分在vue源码中有

SSR解决了一个什么问题？怎么做SSR

SSR叫做服务端渲染，只是vue做了spa的服务端渲染，是做了一个改良的版本，通过ssr渲染的页面，需要通过客户端激活才可以实现交互，vuessr包含两部分，服务端渲染的首屏和包含交互的spa，解决了两个问题，一个是首屏加载缓慢的问题，另一个是有利于seo的优化

怎么理解Es6中出现的Map和Set

都是用来做数据处理的，初始化的值不一样，map是一个二维数组，而set则是一个一维数组，两者都不允许重复数据，map的键不可以被更改，但是对应的value是可以被更改的，set Key和value是同一个，set因为是唯一的，所以可以用来去重数据，因为返回的是一个类数组，所以需要Array.from进行转换为真数组，Map是键值对存在的，而set只有一个key他的key就是他的value,具体的细节可以移步到我的博客主页看详细的介绍

谈一下闭包以及问题

闭包是一种函数写法，js中变量的函数作用域导致我们在一个函数内部是无法访问另一个函数内部的成员变量的，但是通过闭包的写法，也就是在函数内部写另一个函数进行访问该函数内部的成员变量的过程就是闭包，闭包的一个很直接的作用就是扩大了成员变量的作用域，但是因为他是函数内部引用，所以也直接导致了js的内存监测机制无法进行检测，所以会造成内存泄漏的情况，所以在使用闭包的时候我们应该尽量的手动释放不需要的变量，尽量避免因为运行机制导致的内存泄漏

说一下BFC解决了什么问题

首先说一下BFC是指块级格式化上下文，说白了就是在文档流开辟一块独立空间，避免文档其他元素样式干扰，开启之后可以进行单独样式的设置，可以解决一些css设计上的缺陷，比如块级元素不包含浮动元素的缺陷，可以主动清除周围浮动元素，可以解决margin塌陷和重叠等问题

js里面的防抖和节流怎么实现的

首先防抖和节流都是为了提高页面性能进行的优化方案，首先说防抖，他一般是用在按钮操作上，比如我连续点击一个按钮，这个时候我可以设置一个延时，让点击事件按照我设置的事件之后执行，如果我不停的点击，那么我的时间就不听的重置，从而达到只会在我设置的时间之后执行的效果，避免事件反复高频的执行，进而提高页面的性能，节流一般是在页面滚动的时候，我们反复触发滚动事件的时候，我们可以设置比如2秒执行一次的这样一个效果，不管滚动的多快，最终都只是按照2秒一次的频率进行执行，这种事件的处理就叫做节流,实现方式都是通过设置延时进行处理，上文说过

说一下缓存机制

缓存是js为了处理用户使用体验设计出来的，es6之前只有cookie的使用，但是缺点比较明显，第一个是存储的内容比较少，第二个是设置太麻烦，需要setCookie等操作，过期时间也比较麻烦，之后出现了sessionStorage和localStorage，这两种是为了弥补之前cookie的缺陷出现的，他的存储空间增大到了4mb，完全可以支撑我们存储很多内容，但是sessionStorage是会话级别的存储，也就是当我们tag标签关闭的时候，他的内容也就没有了，但是localStorage是永久性存储，所以操作的时候需要进行一个手动清除，但是两种的存储方式都是一样的。

js的内存泄漏原理和解决方案

js的内存泄漏的原理是源于js的内存检测机制，在较早期的js版本，内存检测机制漏洞更多，这里说一下最新的内存监测机制，js是在全局执行上下文的时候进行假设一个root节点，然后所以的成员变量都是节点的子节点，每一次的js执行结束都会不定期的进行节点排查，有没有子节点和root毫无关系的节点，有的话，就属于需要释放的内存，也就是变量，那么得不到及时释放的没有用的节点就是造成内存泄漏的现象，这也是为什么闭包会产生内存泄漏的原因，因为内部的成员是不被root检测的，解决方式可以手动进行赋值null进行释放，也可以尽量写符合js检测机制的代码，闭包尽量少使用，或者使用的时候手动释放内存

什么是margin塌陷和margin重叠

margin塌陷是指外层div包含内层div的时候，当内层div设置margin-top的属性的时候，直接会出现外层偏移的现象就叫做margin塌陷
margin重叠值得是上下两个div，当给上面的div设置marginBottom，同时给下面的div设置marginTop的时候，他们的距离只会按照较大的那个进行设置，而不是相加的和，这个现象就叫做margin重叠

登录的时候涉及到哪些操作

登录信息的校验、记住密码的操作（提高用户体验）、登陆之前验证之前用户有没有记住密码的操作，有的话，需要获取缓存，避免用户重复输入、登录之后要记录授权信息、更新授权信息的过期时间、处理不同角色的路由文件

谈一下ES6新特性

比较多，挑几个说一下吧，展开符、解构赋值、箭头函数、generator函数、symbol属性等

写在后面

今天的面试题就更新到这吧，你们肯定又说我水文章了，其实不是的，我只是发现面试题的这个东西还是要看一下的，因为你在理解的过程中对你的成长还是很有帮助的，对你理解很多的代码写法也都是很有帮助的，所以不要说我水文，我在很用心的做！拜拜