2020前端面试经历 - 笔试 9/2

「爱情、让人受尽委屈。」 2022-12-03 09:10 182阅读 0赞

面试 深圳某港资金融企业 （未）

### 笔试 ###

1.  Watch and computed使用场景

watch: 用于记录data 数据变化的过程，因为每个数据都有可能在计算中频繁改变，但是只用于读取和写入无法实时记录和处理数据变化过程，而且针对复杂结构的数据，它还能用「deep」属性针对性处理；有前后值对比可以更方便解决数据变化过程。

computed: 有点像 methods 但是它有缓存计算功能，当computed 内部依赖的其他变量，或者存在复杂数据处理的时候，并且对数据维护比较麻烦的时候，需要用到它

1.  params 和 query 区别
    
     *  query 是正常的get 请求的参数传递
     *  params是restful中的参数，可以理解为后台的参数。
2.  Http 的三次握手

*  第一次握手  
    建立连接。客户端发送连接请求报文段，将SYN位置为1，Sequence Number为x；然后，客户端进入SYN\_SEND状态，等待服务器的确认；
 *  第二次握手  
    服务器收到SYN报文段。服务器收到客户端的SYN报文段，需要对这个SYN报文段进行确认，设置Acknowledgment Number为x+1(Sequence Number+1)；同时，自己自己还要发送SYN请求信息，将SYN位置为1，Sequence Number为y；服务器端将上述所有信息放到一个报文段（即SYN+ACK报文段）中，一并发送给客户端，此时服务器进入SYN\_RECV状态；
 *  第三次握手  
    客户端收到服务器的SYN+ACK报文段。然后将Acknowledgment Number设置为y+1，向服务器发送ACK报文段，这个报文段发送完毕以后，客户端和服务器端都进入ESTABLISHED状态，完成TCP三次握手。

1.  Vuex的使用方式  
    vuex 引入 State、Getter 的概念对状态进行定义；使用Mutation 和 Action 对状态进行变更，引入 Module 对状态进行模块化分割；引入插件对状态进行快照，记录以及追踪；提供了 mapState、mapGetters、 mapActions、 mapMutations 辅助函数方便开发者在 vue 中处理store
2.  Vue生命周期

*  实际上是对象的生命周期
    
    经历过程： 初始化，运行中，销毁
    
    详细：开始创建，初始化数据，编译模版，挂载DOM , 渲染→ 更新 → 渲染，销毁
    
    **beforeCreate** 初始化事件methods，data,wacth,computed
    
    **created** Vue 实例创建成功，初始化props，可以使用data,watch…,绑定数据观察
    
    **beforeMount** 判断 el 参数是否存在，存在就调用$mount,首次调用 render 函数，目的是为了把template 变成函数
    
    **mounted** 实例挂载到DOM上,渲染真实的 DOM ，此时
    
    **beforeUpdate** 在数据更新更新之前，可以访问更新前的DOM
    
    **update** \*\*\*\* 虚拟DOM 重新渲染和打补丁之后调用，组件DOM 已经更新
    
    **beforeDestroy** 销毁前使用，this 仍然可以使用，可以用来销毁定时器，解绑全局事件
    
    **destoryed** 销毁实例

1.  数组和字符串slice的用法

slice(start,end) 参数有两个，start为必填字段，end为选填字段，返回一个新的数组，包含从 start 到 end 的元素。

1.  const 是否能改变数组、对象  
    const 可以改变数组、对象。因为对象为引用类型，仅仅改变指针指向无法改变对象本身。

const arr = [1,2,3]
    arr[2]= 4
    console.log(arr)  // [1,2,4]
    const obj = {a:1,b:2}
    obj.a = 5
    console.log(obj)  // {a: 5, b: 2}
    const num = 1
    num = 2
    console.log(num)   //Uncaught TypeError: Assignment to constant variable.

1.  箭头函数的用法和限制
    
     *  无法实现变量提升
     *  箭头函数无法创建this ，无法像function 那样 继承外层环境this 箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
     *  箭头函数继承而来的this指向永远不变，即使它是从对象中的方法中调用也只能指向全局的window
     *  箭头函数没有 arguments 对象 但是可以用 rest 扩展运算符代替
     *  箭头函数函数无法做构造函数和它本身没有原型
     *  call() apply() bind() 无法调整
2.  前端的安全策略
    
     *  XSS
     *  CSRF
3.  什么是高内聚低耦合  
    内聚：每个模块尽可能独立完成自己的功能，不依赖于模块外部的代码。  
    耦合：模块与模块之间接口的复杂程度，模块之间联系越复杂耦合度越高，牵一发而动全身。  
    目的：使得模块的“可重用性”、“移植性”大大增强  
    通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低