问题
在前几天写项目的时候有一个批量删除的需求,批量删除肯定是少表里list列表和v-for。根据data里的list数据对子组件进行v-for,对list进行选择删除操作,按理说list里的数据被删除以后,子组件列表也会重新遍历。就在这时出现了问题,该被删除的item确实已经不在了,但是数据渲染出现了错误。从父组件传过去的值并没有问题,问题出在了子组件data中的数据。比如我删除了列表中的第一个元素,第一个子组件被删以后,第二个组件会自动排到第一位上。并且第一个子组件的data并不重新渲染,仍然是之前的数据。显而易见,第一个子组件没有被销毁,而是被复用了。因为样式是其他人写的,我是后来接收的这个页面,并没有特别仔细的看。在困扰了我一天多以后,终于让我发现了,问题就出在这个key值上啊。原来在v-for时绑定了key值为index...。那删除的操作根本就不是选中哪个元素删除哪个元素,而是我们删除几个都是从最后往前删,前面的子组件一直被复用,父组件传过去的值会根据传过去的值变化而变化,但是data里的数据没有触发他们变化,还是会保持之前的数据,就和更新以后的数据不符。尤其是在自组建的钩子函数中有数据初始化的情况如果key值被复用了更会出现这种情况。我们应该保证key值与数据的唯一确认,一般如果数据里有id,绑定id也是好的。接下来我们就来具体说一说key值,先来看看vue官方对key值的说法: