vue 官网举荐咱们在应用 v-for 的时候,给对应的元素和属性增加一个 key 属性。
如果未应用 key 属性,会给咱们报正告,外表上看着没啥影响,但这关系到我的项目性能,所以为了我的项目更高效,咱们不得不应用到 key 属性。
- vue 的 虚构 DOM机制,使得咱们不须要去操作 DOM,仅需操作数据就可从新渲染页面;
- 虚构 DOM 机制的原理根据的是Diff 算法。
如下图,我想要在 B 和 C 之间插入节点 F
Diff 算法的插入机制如下图,即把原来的 C 更新成 F,D 更新为 C,E 更新成 D,最初再插入 E。在没有指定 key 的状况下,就是这样“傻瓜式位移”来实现更新
如果咱们给他指定一个惟一标识 key 之后,他依据这个惟一标识,Diff 算法就能正确辨认该节点,找到对应的地位,只须要在对应的地位更新。不再须要“傻瓜式位移”,一个个地去比对。
所以,key 的作用次要是为了高效的更新虚构 DOM。