javascript - Vue beforeUpdate 事件为递归组件触发两次

Question

刚开始学习vue js，一直在试验一个递归树的例子，基于这个例子官方例子here

上面的示例以具有单根 后跟许多子元素的 treedata 开始，我试图将其扩展为具有多个根元素， 例子 here .

在我的example ，我注意到 beforeUpdate 每次点击组件都会被调用两次，而且即使我尝试直接将元素推送到 children 中，beforeUpdate 也是仍然调用两次，而在官方递归示例中，这只发生一次(通过 vue-devtools 调试)。我无法找到上述行为的解释，任何人都可以就为什么会发生这种情况提出建议吗？

这是因为我在 li 中做了一个 v-for 而不是实际的组件名称吗？

编辑:我添加了一个 datetime 来查看正在渲染的所有元素，它出现在我的示例中，所有子元素都将被重新渲染，通过组件上的时间可以看到

Answer 1

onUpdate 被调用两次的原因是它被调用一次用于外部组件，一次用于嵌套组件。我为每个组件实例添加了一个唯一 ID，并在警报中确认了这一点。

您引用的项目仅更改单击的组件节点中的状态，因为整个树已经使用 v-show 指令而不是 v-if 指令呈现.

您的示例实际上向数据添加了节点，因此渲染了子组件，并更新了外部组件。