Vue key的作用与原理

189 阅读1分钟

key的主要作用就是为了高效的更新虚拟dom

在源码里主要体现是,在patch过程中会执行patchVnode,而patchVnode过程中会执行updateChildren这样的方法,它会更新两个新旧的子元素,在这个过程中通过key就可以精准的判断这两个节点是不是一个节点

如果没有加key,vue就会以为这是两个相同的节点,所以能做的操作就是简单直接的去更新,这样的话就没有办法避免频繁的更新过程,所以我们会额外多做很多dom操作,不加key的性能就会很差

如果加上key,我会利用内部一系列优化的算法,比如我会猜测首位节点的相似性,由于大部分情况下我们元素都不会发生位置上的大的变化,所以我会很高效的结束这个循环,会减少大量的更新过程,我的操作就会非诚高效,这就是key的原理

还有就是vue中使用相同标签元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换内部属性而不会触发过渡效果