前端社招 面经九

一、vue生命周期各个钩子函数？分别做什么？

1.Vue实例需要经过创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程，这个过程就是Vue的生命周期，Vue中提供的钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

2.常用
①created使用场景（操作数据）：

• 发送ajax请求（调用请求数据的方法）；（更推荐在这里发送ajax请求）
• 操作data中的数据和methods里的方法；
• 获取本地数据。

②mounted使用场景：

• 操作DOM（推荐在这里操作DOM）

二、this.$nextTick()了解吗？

三、vue组件之间的通讯了解吗？

• 父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
• 兄弟组件传值：非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。
• 其他的：vuex、$parent / $children（通过parent / children可以获父 / 子组件实例，然后通过这个实例就可以访问父 / 子组件的属性和方法）与 ref（如果在普通DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例）。

①父组件给子组件传值：props

②子组件向父组件传值：通过事件


③兄弟组件传值：定义个公共的公共实例文件bus.js，作为中间仓库来传值

④provide和reject：为高阶组件提供了便利的数据传递
vue中provide和reject详解

四、ES6了解什么？

ES6新特性
（1）新增了声明变量的关键字let和const

var、let和const的区别：
①var声明的变量会挂载在window上，而let和const声明的变量不会
②var声明变量存在变量提升，let和const不存在变量提升
③let和const声明形成块作用域，而var声明的变量作用域为函数作用域或全局作用域
④同一作用域下let和const不能声明同名变量，而var可以
⑤const一旦声明必须赋值,不能使用null占位；声明后不能再修改；如果声明的是复合类型数据，可以修改其属性
⑥暂存死区

var a = 100;
if(1){
    a = 10;
    //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a，
    // 而这时，还未到声明时候，所以控制台Error:a is not defined
    let a = 1;
}

（2）解构赋值
解构赋值是新增的语法，能够方便我们为变量赋值。ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。


总结：

• 解构赋值就是把数据结构分解，然后给变量进行赋值
• 如果结构不成功，变量跟数值个数不匹配的时候，变量的值为undefined
• 数组解构用中括号包裹，多个变量用逗号隔开，对象解构用花括号包裹，多个变量用逗号隔开
• 利用解构赋值能够让我们方便的去取对象中的属性跟方法

（3）箭头函数

• 箭头函数中不绑定this，箭头函数中的this指向是它所定义的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁
• 箭头函数的优点在于解决了this执行环境所造成的一些问题。比如：解决了匿名函数this指向的问题（匿名函数的执行环境具有全局性），包括setTimeout和setInterval中使用this所造成的问题
  （4）模板字符串
  可以使用反引号``来进行字符拼接。${}
  
  （5）函数传参可以有默认值

function printText(text = 'default') {
  console.log(text)
}

（6）for…of

• for of遍历的是键值对中的值
• for in遍历的是键值对中的键
  （7）class类
  （8）导入导出
• 导入improt
• 导出export default
  （9）promise
  用于更优雅地处理异步请求。
  
  （10）async/await
  比promise更好的解决了回调地狱。
  （11）Symbol
  新的基本类型
  （12）Set集合
  
  （13）展开运算符和剩余运算符(用…表示)
  

五、js相关的，原型链？闭包？

（1）原型链
概念：每个对象都可以有一个原型，这个原型还可以有它自己的原型，以此类推，形成一个原型链。
什么时候用：当我们查找特定属性的时候，我们先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去原型对象的原型对象里去寻找…这个操作就是被委托在整个原型链上。
如果没有找到会一直找下去吗：原型链是有终点的，不会一直找下去。当Object.prototype.proto === null时，查找结束，返回undefined。
（2）闭包

• 闭包就是能够读取其他函数内部变量的函数。
• 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会在父方法调用后被自动清除。
• 闭包避免了使用全局变量，使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
• 闭包有三个特性：①函数嵌套函数②函数内部可以引用外部的参数和变量③参数和变量不会被垃圾回收机制回收

六、call、apply、bind

JavaScript中call、apply、bind方法详解

七、说说vue怎么封装组件

vue如何封装一个组件

八、跨域

前端跨域问题解决方案

九、前端安全性考虑过吗

web前端开发中一些常见的安全性问题