前面介绍到了vue入门相关指令,其中v-bind(单向数据绑定)涉及到了key值的绑定,那么key值的作用是什么呢?
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移 动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。由此可见,key的作用主要是为了高效的更新虚拟DOM。要想更深入,可以了解一下虚拟DOM的Diff算法。
啰啰嗦嗦一大串,简而言之,key值作用就是:数据变化时,vue内部进行节点(虚拟DOM)比对时,判断新旧节点是同一个节点(是否发生变化)的条件。