Vue key简介

Vue key简介

Vue 的挂载

答：通过Vue开发单页面项目，一个项目就是一个Vue实例（暂且这么理解吧），也就是通过new Vue()语句创建的对象。当挂载页面的这个过程，Vue是会生成自己的VNode，会生成自己的节点树，这样就和浏览器的冲突了，所以Vue选择将浏览器的删除，把自己的替换上。

VNode是一个类，可以生产不同类型的vnode实例，不同类型的实例表示不同类型的真实DOM。由于Vue.js对组件采用了虚拟DOM来更新视图，当属性发生变化时，整个组件都要进行重新渲染的操作，但组件内并不是所有的DOM节点都需要更新，所以将vnode缓存并将当前新生成的vnode和缓存的vnode作对比，只对需要更新的部分进行DOM操作可以提升很多的性能。vnode有很多类型，它们本质上都是Vnode实例化出的对象，其唯一区别是属性不同。

key是什么

在官方文档中key的解释很清晰：key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

什么时候用key

最常见的也就是使用v-for，使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;当然使用index也可以，不过这个不推荐，如果是在末尾添加数据的时候没什么问题，但是如果要在中间添加数据的时候就会发生在添加数据的地方其后面的数据都会重新渲染，因为数据的index改变了。这个情况用唯一标识的id就不会了，此时就会只渲染这一条数据，其它的都是复用之前的缓存。key的使用就是可以更高先的用VNode让vue可以区分它们。