vue中 key 值的做用

原文地址

---

咱们知道，vue和react都实现了一套虚拟DOM，使咱们能够不直接操做DOM元素，只操做数据即可以从新渲染页面。而隐藏在背后的原理即是其高效的Diff算法。

vue和react的虚拟DOM的Diff算法大体相同，其核心是基于两个简单的假设：1. 两个相同的组件产生相似的DOM结构，不一样的组件产生不一样的DOM结构。2. 同一层级的一组节点，他们能够经过惟一的id进行区分。

基于以上这两点假设，使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。这里咱们借用React’s

diff algorithm中的一张图来简单说明一下：

 

当页面的数据发生变化时，Diff算法只会比较同一层级的节点：

若是节点类型不一样，直接干掉前面的节点，再建立并插入新的节点，不会再比较这个节点之后的子节点了。

若是节点类型相同，则会从新设置该节点的属性，从而实现节点的更新。

 

当某一层有不少相同的节点时，也就是列表节点时，Diff算法的更新过程默认状况下也是遵循以上原则。

好比一下这个状况：

 

 

咱们但愿能够在B和C之间加一个F，Diff算法默认执行起来是这样的：

 

 

 要使用key来给每一个节点作一个惟一标识，Diff算法就能够正确的识别此节点，找到正确的位置区插入新的节点。

 

 

因此一句话，key的做用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue能够区分它们，不然vue只会替换其内部属性而不会触发过渡效果。

---

返回目录