Vue中key的作用及正确使用方法是什么？

本文共计1654个文字，预计阅读时间需要7分钟。

了解当前情况后，key的作用包括以下几点：- 在v-for遍历时，使用id、uuid等唯一标识作为key，加速虚拟DOM渲染。- 响应式系统中，没有监听到数据变化时，使用new Date()生成的时间戳作为key，手动强制更新。

就目前所了解的情况，key的作用有以下这些。

• v-for遍历时，用id，uuid之类作为key，唯一标识节点加速虚拟DOM渲染
• 响应式系统没有监听到的数据，用+new Date()生成的时间戳作为key，手动强制触发重新渲染

场景一大同小异司空见惯，场景二是下面这样的：

<div :key="rerender"> <span>Hello Vue.js !</span> <complexComponent :propObj="propObj" :propArr="propArr" ></complexComponent> </div> refresh(){ this.rerender = + new Date(); }

那么vue中key的相关知识点到底是怎样的呢？

• 官方API知识点
• 上面2个使用场景背后的原理是什么？
• 除key外，还有其它强制更新DOM的方法吗？
• 参考资料

官方API知识点

• 在Vue.js中，key是6个特殊属性key, ref, is, slot, slot-scope, scope其中之一。
• key的值可以是number，也可以是string。