vuejs2 beforeUpdate生命周期钩子触发两次

Question

当我使用新项目取消移动数组时，beforeUpdate方法会被触发两次。当我推送新项目时，情况并非如此。有谁知道它为什么这样做？它弄乱了我的应用......

Answer 1

经过一些试验和错误后，我找到了解决方案。我想我也可以解释为什么beforeUpdate方法触发了两次：

• 第一个触发器是将新项添加到数组
• 第二个触发器用于重新调换数组键，因为这些项目是在数组的开头添加的。

班次出现同样的问题。因为您删除了数组中的第一个项目，所以也会在这里进行重新分析。

这也可以解释为什么它不会在推送时执行此操作，因为正在添加新密钥而不是移位。

现在的解决方案是：当你进行v-for时，将'key'属性绑定到一个唯一的值，如下所示：

<div v-for="item in items" :key="item.id"></div>

文档说明了这一点：给Vue一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素。

我从这个解决方案中得出的结论是，v-for不再查看数组键，而是查看每个项目提供的唯一键。