Vue通过diff算法可以不直接操作DOM元素,值操作数据就可以重新渲染页面,避免了重排与重绘
diff的核心在于
- 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构
- 统一层级的一组节点,他们可以通过唯一的Id进行区分
当某一层有许多相同的节点的时候,例如列表节点,想在中间插入某一节点,
diff算法一般是,把c更新成F
如果利用key值给每个节点做唯一标识,diff算法就可以识别正确的位置,插入新的节点
所以一句话,key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性而不会触发过渡效果。
希望原作者同意转载