整理1

摘要：加快整体响应速度。步骤，用户在商户中选择商品，提交订单，选择微信支付。微信支付要求商户订单号保持唯一性，商户后台收到用户支付单，调用微信支付统一下单接口。，与团队成员，，产品经理的沟通。

一：页面性能优化：
1，减少http请求，资源的合并与压缩，恰当的缓存，不滥用float，雪碧图代替图片，异步加载。减少dom节点，
二： 数组的深浅拷贝
1，假设B复制了A，当修改A时，看B是否会发生变化，
如果B也跟着变了，说明这是浅拷贝，。如果B没变，那就是深拷贝。
2，基本数据类型有哪些，number,string,boolean,null,undefined五类。
引用数据类型：对象，数组，函数。
3，如何深拷贝？
借用JSON对象的parse和stringify。
借用JQ的extend方法。
$.extend( [deep ], target, object1 [, objectN ] )；
let a=[0,1,[2,3],4],

b=$.extend(true,[],a);

a[0]=1;
a2=1;
console.log(a,b);
4，使用场景？
但多人开发情况下，你是没办法明确这堆数据是否有其它功能也需要使用， 直接修改可能会造成隐性问题，深拷贝能帮你更安全安心的去操作数据，
根据实际情况来使用深拷贝，

三： 前后端分离的原理
1，原始人时代：
发布，需要用eclipse把代码打成一个war包，然后把这个war包发布到生产环境下的web容器里。这时候前后端代码都在这个war包里，html，js，css，各种第三方库等。这样服务器压力会很大，页面中的所有请求都要通过这个服务器，如果同时很多人访问这个网站速度就会很慢。一旦服务器出现状况，前后端一起玩完，用户体验级差。。
2， 前后端分离的优势
1，可以实现正真的前后端解耦，前端服务器放 css，js，图片等一系列资源，前端服务器负责控制页面引用，跳转，路由。前端页面异步调用后端的接口。加快整体响应速度。
3，减少后端服务器的开发/负载压力。除了接口外的http请求全部转到 前端nginx上。
前端大量的组件化代码 可以抽出来复用，组件化开发提升效率。
前端与后端是两个项目。放在两个不同的服务器，需要独立部署。

四：同步和异步的区别
1，javascript语言是一门“单线程”的语言，
其实同步和异步，
无论如何，做事情的时候都是只有一条流水线（单线程），
同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。
最基础的异步是setTimeout和setInterval函数，

五：异步promise
1,自己身上有all、reject、resolve这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
2,一： 优点和缺点
可以将异步操作以同步操作流程的方式表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
3,使用
新建new一个promise，传入resove和reject两个参数分别代表成功失败的方法。

六：常用的ES6
1，let和const 只在声明指令的块级作用域内有效。
let所声明的变量可以改变，const声明常量，不能改变
2，Object.assign()方法用于对象的合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
3，promise对象
4，import 导入模块
5，字符串拼接
Es6的这种新的“字符串拼接”方法比较简单，没有繁琐的加号和引号，只需要在所需要的字符串“边界”加上``即可。

var name = "Datura";
var age = 18;
var sex = "nü";
var hobby = "敲代码";
var str1 = `我是${name}，今年${age}岁，性别${sex}的了，爱好${hobby}`; //注意此处有两个“ `` ”
var str2 = "我是"+name+"，今年"+age+"岁，性别"+sex+"，爱好"+hobby+""; //这个是原来的写法
alert(st1r);

6，map对象
let map = new Map();
map.set("a","apple");
map.set("b","banana");
console.log(map); // Map {"a" => "apple", "b" => "banana"}
7，for in循环， for of循环（不能循环json数据）
8，箭头函数

var show = function(){
    alert(12);  
};
show();   // 12
const show = () =>{
    alert(12);  
};
show();  // 12 
//个人理解：这里将function关键字去掉然后在“()”后面加一个“=>”

七：app里面的支付功能，分享功能
（可以查看微信开发文档）
1，商户APP调用微信提供的SDK调用微信支付模块，
商户APP会跳转到微信中完成支付，支付完后跳回到商户APP内，最后展示支付结果。
步骤：
1，用户在商户APP中选择商品，提交订单，选择微信支付。
创建订单接口需要的参数：
(1) 交易金额
(2) 交易类型trade_type
JSAPI--JSAPI支付（或小程序支付）、NATIVE--Native支付、APP--app支付，MWEB--H5支付，不同trade_type决定了调起支付的方式，请根据支付产品正确上传
(3) 货币类型
境内商户号仅支持人民币
CNY：人民币
(4) 换算成北京时间为2014年11月11日8时0分0秒。
(5)部分系统取到的值为毫秒级，需要转换成秒(10位数字)。
(6)商户订单号
。微信支付要求商户订单号保持唯一性
(7)
2，商户后台收到用户支付单，调用微信支付统一下单接口。
（需要传的参数都有：appid， 随机字符串，不长于32位，签名sign，订单号，交易时间，订单金额，）
3，统一下单接口返回正常的prepay_id，生成签名
4，掉起微信支付，
5，返回支付结果。
分享功能：
1，先引入weixin.js。 然后通过config接口注入权限验证配置

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: "", // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: "", // 必填，生成签名的随机串
signature: "",// 必填，签名，见附录1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});
通过ready接口处理成功验证，

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

});

八： html5的新特性
1，绘画的canvas元素
2，video和audio元素
3，本地离线存储localStorage 和 sessionStorage
4,新的特殊内容元素，比如 article、footer、header、nav、section
5,
(1) localStorage和sessionStorage都是用来存储客户端临时信息的对象。
(2) cookie数据存放在客户的浏览器上，session数据放在服务器上
(3) cookie不是很安全，考虑到安全应当使用session
(4) session会在一定时间内保存在服务器上，当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。
(5) 建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中
localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

6，表单新增了输入类型和验证

九：拦截器
统一处理错误及配置请求信息
登陆拦截设置
路由拦截：
1，
1，在定义路由的时候就需要多添加一个自定义字段，
用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。

{
    path: "/repository",
    name: "repository",
    meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
    },
    component: Repository
},

2，用vue-router提供的钩子函数beforeEach()对路由进行判断。

router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    if (store.state.token) {  // 通过vuex state获取当前的token是否存在
        next();
    }
    else {
        next({
            path: "/login",
            query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
    }
}
else {
    next();
}

})

第二步：拦截器
要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。

// http request 拦截器
axios.interceptors.request.use(
config => {
    if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
},
err => {
    return Promise.reject(err);
});

// http response 拦截器
axios.interceptors.response.use(
response => {
    return response;
},
error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息并跳转到登录页面
                store.commit(types.LOGOUT);
                router.replace({
                    path: "login",
                    query: {redirect: router.currentRoute.fullPath}
                })
        }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
});

十：跨域问题
1，jsonp方法
只需配置一个dataType:"jsonp"，就可以发起一个跨域请求。
2， window.name + iframe跨域
3，postMessage跨域
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
4，WebSocket协议跨域
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

十一：什么叫优雅降级和渐进增强？
1，渐进增强：
先根据低版本进行构建页面，保证最基本的功能。然后再根据高级浏览器进行效果，达到更好的用户体验。
2，优雅降级：
一开始就构建完整的功能，然后在根据低版本浏览器兼容。

十二：对前端界面工程师这个职位是怎么样理解的？
1，快速高效精准的完成效果图，注重用户体验。
2，与团队成员，UI，产品经理的沟通。
3，写出优美的代码格式。注释
4，优化页面

十三：JavaScript 的同源策略
1，同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。

十四：电商网站如果有大量图片，怎么去优化界面？
1，图片懒加载，滚动到位置再发送请求
2，rem，em，px的区别
使用它们的目的就是为了适应各种手机屏幕。
em：而em是继承父元素的字体
相对长度的单位，用来设置文本的字体尺寸的，相对于当前对象内文本的尺寸，
以上实例em是相对于父级元素div的，div设置的字体大小为30px，所以0.5em计算后的字体大小为：30px x 0.5 = 15px
3，rem是相对于html元素字体大小的设置。字体大小是html的值 * 倍数。
(1) em:

十五：JQUERY篇章
1，选择器：
CSS 选择器，ID选择器，标签选择器，属性选择器$("[href]") 选取所有带有 href 属性的元素。
attr()，$("button").click(function(){
alert($("#w3s").attr("href"));
});
2，show(), hide(),fadeIn(), fadeOut(),
3,操作DOM
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

十六： css篇，定位问题position
1，relative ,相对定位。
如果元素添加了relative，设置偏移量，元素会有移动但是所占据的那个位置空间依然还在，也不会挤掉其他的元素。
2，position:absolute，绝对定位。
元素加了绝对定位，在页面中是不占据空间的，他会浮动起来。他会相对于他的父元素定位。
如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
3，fixed相对于浏览器窗口进行定位。
4， 1.id选择器（ # myid）

2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a: hover, li:nth-child）

5，CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
6，css3动画
(1) @keyframes规则定义动画
设置动画的名称, 对关键帧进行操作。
动画至少需要两个关键帧：一个from关键帧，它是我们动画的起始状态，一个to帧，它是它的结束状态。在每个多带带的关键帧块中，我们可以定义要设置动画的属性：

十七：浏览器兼容性问题
1，css透明，
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
2，元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }
3，页面的最小高度：
(1)IE不识别min,可以通过js的判断来添加
4，图片下有空隙产生
img为display:block
5，

十八： 移动端兼容性问题
1，防止手机中页面放大和缩小

2，上下拉动滚动条时卡顿、慢

body
{
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

3，iphone及ipad下输入框默认内阴影

element
{
    -webkit-appearance:none;
}

4，click的300ms延迟问题
方案一：禁用缩放，

方案二：安装第三方依赖包。
npm install fastclick ---save
(2)在入口文件main.js中引入并使用，方法如下：

import fastClick from "fastclick"
fastClick.attach(document.body)

5, 响应式图片
解决方法：让图片最大只能是自己的宽度

img{
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

6，输入框的问题：

var oHeight = $(document).height(); //浏览器当前的高度   
$(window).resize(function(){
    if($(document).height() < oHeight){
     
    $("#footer").css("position","static");
}else{
     
    $("#footer").css("position","absolute");
}      

});
7，Input 的placeholder会出现文本位置偏上的情况
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal

十九：flex弹性布局
1，使用flex盒模型来实现两栏布局，左侧固定200px,右侧自适应宽度
父元素: display:flex
子元素1: width:200px; /固定宽度/
子元素2: flex: 1; /这里设置为占比1，填充满剩余空间/
2,容器的属性6个：
(1) flex-direction决定主轴的方向（即项目排列的方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
(2) flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}    

nowrap: 不换行
wrap: 换行，第一行在上方。
wrap-reverse: 换行，第一行在上方
(3) flex-flow:
是flex-direction和flex-wrap的简写形式，默认值row, nowrap
(4) justify-content属性
定义了项目在主轴上的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}  
//flex-start左对齐， flex-end右对齐，  center居中对齐， space-between两端对齐中间间隔相等
//space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

(5) align-items属性
定义项目在纵向对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

(6)align-content属性
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around |         stretch;
}

3,项目属性，不常用

order
flex-grow
flex-shrink
flex-basis
flex
align-self

4，flex属性
是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

二十：vuex
vuex就是把组件的共享状态提取出来，以一个全局方式管理。
任何组件都可以获取状态或者触发行为。vuex就是专门为vue设计的状态管理库。
1，state
定义初始化状态变量。
改变state中的状态唯一方式就是显示的提交(commit) mutation.
2，getters
可以监听state里面值的变化。有时候我们需要从state中派生出一些状态
，例如对列表过滤。类似于计算属性。
可以以属性的形式访问这些值
store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]
3，mutation
改变state中状态的唯一方法就是显示提交mutations。是同步的
4，action方法
action类似于mutation不同在于：
(1) action提交mutation，而不是直接变更状态
(2) action可以包含任意异步操作。
使用方式：

  const mutations ={
      increment(state){
        return state.count++;
      }
   };
   const actions = {
      increment(context){
        context.commit("increment");
      }
   };
//在组件中使用 this.$store.dispatch("xxx") 分发 action

二十一：移动端打包问题
打包安卓apk过程：
(1)，基本依赖环境
nodejs环境
jdk(java的开发基础类库，因为 android )
SDK(安卓开发集成包，集成了安卓的开发工具，插件，API等等)
(2)，环境配置
nodejs
jdk (无需配置环境变量)
sdk (需要配置环境变量)
gradle安装
安装ionic和cordova
全局安装ionic和cordova（IONIC是UI，cordova负责打包成apk,并且可以调用原生安卓的各种API）
(3)打包
ionic cordova build android --release
如若你聪慧的双眼发现如下字眼：Build Success! 说明你已经成功打包了。耐心等待，命令行结束会提示你apk的生成位置
给包生成签名
2，移动端Mint UI。基于 Vue.js 的移动端组件库
(1)包案丰富的css和js组件。

二十二： js篇基础
1，事件委托
把绑定到子元素的事件 委托到父元素上，原理就是事件冒泡

事件委托的优点？
(1) 因为每一个函数都是一个对象，对象越多，内存占有率就越大，自然性能就越差，使用事件委托，只需要在其父元素中定义一个事件就可以。
(3) 减少事件注册，比如在ul上代理所有li的click事件就非常棒

  
item 1
  
item 2
  
item 3
  ......
  
item n
// ...... 代表中间还有未知数个 li。
如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，
因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

实现方式用：event.target可以判定当前点击的目标对象

2， 适合事件委托的事件有：

click，
mousedown，
mouseup，
keydown，
keyup，
keypress

3， this作用域问题
(1) this总是指向调用它所在方法的对象。
this是在函数生成的时候，自动生成的一个内部对象，只能在函数内部使用。
(2) 全局函数调用
this代表的全局对象window。
(3) 对象方法的调用
如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象。
(4) 构造函数的调用
构造函数中的this指向新创建的对象本身。

3，冒泡排序
(1) 原理：
依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确
(2) 实现方法：

4，闭包
(1) 如何从外部读取局部变量？
在函数的内部，再定义一个函数。

 function f1(){
       n = 999;
       function f2(){
           console.log(n);　　//999
       }
   }

在上面的代码中，函数f2就被包括在函数f1内部，

这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，
f2内部的局部变量对f1就是不可见的。
这就是javascript语言特有的‘链式作用域’结构(chain scope)，子对象会一级一级地向上寻找所有父对象的变
量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1外部读取它的内部变量了。

   function f1(){
       n = 999;
       function f2(){
           console.log(n);
       }
       return f2;

   }
   var result = f1();　　//返回的是f2函数
   result();　　//999

(2) 闭包的概念：
上一节代码中的f2函数就是闭包。
闭包可以简单理解成：
定义在一个函数内部的函数，
本质上闭包就是将函数内部和函数外部连接的一座桥梁。

(3)闭包的用途：
一个是前面提到的可以读取函数内部的变量
另一个就是让这些变量的值始终保持在内存中。

 function f1(){
       var n = 999;
       nAdd = function(){
           n += 1;
       }
       function f2(){
           console.log(n);
       }
       return f2;
   }
   var result = f1();
   result();　　//从函数外部通过闭包f2获取到函数f1内部局部变量的值
   nAdd();　　//从函数外部通过闭包修改局部变量n的值
   result();　　//再次通过闭包f2获取到函数f1内部局部变量的值  
   //console.log出的值是， 999， 1000

(4) 使用闭包的注意点：
1>由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法时，在退出函数之前，将不使用的局部变量全部删除。

2>闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象(object)使用，把闭包当作它的公用方法，把内部变量当作它的私有属性，这时一定要小心，不要随便改变父函数内部变量的值。

5，JS继承
(1) 属性继承
就是将对象的成员复制一份给需要继承的对象
存在问题：
父构造函数的原型对象和子构造函数的原型对象上的成员有共享问题
只能继承父构造函数的原型对象上的成员, 不能继承父构造函数的实例对象的成员
(2) 原型链继承
prototype 英[ˈprəʊtətaɪp]
即 子构造函数.prototype = new 父构造函数()

(3) 借用构造函数

 // 创建父构造函数
function Person(name){
  this.name = name;
  this.freinds = ["小王", "小强"];
  this.showName = function(){
     console.log(this.name);
  }
}
// 创建子构造函数
 function Student(name){
  // 使用call借用Person的构造函数
  Person.call(this, name);
 }
 // 测试是否有了 Person 的成员
 var stu = new Student("Li");
 stu.showName(); // Li
 console.log(stu.friends); // ["小王","小强"]

使用call和apply借用其他构造函数的成员, 可以解决给父构造函数传递参数的问题, 但是获取不到父构造函数原型上的成员.也不存在共享问题

(4) 组合继承 (构造函数 + 原型式继承)
(5) 借用构造函数 + 深拷贝

function Person(name,age){
    this.name = name;
    this.age = age;
    this.showName = function(){
        console.log(this.name);
    }
}
Person.prototype.friends = ["小王","小强","小王八"];
function Student(name,25){
    // 借用构造函数(Person)
    Person.call(this,name,25);
}
// 使用深拷贝实现继承
deepCopy(Student.prototype,Person.prototype);
Student.prototype.constructor = Student;

6：BOM
(1) BOM的核心对象是window，它表示浏览器的一个实例。
(2) 全局作用域：
在全局作用域中生成的变量，函数都是window的属性和方法。
全局变量与在window对象上直接定义的属性还是有一些差别，
全局变量不能通过delete删除，window对象可以。
(3) window对象有以下方法：

open 
close 
alert 
setTimeout 
clearTimeout 
setInterval 
clearInterval 
moveBy 
moveTo 
resizeBy 
resizeTo 
scrollBy 
scrollTo 
find 
back 
forward 
home 
stop 
print 
blur 
focus 
handleEvent 
releaseEvent 
routeEvent 
scroll

(4) http状态码
200：请求成功
404：请求的资源不存在
500：内部服务器错误
5XX服务端错误：
501,502,503,504,505
4XX客户端错误
401，402，403
304： 对客户端有缓存的情况下，服务端的一种响应。
403： 表示对请求资源的访问被服务器拒绝
401： 表示发送的请求需要有通过 HTTP 认证的认证信息

7：数组的哪些方法会改变原数组？那些不会？
(1) 变原数组：

pop()   删除最后一个元素并把长度减一
shift() 数组的第一个元素被删除
shift(0,1) 0: 开始的索引，1：要删除的个数。
push()  添加元素

(2) 不改变原数组

concat() 连接多个数组，返回新的数组
slice()   
foreach()
     

二十三： vue篇
1，简述Vue的响应式原理