vue中 key 值的作用

1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变
2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定时器之后
3 .所以这个key值对数据改变之后的diff更新比较有很大的性能提升，或者说有了key和没有key是两种比较和更新机制
4 .使用v-for更新已渲染的元素列表时，默认采用旧地复用策略，会复用之前的元素，有的时候使用index来做为key值，其实不是特别推荐的。可能会发生变化，最好是时间戳加上一个自增的数字

5 .如果有key的话，就会根据key值去判断某个是否修改，重新渲染这一项

6 .虚拟dom的diff算法

1 .两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构
2 .同一层级的一组节点，可以通过唯一的id进行区分
3 .当一层有很多相同的节点的时候，也就是列表节点时，diff算法的更新过程默认情况是遵循以上原则

16401a8ca6f8c764.jpg

1 .当我们想把一个f插入到b,c之间，默认是这样的

 

16401a8ca73549bb.jpg

 

2 .一个顶一个，并不是我们想象的那样，同理，删除的时候也是这样(c->f,d-c,e-d,然后插入e)
3 .但是如果我们给他加了key值之后

 

16401a8ca6d7e50c.jpg

4 .diff算法就可以正确的识别此节点，找到正确的位置并插入新的节点
5 .key的作用是为了更加高效的更新虚拟do'm，另外在vue中使用相同标签元素的过度切换的时候，也需要使用key属性，其目的是为了让vue区分它们，否则vueh就只会替换其内部属性而不会触发过度效果

第二波

1 .当页面的数据发生变化的时候，diff算法知乎i比较同一层级的节点

1 .如果节点类型不同，直接干掉前面的节点，在创建并插入新的节点，不会在比较这个节点以后的子节点了
2 .如果节点类型相同，重新设置该节点的属性，从而实现节点的更新
3 .所以，当某一层有很多相同的节点的时候，diff的默认是遵循第二条的

2 .对象遍历渲染的时候，是按照Object.keys（）结果遍历的，所以不能保证绝对的顺序。所以最好是按照数组里面包含对象的方法来渲染，这样可以保证绝对的顺序
3 .官方文档的明确显示的部分

1 .当使用v-for更新已经渲染过的元素列表时，默认的使用”旧地复用“策略，如果数据项的顺序被改变，Vue是不会移动dom来匹配数据项的顺序，而是简单的复用此处的每个元素，并且确保他在特定索引下显示已被渲染过的元素
2 .这个模式默认是高效的，但是只适用于不依赖子组件状态或临时DOM钻港台，比如列表渲染输出
3 .为了给Vue一个提示，使他可以追踪每个节点的身份，从而重用和重新排序现有元素，这就需要为每一个项提供一个唯一的key属性
4 .注意：不添加key的性能其实更加优秀。除了想要性能或者输出非常的内容非常简单
5 .不要使用对象或者数组之类的非原始值作为v-for的key，用字符串或者整数类型的值来取代

4 .数据的这些方法会返回一个新的数据，也就是说当调用这些方法的时候需要使用新数组替换旧的数组。Vue为了使得dom元素得到最大范围的重用而实现了一些智能的，启发式的方法。也就是说，用一个含有相同元素的数据去替换原来的数据会有非常高效的操作

5 .不能检测到的变化：数组里面使用索引设置一个项时，包括对象添加新的值的时候，所以这两种情况都需要使用特定的方法。只不过是不支持常用的用法罢了，当时为什么不加个语法糖呢。。
6 .同一个元素里面v-for和v-if的优先级,v-if将运行于每一个v-for循环中，当想根据某些条件在渲染一些dom的时候，旧可以使用这个
7 . v-if当父元素 v-for当子元素

v-if中的key

1 .v-if中想要渲染多个元素的时候，可以把一个template元素当成不可见的包裹元素，并在上面使用v-if，最终的渲染结果将不会包括template元素
2 .为了尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染，除了更快，还以一些其他的好处

1 .以下是没有key的时候
2 .input切换的时候，会保留之前填的表格
3 .

3 .添加一个key值，vue就知道这两个元素是完全不一样的，所以创建的时候直接从0开始，而不是复用
4 .但是如果其他的地方没加key，也是会复用的。所以要在合适的位置加上key
5 .v-show:带有v-show的元素始终会被渲染并保留在dom中，v-show只是简单的切换css属性display
6 .不支持template，也不支持v-else

比较v-show,v-if

1 .v-if是真正的条件渲染因为塌糊确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建
2 .v-if也是惰性的，如果在初始渲染时条件为假，则什么都不做，直到条件第一次变为真，才会开始渲染条件块
3 .v-show:不管是什么条件，都是会被渲染，只是简单的进行css切换
4 .v-if有更高的切换开销，v-show有更高的初始渲染开销。如果需要频繁的切换，使用v-show,如果在运行时条件很少改变，则使用v-if较好

作者：skoll
链接：https://www.jianshu.com/p/a634eb3c19c2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。