myVue2

https://rumenz.com/examples/vue.js/js-vue-template-style.html

vue-mvvm框架和其他框架(jquery）的区别：
一个model+view+viewModel框架
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

vue-loader是什么？使用它的用途有哪些？
解析.vue文件的一个加载器，跟template/js/style转换成js模块。

用途：js可以写es6、style样式可以scss或less、template可以加jade等

怎么认识vuex
vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

git在工作中的用处：
编辑和代码提交

# 为git初始化一个代码库
git init
 
# 将目录的所有文件提交到暂存区
git add .
 
# 提交暂存区到代码仓库区，并添加提交信息
git commit -m "commit message"

分支处理，查看状态信息，同步远程仓库，撤销

数组去重的方法 https://www.cnblogs.com/luxiaoxing/p/7498248.html
1,es6中的set方法，类似于数组，成员的值都是唯一的

var arr = [1, 2, 3, 2, 1, 3];
console.log(new Set(arr))//打印结果：Set(3) {1, 2, 3}

2，使用filter过滤器去重

var arr = [1, 2, 3, 1, 2, 3];
console.log(arr.filter((v, i, arr) => arr.indexOf(v) === i))//打印结果：(3) [1, 2, 3]

3，遍历数组法
新建一个数组，遍历传入的数组，值不在新数组中就加入到该新数组；
注意：判断值是否在数组中可以用indexOf是ES5 方法，IE9以下不支持，需兼容低版本浏览器。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

function unique(array) {
       var n = []; //一个新的临时数组 
        //遍历当前数组 
        for (var i = 0; i < array.length; i++) {
            if (n.indexOf(array[i]) == -1) n.push(array[i]);
            //如果当前数组的第i已经保存进了临时数组，那么跳过， 
            //否则把当前项push到临时数组里面 
        }
        return n;
    }
 console.log(unique([1, 2, 3, 1, 2, 3])) //打印结果：(3) [1, 2, 3]

4，利用splice()方法直接在原数组进行操作。
双层循环，外层循环元素，内层循环时比较值。
值相同时，则删去这个值。
注意:删除元素之后，需要将数组的长度也减1。
5，数组递归去重

Array.prototype.unique = function () {
    var arr = this,
        len = arr.length;
    arr.sort(function (a, b) { //对数组进行排序才能方便比较
        return a - b;
    })

    function loop(index) {
        if (index >= 1) {
            if (arr[index] === arr[index - 1]) {
                arr.splice(index, 1);
            }
            loop(index - 1); //递归loop函数进行去重
        }
    }
    loop(len - 1);
    return arr;
};
var a = [1, 2, 3, 1, 2, 3];
var b = a.unique();
console.log(b); //打印结果：(3) [1, 2, 3]

对vue状态层的理解----------未解决
vue中的路由模式 哈希原理—看笔记
vue中的传值方式
https://www.jianshu.com/p/0fb563e04f61
父子，子父，兄弟，
缓存，
路由传值
1.父组件push使用this.￥router.push
2.在子组件中获取参数的时候是this.￥route.params

三次握手和四次挥手 https://blog.csdn.net/qq_38950316/article/details/81087809
三次握手—
第一次握手：建立连接时，客户端发送syn包（syn=x）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号
第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

四次挥手---------
一，客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部。，FIN=1，其序列号为seq=u，此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。
二，服务器收到连接释放报文，发出确认报文。ACK=1，ack=u+1，并且带上自己的序列号seq=v，此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。
三，客户端收到服务器的确认请求后，此时，客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最后的数据）。
四，服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，FIN=1，ack=u+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认
五，客户端收到服务器的连接释放报文后，必须发出确认，ACK=1，ack=w+1，而自己的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP连接还没有释放，必须经过2∗∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。
六，服务器只要收到了客户端发出的确认，立即进入CLOSED状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些。

**【问题1】为什么连接的时候是三次握手，关闭的时候却是四次握手？

答：因为当Server端收到Client端的SYN连接请求报文后，可以直接发送SYN+ACK报文。其中ACK报文是用来应答的，SYN报文是用来同步的。但是关闭连接时，当Server端收到FIN报文时，很可能并不会立即关闭SOCKET，所以只能先回复一个ACK报文，告诉Client端，“你发的FIN报文我收到了”。只有等到我Server端所有的报文都发送完了，我才能发送FIN报文，因此不能一起发送。故需要四步握手。

【问题2】为什么TIME_WAIT状态需要经过2MSL(最大报文段生存时间)才能返回到CLOSE状态？

答：虽然按道理，四个报文都发送完毕，我们可以直接进入CLOSE状态了，但是我们必须假象网络是不可靠的，有可以最后一个ACK丢失。所以TIME_WAIT状态就是用来重发可能丢失的ACK报文。在Client发送出最后的ACK回复，但该ACK可能丢失。Server如果没有收到ACK，将不断重复发送FIN片段。所以Client不能立即关闭，它必须确认Server接收到了该ACK。Client会在发送出ACK之后进入到TIME_WAIT状态。Client会设置一个计时器，等待2MSL的时间。如果在该时间内再次收到FIN，那么Client会重发ACK并再次等待2MSL。所谓的2MSL是两倍的MSL(Maximum Segment Lifetime)。MSL指一个片段在网络中最大的存活时间，2MSL就是一个发送和一个回复所需的最大时间。如果直到2MSL，Client都没有再次收到FIN，那么Client推断ACK已经被成功接收，则结束TCP连接。

【问题3】为什么不能用两次握手进行连接？

答：3次握手完成两个重要的功能，既要双方做好发送数据的准备工作(双方都知道彼此已准备好)，也要允许双方就初始序列号进行协商，这个序列号在握手过程中被发送和确认。

   现在把三次握手改成仅需要两次握手，死锁是可能发生的。作为例子，考虑计算机S和C之间的通信，假定C给S发送一个连接请求分组，S收到了这个分组，并发 送了确认应答分组。按照两次握手的协定，S认为连接已经成功地建立了，可以开始发送数据分组。可是，C在S的应答分组在传输中被丢失的情况下，将不知道S 是否已准备好，不知道S建立什么样的序列号，C甚至怀疑S是否收到自己的连接请求分组。在这种情况下，C认为连接还未建立成功，将忽略S发来的任何数据分 组，只等待连接确认应答分组。而S在发出的分组超时后，重复发送同样的分组。这样就形成了死锁。

【问题4】如果已经建立了连接，但是客户端突然出现故障了怎么办？
TCP还设有一个保活计时器，显然，客户端如果出现故障，服务器不能一直等下去，白白浪费资源。服务器每收到一次客户端的请求后都会重新复位这个计时器，时间通常是设置为2小时，若两小时还没有收到客户端的任何数据，服务器就会发送一个探测报文段，以后每隔75秒钟发送一次。若一连发送10个探测报文仍然没反应，服务器就认为客户端出了故障，接着就关闭连接。

html中容器垂直水平居中的方式
<全部都是子绝父相—>-----------下面几个设置有position:absolute的，父级全部都是relative
1,用弹性盒子display:flex来实现子元素的垂直水平居中

 .wrap {
            display: flex;
            justify-content: center;
            /* justify-content: center;设置子元素位于弹性盒的中间 */
            align-items: center;
            /* align-items: center;设置盒子在交叉轴居中 */
            width: 400px;
            height: 400px;
            background-color: red;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
————————————————

2，margin:auto+设置绝对定位定位上下左右为0

 .wrap2 .box{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;

            width: 300px;
            height: 200px;
            background: yellow;
        }
————————————————

3，用margin负边距和定位

.wrap1 .box{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            /* -100px相当于向左移动100px */
            margin-top: -50px;

            width: 200px;
            height: 100px;
            background: yellow;
        }
————————————————

3，transform: translate

 .wrap3 .box{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
————————————————

4,用display:table-cell属性

 .wrap {
            width: 500px;
            height: 500px;
            background-color: red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            display: inline-block;
            vertical-align: middle;
            background-color: yellow;
        }
————————————————

6,计算固定宽高

 .wrap {
            width: 600px;
            height: 600px;
            background-color: red;
            border: 1px solid transparent;
            /* 由于涉及到父子关系的外边距塌陷，所以给父盒子设置1px的透明边框来阻止塌陷 */
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 200px auto;
            父盒子高600px,
            子盒子高200px,
            600-200=400px,
            400/2=200px，子盒子上外边距200px，下外边距200px,
            所以 margin: 200px auto;
            给子盒子上下外边距设置200，左右自适应，也就是居中。
        }
————————————————