什么是三次握手？

什么是四次挥手？（close触发）

什么是VUEX？

什么是同源----跨域？

什么是Promise？

什么是fexl布局？

数据类型

什么是深浅拷贝？

什么是懒加载？

什么是守卫？

DOM

Diff算法（并非Vue专用但凡涉及到虚拟DOM都有）

Vue2与Vue3的区别

Vue中data为什么是函数？Vue根实例为什么没有这个限制？

Vue设计原理

Web时代的演变

Vue优化性能方法

什么是三次握手？

是TCP连接时服务器和客户端的相互发送报文，是为了确认双方接受、接受能力是否正常，指定自己的初始化序列号，为后面的可靠性传递做准备。

刚开始客户端处于Closed（关闭）状态，服务器处于Listen（监听）状态。

第一次：客户端给服务器发送一个SYN报文（建立连接），并指明客户端的初始化序列号ISN，此时客户端处于SYN-END（请求连接）状态，首部的同步位SYN=1，初始序列号seq=x，SYN的报文不能携带数据，但是会消耗一个序列号。

第二次：服务器收到后会返回一个SYN报文，指定自己的初始化序列号ISN，同时会把客户端的ISN+1做为自己的ACK（确认字符）值，表示已经收到，此时处于SYN_RCVD（表示已接受到，半列队）状态。在确认报文段中SYN=1，ACK=1，确认号ack=x+1，seq=y。

第三次：客户端收到SYN报文后，会发送ACK报文，将服务器的ISN+1作为ACK的值，此时客户端处于ESTABLISHED（已连接）状态。在确认报文中ACK=1，ack=y+1，seq=x+1，ACK报文可以携带数据了，不携带不消耗序列号。

为什么要三次？

是要确定发送、接收发送、发送接收是否可靠。

什么是四次挥手？（close触发）

是由TCP半关闭造成的，就是结束塔的发送后还能接受来自另一端数据的能力。刚开始都处于ESTANLISHED状态。

如果是客户端发送：

第一次：发送FIN报文，报文中会指定序列号，客户端处于FIN_WAIT1（终止等待1）状态。

第二次：服务器收到后发送ACK报文，接受得序列号+1作为ACK的值，处于CLOSE_WAIT（半关闭）状态。

第三次：服务器收到后发送FIN报文，指定序列号处于LAST_ACK（最后确认）状态，

第四次：客户端收到后发送ACK报文进入TIME_WAIT状态，等一会进入CLOSED（关闭连接）状态，客户端收到关闭连接。

在socket编程中，任何一方执行close()操作就可以产生挥手操作。

什么是VUEX？

是一个为Vue设计的状态管理库，以利用Vue.js的细粒数据响应机制进行高效的状态更新。

state：存放公用数据/状态的地方；

getter:类似于vue中的计算属性。

mutation:修改state的地方，$store.commit([xxx,'name'])

actions:是mutation的上一级，提交到mutation执行，可调用异步方法。 $store.dispach([xxx,'name'])

什么是同源----跨域？

同源：是一种约定，DOM同源/XMLHTTP同源，要求域名、端口号、协议相同。

CROE解决跨域，croe的书写方法和axios一样，通常不需要进行修改，常用。

Jsonp：是一种利用动态创建script利用src进行跨域，虽然无兼容性问题，但是只能get请求，从别的域加载执行可能会携带恶意代码，不易确定失败。

Nginx反向代理：在vue.confing中proxy

'/api':{
    target :'https://www.easy-mock.com',//设置代理
    target :'http://10.10.29.26:8882', //代理的接口域名以及端口号
    ws:true,//支持ws协议,websocket的缩写，
    changeOrigin: true,// 是否跨域,
    pathRewrite:{ //路径替换
        '^/api':''
    }
}

什么是Promise？

是异步编程的一种解决方案，是一个容器，存放着未来结束的事件结果，语法上说是对象，可以获取异步消息。

三个状态：padding（等待）、fulfiled（成功）、reject（失败）

三个方法：.then(resolve成功、reject失败）

.catch(获取异常信息）

.funally()都会执行

解决异步无法返回值，new时自身同步，调用方法的时候异步。

什么是fexl布局？

弹性布局由父容器、子容器构成，通常设置主轴和交叉轴来控制子元素的排序方式。

定义子元素的排列方向：

felx-direction:row|row-reverse|column|column-reverse
    //row :默认值，主轴水平方向 左往右对齐👉
    //row-reverse:主轴水方向 右往左对齐👈
    //column:主轴垂直方向 上往下对齐👇
    //column-reverse:主轴垂直方向 下往上对齐👆

轴线属性：

flex-warp:nowrap|warp|warp-reverse
    //nowarp:(默认)不换行
    //warp:换行，在第一行上方
    //warp-reverse:换行，在第一行下方

主轴对齐：

justify-content:flex-start|felx-end|center|space-between|space-around
    //flex-start:(默认值)左对齐
    //flex-end:右对齐
    //center:居中
    //space-between:两端对齐，间隔相等
    //space-around:每个项两侧间隔相等

交叉轴对齐：

align-items:flex-start|flex-end|center|baseline|staretch
    //flex-start:交叉轴的起点对齐
    //flex-end:交叉轴的终点对齐
    //center:交叉轴的中点对齐
    //baseline:项目的第一行文字的基线对齐
    //stretch:默认值，如果项未设置高度或设为auto，将沾满整个容器的高度

多根轴线对齐：

align-content:flex-start|flex-end|center|space-between|space-around|strctch
    //flex-start:与交叉轴的起点对齐
    //flex-end:与交叉轴的终点对齐
    //center:与交叉轴的中点对齐
    //space-between:与交叉轴两端对齐，轴线之间的间隔平均分布
    //space-around:每根轴线两侧的间隔相等
    //stretch:默认值 ，轴线沾满整个交叉轴

数据类型

基本数据类型：undefined、null、Boolean、String、Number、Symbol等等类型在内存中占据固定大小，保存在内存栈中。

引用数据类型：Object、Array、Date、Function、RegExp等等。引用数据类型的值是对象，保存在堆内存中。

在内存栈存储的是对象的变量标识符一级对象在堆内存中储存的存储地址。

什么是深浅拷贝？

浅拷贝：仅仅是复制了引用，彼此之间的操作相互影响。Array==》slice和concat方法

深拷贝：在堆中重新分配内存，不同地址，相同的值，互不影响，复制实例。

JSON.parse();把JSON字符串反序列化为一个js对象

JSON.stringify()；把js对象序列化为一个JSON字符串

递归：对属性中所有的应用类型的值进行遍历，知道是基本类型为止

什么是懒加载？

懒加载也叫延迟加载，指在页面中延迟加载页面内容，能够提升用户体验、减少无效的资源加载、防止并发加载的资源过多会阻塞js的加载。

图片懒加载：将地址储存在自定义属性上，当页面滚动时内容马上要在视口内呈现将地址赋值给src。

1、document.documentElement.clientHeight//获取屏幕可视窗口高度
2、element.offsetTop//获取元素相对文档顶部的距离
3、document.doceumentElement.scroliTop//获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条的距离
可以通过这个三个方法判断 3-2<1 ,从而判断元素是否在可视范围内。

数据懒加载：将地址储存在自定义属性上，当页面滚动时内容马上要在视口内数据赋值。

1、scrollHeight//指元素的总高度
2、scrollTop//当滚动条滚动时，向下拖动滚动条，内容想上滚动的距离。
3、clientHeight//元素可视区的大小，指的是元素内容及其边框所占的空间大小------可视区域的大小
通过 1-2-3==0？ 判断滚动条是否到达底部

路由懒加载：

通过import()实现

将路由对应的组件加载成一个个对应的js包，再路由被访问时才将对应的组件加载。

原理：将路由组件改写成一部组件，只有当函数被调用的时候采取加载对应的组件内容。

什么是守卫？

全局前置守卫：路由即将改变前，一般项目中进行判断是否登录、是否有路由权限。。。。

reouter.beforeEach((to,from,next)=>{...})
//to=========到哪个页面去
//from=========从哪个页面来
//next==========={回调函数,如果是false，终端导航，如果浏览器URL改变，地址蛔虫知道from路由对
//应的地址，如果next是路径，会中断当前导航去新的导航，可以传任意位置的对象，
//允许设置选项 replace：true，name：’home'以及任何再router-link的to/prop/router.push}

全局后置守卫：reouter.afterEach(同上)

组件路由守卫：是写在每个单独的Vue文件里面的路由守卫

beforeRouteEnter(to,from,next)=>{...})
//在进入路由之前调用，组件实例还没有被渲染，无法获取this实例，可以通过传
//一个回调给next来访问，再确认导航的时候执行回调，把组件实例做为回调方法的参数

beforeRouteUpdate((to,from,next)=>{...})
//当前路由发生改变，但是组件被复用时调用。

beforeRouteLeave((to,from,next)=>{...})
//离开当前路由页面时调用

路由独享守卫：是再路由配置页面单独给路由配置一个守卫。

export default new VueRouter({routes:[
    {
        path:'/',
        name:'xxx',
        component:'Xxx',
        beforeEnter:(to,from,next)=>{...}
    }]})

DOM

真实DOM渲染顺序：

1、解析HTML构建DOM树，并请求css/image/js

2、CSS文件下载完成，开始构建css树

3、构建完成后和DOM 一起生成渲染树

4、布局

5、显示

虚拟DOM就是一个用来表示真实DOM的对象，最终会映射到真是环境上，并且它的不依赖真实平台的能力。 页面的更新可以先完全反映在虚拟DOM上，操作内存中的js对象块，将最终的js对象映射成真实DOM，交给浏览器去绘制，减少对真实DOM的操作。

所以说虚拟DOM算法(虚拟DOM+diff算法)操作真实DOM性能高于直接操作真实DOM。

Diff算法（并非Vue专用但凡涉及到虚拟DOM都有）

能精确比较新旧虚拟DOM中的key变化，提高更新效率。

是一种对比算法，对比两者谁是新旧虚拟DOM，对比哪个虚拟节点改变，并只更新这个虚拟节点所对应的真实节点。

使用虚拟DOM损耗计算：总损耗 = 虚拟DOM增删改 + 真实DOM差异增删改 + 排版与重绘

使用真实DOM 损耗计算：总损 = 真实DOM完全增删改+（可能多个节点）排版重绘

原理：新旧虚拟DOM只会再同级对比，是深度优先算法，在patchVnode发生。

对比流程：数据改变触发setter，通过Dep.netify去通知所有订阅者，订阅者会调用patch方法（对比当前同层的虚拟节点是否为同一类型标签），给真实DOM更新相应试图。

总结：

1、diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM做对比，将变化的地方更新在真实DOM上，另外也需要diff高效率执行对比过程，从而降低时间复杂度O（n）---通过updateChildern()高效执行。

2、Vue2中为了降低watcher粒度，每个组织只有一个watcher与之对应，这样才能精确找到发生变化的地方。

3、vue中的diff执行的时候是组件实例执行更新函数时，它会对比上一次渲染结果oldVnde和新的渲染结果，此过程称为patch。

4、diff过程整体遵循深度优先，同层级比较策略，会从头部节点开始对比尝试，如果没有找到相同节点才会遍历查找，查找结束再处理剩下的节点，借助key可以精确找到相同节点，因此patch非常高效。