前端总结面试题（每日更新）第一天

面试第一天

vuex的属性

1. state：声明定义数据
2. getters：存放有依赖关系的数据，相似于computed计算属性
3. mutation：同步的修改state中的数据
4. actions：异步修改数据
5. modules：让每个模块都有本身的state，getters，mutation，actions

vue双向绑定的原理

Vue实现双向绑定的原理就是利用了Object.defineProperty()这个方法从新定义了对象获取属性值（get）和设置属性值（set）的操做来实现的。

vue全家桶有什么（❎）

1. Vue-cli项目构建工具
2. vue-router 路由
3. vuex状态管理
4. axios http 请求工具
5. webpack

vue常见的一些指令

1. v-for 如今要配合 :key使用
2. v-if 是否渲染这个标签
3. v-bind 简写:
4. v-show display控制 none/block
5. v-else 配合v-if使用
6. v-on 简写@

vue中的data为何是返回的函数

由于一个组件是能够共享的，但他们的data是私有的，因此每一个组件都要return一个新的对象，返回一个惟一的对象，不要和其余组件共用一个对象

合并数组的方法

1. concat

var a = [1,2,3]
var b = [4,5,6]
var c = a.concat(b)  //c = [1,2,3,4,5,6]
复制代码

2. apply

var a = [1,2,3]
var b = [4,5,6]
var c = a.push.apply(a,b)
复制代码

3. 数组合并去重

let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr = arr1.concat(arr2) //合并数组
let arrNew = new Set(arr)  //经过set集合去重
Array.from(arrNew)  //将set集合转化为数组
复制代码

垂直居中的方式（❎）

1. absolute+transform：绝对定位+转换

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    rigth: 50%;
    transfrom: translate(-50%，-50%)
}
复制代码

2. flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center; //水平居中
    align-items: center;   //垂直居中
}
复制代码

面试次日

call,apply,bind的区别，并实现方法（❎）

1. call和apply都是为了解决改变this的指向。做用都相同，只是传参的方式不一样。除了第一个参数外，call能够接受一个参数的列表，apply只接受一个参数的数组

call的实现思路

//call的实现思路
Function.prototype.myCall = function (context){
  if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
  var context = context || window
  //给context添加一个属性
  context.fn = this
  //经过参数伪数组将context后面的参数取出来
  var args = [...arguments].slice(1)
  var result = context.fn(...args)
  //删除 fn
  delete context.fn
  return result
}
复制代码

apply的实现思路

//apply的实现思路
Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
    var context = context || window
    //为context添加一个属性
    context.fn = this
    var result 
    //判断是否存在第二个参数
    //若是存在就将第二个参数也展开
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn
    return result
}
复制代码

bind的实现思路：bind返回了一个函数，对于函数来讲有两种调用方式，一种是直接的调用，一种是经过new的方式

Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    const _this = this 
    const args = [...arguments].slice(1)
    //返回一个函数
    return function F () {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        return _this.apply(context,args.concat(...arguments))
    }
}
复制代码

vue中为何使用axios

vue是虚拟DOM操做的，JQuery.ajax和都须要操做DOM，官方不推荐，并且axios自己就能够解决回调地狱的问题

cookie和session和window.localstore的区别（❎）

loaclStorage声明周期是永久的，存放数据通常为5MB；sessionStorage仅在当前会话下有效，关闭页面或者浏览器后被清除，存放数据大小通常为5MB；cookie具备极高的扩展性和可用性，存放数据大小为4k左右，有个数限制，通常不能超过20个。localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

new操做的过程（❎）

在调用new的过程当中会发生四件事：

1. 新生成了一个对象
2. 连接到原型
3. 绑定this
4. 返回新对象 其实咱们彻底能够本身实现一个new的过程

function createNew() {
  let obj  = {}
  let Sunday  = [].shift.call(arguments)
  obj.__proto__ = Sunday.prototype
  let result = Sunday.apply(obj,arguments)
  return result instanceof Object ? result : obj
}
复制代码

vue-router的原理（❎）

vue-router路由提供了两种路由模式：hash模式和history模式。

• hash模式：ue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。
• history模式：若是不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面

vue组件通讯

组件通讯通常分为三种：

1. 父子组件通讯

• 父组件经过props传递给子组件数据，子组件经过$emit发送数据传递数据，子组件不能修改父组件的数据，父子组件通讯属于典型的单向数据流。

2. 兄弟组件通讯

• 对于这种状况能够经过查找父组件中的子组件实现，也就是 this.children，在 $children 中能够经过组件 name 查询到须要的组件实例，而后进行通讯。

3. 跨多层级组件通讯 待定