使用vue的同学大家都知道,在使用v-for指令的时候,都需要添加一个key属性,并且是唯一的key。我们都会想到为什么要使用key呢?下面就针对这一问题做一个解释。请看下面的例子:
在上面的例子中,我们用v-for循环了一个列表,然后有一个删除功能。现在当我们选中第一个多选框之后并删除。我们会发现,第一条数据确实是删除了,但是为什么剩下两条数据的第一条的多选框为什么还是处于选中状态呢?那么我们为了解决这个问题,我们的key就应该使用id作为唯一的key.
这是因为我们虽然绑定了一个key,但是我们这个key不是唯一的。大概就是,最初的分别是0、1、2,当我们选中第一个并删除的时候,他的key就会变成0、1。在列表重新渲染的时候,会有一个就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素。
然而我们在使用的 v-for的时候经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法。当然如果这个列表只是存静态的,这当然是没问题的,反之这个列表是动态的我们就不要用数组的index作为key来使用。
最后希望大家以后在使用v-for的时候尽量不要使用数组的index作为key来使用的,以免造成不必要的bug。
网友评论