vue key值问题

问题

在前几天写项目的时候有一个批量删除的需求，批量删除肯定是少表里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值的说法：