美团-前端开发面经（十二）

一、功能不同

1、get是从服务器上获取数据。

2、post是向服务器传送数据。 

二、过程不同

1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

2、post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 

三、获取值不同

1、对于get方式，服务器端用Request.QueryString获取变量的值。

2、对于post方式，服务器端用Request.Form获取提交的数据。 

四、传送数据量不同

1、get传送的数据量较小，不能大于2KB。

2、post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。 

五、安全性不同

1、get安全性非常低。

2、post安全性较高。 

如果没有加密，他们安全级别都是一样的，随便一个监听器都可以把所有的数据监听到。

document.ready和onload的区别为：加载程度不同、执行次数不同、执行速度不同。

一、加载程度不同

1.document.ready：在DOM加载完成后就可以可以对DOM进行操作。一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2.onload：在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

二、执行次数不同

1.document.ready：document.ready可以写多个.ready，可以执行多次，第N次都不会被上一次覆盖。

2.onload：onload只能执行一次，如果有多个，那么第一次的执行会被覆盖。

三、执行速度不同

1.document.ready：onload除了要等待DOM被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在onload事件上的代码在执行时有明显的延迟。

2.onload：document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。

1.Vue 中的 key 到底有什么用？

  1.两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构。

  2.同一层级的一组节点，他们可以通过唯一的id进行区分。

key的作用主要是为了高效的更新虚拟DOM

key 是给每一个 vnode(javaScript对象) 的唯一 id,依靠 key,我们的 diff 操作可以更准确、更快速 (对于简单列表页渲染来说 diff 节点也更快。

diff 算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的 key 与旧节点进行比对,从而找到相应旧节点。

更准确 : 因为带 key 就不是就地复用了,在 一些节点函数中 以 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确,

更快速 : key 的唯一性可以被 Map 数据结构充分利用,相比于遍历查找的时间复杂度 O(n),Map 的时间复杂度仅仅为 O(1),

源码如下:

    function createKeyToOldIdx(children, beginIdx, endIdx) {              let i, key;              const map = {};              for (i = beginIdx; i <= endIdx; ++i) {                  key = children[i].key;                  if (isDef(key)) map[key] = i;                }            return map;        }

2.vue中使用v-for时为什么不能用index作为key？

更新DOM的时候会出现性能问题

会发生一些状态bug

React 中的 key 也是如此

1）index作为key，其实就等于不加key

2）index作为key，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出（这是vue官网的说明）

说明：当以数组的下标index作为key值时 其中一个元素发生了变化 就有可能导致所有元素的key值发生改变 diff算法是比较同级之间的不同 以key来进行关联 当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的Index都会发生改变，那么key自然也跟着全部发生改变， 所以index作为key值是不稳定的，这种不稳定性有可能导致性能的浪费 导致diff无法关联起上一次一样的数据 因此 能不用Index作为key就不要用Index

手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗

使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换

相同点：v-show 都可以动态控制着dom元素的显示隐藏

不同点：v-if 的显示隐藏是将DOM元素整个添加或删除，v-show 的显示隐藏是为DOM元素添加css的样式display，设置none或者是block，DOM元素是还存在的

在渲染多个元素的时候，可以把一个 元素作为包装元素，并使用v-if 进行条件判断，最终的渲染不会包含这个元素，v-show是不支持 语法

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以被设定为Flex布局，容器分为两种块Flex和行内Flex。

Flex布局有两层，采用Flex布局的元素称为flex容器，其子元素则自动成为flex item，即flex项目。

注意：设定为Flex布局之后，子元素的float，clear和vertical-align都会失效。

Flex容器属性

容器默认存在两根轴：水平方向的主轴（main axis）和垂直方向的交叉轴（cross axis），主轴的开始位置叫做main start，结束位置叫做main end。交叉轴的开始位置叫做cross start，结束位置叫做cross end。

容器的6个属性：

1.flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.flex-box {

  flex-direction: row | row-reverse | column | column-reverse;

}

2.flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下时，如何换行。

.flex-box {

  flex-wrap: nowrap | wrap | wrap-reverse;

}

3.flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.flex-box {

  flex-flow: <flex-direction> || <flex-wrap>;

}

4.justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.flex-box {

 justify-content: flex-start | flex-end | center | space-between | space-around;

}

5.align-items属性

align-items属性定义项目在交叉轴上如何对齐。

.flex-box {

 align-items: flex-start | flex-end | center | baseline | stretch;

}

6.align-content属性

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

.flex-box {

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}