web面试（基础，js,vue）2

1、VueX中的属性包含哪些？

Vuex是vue的状态统一管理管理机制。统一管理和维护各个Vue组件的可变化状态（数据）。

它的核心是5个属性：

1、state：Vuex的基本数据。用来存储变量。

2、getters：从基本数据中派生的数据，相当于是state计算属性。

3、mutations:提交更新数据的方法，必须是同步的（若是异步的需要使用action）。每个mutation都有一个事件类型type（string）和一个回调函数handler。handler是实际更改状态的地方。它将state作为第一个参数，将提交载荷作为第二个参数。

4、actions：和mutation的功能大致相同。不同的是：它提交的是mutation，而不是直接变更状态。它可以包含任意的异步操作。

5、modules：模化Vuex，使得每个模块都有自己的state，mutation，getter，action,使得结构清晰，方便管理。

2、单页面应用与多页面应用的区别？及其优缺点？

单页面应用：singlePage Web application。（SPA）。是指只有一个主页面的应用。浏览器一开始加载所有所需的html，js，css等资源，所有页面的内容包含在这个主页面中。单在写的时候还是分开写，在交互时由路由程序动态载入。单页面的页面跳转，仅需要刷新局部资源，多应用于pc端。

单页面应用的优点：响应快，用户体验好，服务器压力小。前后端分离。页面切换效果比较炫酷。参数仅在一个页面传。

缺点：导航不可用；初次加载耗时多，开发成本高

多页面应用：multiPage Web application。（MPA）一个应用中有多个页面，页面跳转时需要整个页面的刷新。

多页面应用的优点：可以采用导航路由跳转。开发成本底。

缺点：参数传递复杂，可通过路由带参传递，cookie，localStorage等方法。开发时重复代码多。

3、vue中子组件访问父组件的方式？

两种方式：

第一：子组件向父组件传递参数

子组件通过this.$emit('childHandler','我是向父组件传的参数‘）

例如：

//子组件中

...

//父组件中

第二：子组件访问父组件的方法

共有三种：

1、通过子组件直接在方法中调用：this.$parent.fatherHandlerName;

2、通过$emit触发一个父组件的事件，父组件监听这个事件就行。

//父组件中

...
fatherMethod(){
console.log('test');
}

//子组件中
点击试试
...
childMethod(){
this.$emit('fatherHandler')
}

3、父组件把方法传入子组件中。子组件通过props接受一个函数类型的参数（父组件的方法），从而实现调用。

//父组件中

...
fatherMethod(){
console.log('test')
}


//子组件中
点我试试
...

4、 vue的生命周期？

vue的生命周期可以总结为8个钩子函数(生命周期函数)。

1、beforeCreat

此时：vue的实例挂在元素$el和数据对象data都为undefined，还未初始化。

可以做：加Loading事件

2、created

此时：数据对象data的属性可访问，实例的挂载元素$el还是undefined。

可以做：结束Loading事件，请求初始化data中的数据，为渲染元素做准备。

3、beforeMount

此时：数据对象data和实例挂载元素$el都初始化完成，但是虚拟DOM节点中data.filter还没有替换。

可以做：nothing

4、mounted

此时：$el实例挂载完成,data.filter渲染完成

可以做：配合路由钩子使用

5、beforeUpdate

此时：data正在更新。

可以做：nothing

6、updated

此时：data在更新

可以做：可以配合watch进行监测。

7、beforeDestory

此时：组件销毁中。

可以做：nothing

8、destoryed

此时：组件销毁，没有事件监听以及dom绑定，但是dom依然存在。

在执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。所以对于实时显示的通知型组件，在他destroyed之前，我们必须手动removeChild()删除该节点；否则，DOM节点还是存在，影响浏览器性能。
可以做：nothing

5、vue中的router路由和location.href有什么区别？

location.href='/url' :简单方便但是刷新了页面。

引入router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，节省了dom消耗。

6、数组去重？

第一：使用数组的indexOf并通过for循环来实现。

它是最简单的数组去重方法（indexOf方法）

实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中

var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}

第二：使用sort排序筛选出不一样的元素。排序后相邻去除法 

实现思路：给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值。

function unique2(arr){
  arr.sort();
  var hash=[arr[0]];
  for (var i = 1; i < arr.length; i++) {
     if(arr[i]!=hash[hash.length-1]){
      hash.push(arr[i]);
     }
  }
  return hash;
}

第三：Es6的set方法

基本思路：ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。

function unique3(arr){
  var x = new Set(arr);
 return [...x];
}

7、js常用的排序？（基本的算法能力）

冒泡排序：最简单，也最慢，貌似长度小于7最优
插入排序： 比冒泡快，比快速排序和希尔排序慢，较小数据有优势
快速排序：这是一个非常快的排序方式，V8的sort方法就使用快速排序和插入排序的结合
希尔排序：在非chrome下数组长度小于1000，希尔排序比快速更快
系统方法：在forfox下系统的这个方法非常快

8、ES6中的原型链的继承大概讲一下。

原型链
访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链。
__proto__是js对象的属性方法得以继承共享的基石。
实例，构造函数，原型，这三者构成一个原型单元。
我们可以通过把原型链整张图拆解为一个个原型单元，理解原型链

此外：

1. 所有的构造函数是Function的实例。直接创建的自定义构造函数(非继承另一个自定义构造函数)的原型是Object的实例。内置构造函数的原型也是Object的实例。
2. 原型链截止于Object.prototype的__proto__， 该值定位null。
3. 每个对象都有__proto__属性，这个属性值是一个对象，指向构造函数函数的prototype属性，我们称为原型对象。原型对象中存储了可被继承的属性或方法。
4. 原型是上一级原型单元中的实例。

9、解决跨域的方式有几种？

第一种：CORS。跨资源共享。在服务器端通过设置Access-control-Allow-origin控制可访问的url。

第二种：JSONP，仅支持get请求。通过script的src属性引入从服务器端获取的跨域数据文件，实现跨域请求。

此时要在ajax中指出:(jQuery中)

1)、dataType：‘jsonp'，

2）、jsonpCallback：’handlercallback',

axios（vue或react中）中：jsonp：’handlercallback',

第三种：document.domain+iframe。此方案仅限主域相同子域不同的跨域请求。两个页面通过js强制设置document.domain为基础主域，实现同域。

第四种：location.hash+iframe

原理：a,b,c.三个页面要实现跨域。切互相有如下关系时：b是a的子页面，c是b的子页面，相互通过iframe来嵌套。那么当c想访问a页面，则可以是：window.parent.parent.onCallback();

第五种：window.name+iframe.

利用window的name属性可以在不同页面（跨域后）加载后仍旧存在，并且可支持非常长的name值（2MB）。

可以通过iframe的src属性将外域转向本地域。跨域数据可以有window的name属性值有外域带到本地域。这个巧妙的饶过了浏览器的跨域限制，但它又是安全操作。

第六种：postMessage跨域

postMessage是XMLHttpRequest Level2中的API，它可以实现以下几种情况的跨域请求：

1）、当前页面和打开新窗口之间的跨域参数传递；

2）、多窗口之间的信息传递；

3）、页面与嵌套的iframe之间的参数传递

用法：postMessage（data,origin)

data:html5页面可支持的任意类型数据或者是可复制的对象，由于部门浏览器只支持字符串，建议使用JSON.stringify(data)序列化。

origin:'协议://主机:端口号'。也可设置为‘*’。或是当前窗口的同源地址时，可以设置为'/'。

第七种：nginx反向代理跨域。

第八种：nodeJs中中间价代理跨域。

第九种：webSocket协议跨域。

这位讲的很详细：https://segmentfault.com/a/1190000011145364

10、三栏布局的实现方式？

可以采用：浮动布局；flex布局；定位：position：absolute；margin+百分比；