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

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

笔试

1. Watch and computed使用场景

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

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

2. params 和 query 区别
   • query 是正常的get 请求的参数传递
   • params是restful中的参数，可以理解为后台的参数。
3. 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三次握手。

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

5. 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 销毁实例

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

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

7. 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.

9. 箭头函数的用法和限制

   • 无法实现变量提升
   • 箭头函数无法创建this ，无法像function 那样 继承外层环境this 箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。
   • 箭头函数继承而来的this指向永远不变，即使它是从对象中的方法中调用也只能指向全局的window
   • 箭头函数没有 arguments 对象 但是可以用 rest 扩展运算符代替
   • 箭头函数函数无法做构造函数和它本身没有原型
   • call() apply() bind() 无法调整

10. 前端的安全策略

    • XSS
    • CSRF

11. 什么是高内聚低耦合
    内聚：每个模块尽可能独立完成自己的功能，不依赖于模块外部的代码。
    耦合：模块与模块之间接口的复杂程度，模块之间联系越复杂耦合度越高，牵一发而动全身。
    目的：使得模块的“可重用性”、“移植性”大大增强
    通常程序结构中各模块的内聚程度越高，模块间的耦合程度就越低