迈瑞医疗一面 2021年06月15日（一面挂）

一面技术面基本都答上了，面试官也夸我基础不错，就是vue方面的知识欠缺，项目实战比较少，可能是因为这个原因没通过一面吧，前期夯实基础的学习目标已经达到了，接下来要进入新的一轮技术提升了。下面凭借回忆总结出了部分面试题，也分享了自己的解答，希望能帮助一同在前端路上奔跑的你们。

1. 自我介绍

2. 实现垂直居中的方式

   1. 用flex布局，设置 align-items:center;
   2. 绝对定位设置 bottom:0;top:0;,margin:auto
   3. 绝对定位固定高度时设置 top:50%;margin-top:-50%
   4. 将显示方式设置为表格， display:table-cell,同时设置vertical-align:middle
   5. 如果是单行文本，则line-height:height

3. 选择器权重以及计算方式

   !important

   内嵌样式

   id选择器 0100

   类选择器/属性选择器/伪类选择器 0010

   标签选择器/伪元素选择器 0001

   相邻兄弟、子、后代、通配符选择器 0

4. 三种定位relative、absolute、fixed的区别

   三者相对的根元素不同

   relative 相对自身在标准流中的位置进行定位

   absolute 相对最近一级具有除static之外的父元素定位

   fixed 相对浏览器窗口进行定位

5. 对盒模型的理解,盒子模型用使用哪个属性定义

   盒子模型构成：内容、内边距、边框、外边距

   IE盒子模型：width包含内容、内边距、边框

   标准盒子模型：width只包含内容宽度

   通过修改 box-sizing:content-box 实现标准盒子

   box-sizing:border-box 实现IE盒子

6. 画三角形

   回答的不好

   主要用到border属性

   把元素的宽高设置为0，然后设置 border:50px solid transparent，再设置 border-top-color:red

7. 知道rem吗？

   相对根元素字体大小

8. 对图标的使用？阿里图标输出的是哪种文件类型

   没答上

   fontIcon/woff/ttf

9. 清除浮动的方法

   1. 给父级添加height属性
   2. 在最后一个浮动元素的后面添加一个空的div标签，并添加clear:both属性
   3. 给包含浮动元素的父元素添加overflow:hidden或者overflow:auto
   4. 使用 :after伪元素

10. 对flex布局的理解

    flex布局是css3新增的一种布局方式，可通过将一个元素的display属性设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平，一个是与主轴垂直。

11. 如何快速查一个属性的兼容性

    回答了MDN文档查找，但面试官说还有更快捷的方法，网上搜索没找到其他方法

12. JavaScript的数据类型有哪些

    undefined、null、Boolean、Number、String、Object、Symbol、BigInt

13. 讲一下作用域和作用域链，最小的作用域

    作用域包括全局作用域、函数作用域、eval作用域

    1. 全局作用域：定义在函数外层、未声明直接赋值的变量、所有window对象的属性都拥有全局作用域。缺点：过多的全局作用域变量会污染全局命名空间，容易引起命名冲突

    2. 函数作用域：声明在函数内部的变量，一般只有固定的代码片段可以访问到

14. 什么是事件冒泡

    冒泡：事件由子元素传递到父元素的过程

    捕获：事件由父元素传递到子元素的过程

15. 跨域是什么，如何解决跨域

    协议、域名、端口号不同就是跨域

    解决方法：

    1. 通过JSONP，利用script标签没有跨域限制的漏洞，通过<script>标签指向一个需要访问的地址并提供一个回调函数来接收数据

       缺点：简单且兼容性不错，但只限于get请求

    2. CORS 跨域资源共享，通过在服务器设置 Access-Control-Allow-Origin来实现，该属性表示哪些域名可以访问资源

    3. document.domian:只能用于主域名相同的情况下

    4. postMessage跨域：是HMTL5中XMLHttpRequest Level2中的API，是window属性之一

16. 深拷贝

17. 讲一下Ajax

    在客户端与服务端之间加了一个中间层，通过XmlHttpRequest对象来向服务器发起异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面，使用户操作与服务器响应异步化。

    优点：

    • 通过异步模式，提升了用户体验
    • 优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了带宽占用
    • Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下服务器负载
    • Ajax可实现动态不刷新（局部刷新）

    缺点：

    • Ajax暴露了与服务器交互的细节
    • 对搜索引擎的支持比较弱
    • 不容易调试

18. 讲一下闭包，闭包的缺点

    定义：闭包是能够读取其他函数内部变量的函数，是将函数内部和函数外部连接起来的一座桥梁。

    作用：可以读函数内部的变量；让这些变量的值始终保持在内存中

    缺点：

    1. 会使函数中的变量都保存在内存中，内存消耗大，滥用闭包会造成网页的性能问题，在IE中可能导致内存泄露。（在退出函数前，将不使用的局部变量全部删除）
    2. 闭包会在父函数外部，改变父函数内部变量的值。所以如果把父函数当做对象使用，把闭包当作它的公共方法，把内部变量当作它的私有属性，这时一定要特别小心，不能随便改变父函数内部变量的值。

19. 怎么打断点调试

    用浏览器打开页面，按F12打开开发者工具，打开sources，找到要调试的js文件，在行号上单击一下就可以设置断点，然后刷新浏览器，执行就会停在断点处

20. 接触过vue吗？讲一下

21. 父组件向子组件传递数据的方法，父组件如何使用子组件的属性方法（组件通信）

    （1）父子组件间通信
    子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
    通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
    使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
    （2）兄弟组件间通信
    使用 eventBus 的方法，它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。
    通过 $parent/$refs 来获取到兄弟组件，也可以进行通信。
    （3）任意组件之间
    使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。

    如果业务逻辑复杂，很多组件之间需要同时处理一些公共的数据，这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ，vuex 的思想就是将这一些公共的数据抽离出来，将它作为一个全局的变量来管理，然后其他组件就可以对这个公共数据进行读写操作，这样达到了解耦的目的。

22. v-if和v-show的区别

    手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

    编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

    编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；

    性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

    使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

23. 讲一下vue的生命周期

    vue 实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载DOM，渲染、更新、卸载等一系列过程

    beforeCreate（创建前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能访问到data、computed、watch、methods上的方法和数据。

    created**（创建后）** ：实例创建完成，实例上配置的 options 包括 data、computed、watch、methods 等都配置完成，但是此时渲染得节点还未挂载到 DOM，所以不能访问到 $el 属性。

    beforeMount（挂载前）：在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。

    mounted（挂载后）：在el被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html 页面中。此过程中进行ajax交互。

    beforeUpdate（更新前）：响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实 DOM 还没有被渲染。

    updated（更新后） ：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时，组件 DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

    beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例仍然完全可用，this 仍能获取到实例。

    destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

24. 讲一下cookie，那常用的数据存储有哪些方法

    是最早提出的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，cookie就出现了。cookie大小只有4kb，是一种纯文本文件，每次发起Http请求都会携带cookie

    特性：

    1. 一旦创建成功，名称就无法修改
    2. 是无法跨域名的，这是由cookie的安全性决定的，这样就能阻止非法获取其他网站的cookie
    3. 每个域名下的cookie数量不能超过20个，每个cookie大小不能超过4kB
    4. 有安全问题，如果cookie被拦截了，就可获得session的所有信息，即使加密也于事无补，无需知道cookie意义，只有转发就能达到目的
    5. cookie在请求一个新的页面时会被发送出去

    使用场景：

    1. cookie结合session使用，将sessionId存储到cookie中，每次发请求都会携带这个sessionId，这样服务端就知道是谁发起请求，从而响应相应的信息
    2. 可用来统计页面的点击次数