vue 中 key 的作用

vue中我们可能在两种情况下使用key，第一种情况下就是在v-if中，第二种情况下就是在v-for中使用key。

 

在 v-if 中使用 key

 

在vue中如果使用v-if进行切换时，此时Vue为了更加高效的渲染，会进行前后比较，如果切换前后都存在的元素，则直接复用。如果我们在模板中切换前后都存在input框，此时我们在input框中写入一些数据，并且进行页面切换，则原有的数据就会保存。

 

这时我们就可以使用key，给每一个input框，添加一个唯一的标识key，来表示元素的唯一性。

 

在 v-for 中使用 key

 

通过key值的作用，给每个节点做一个唯一的标识，diff算法就可以正确识别此节点，找到正确的位置插入新的节点，减少渲染节点。