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

Posted 2023-02-23

【中文标题】Vue beforeUpdate 事件为递归组件触发两次

【英文标题】：Vue beforeUpdate event firing twice for recursive component

【发布时间】：2019-09-13 13:23:47

【问题描述】：

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

上面的例子开始时 treedata 有一个单个根，后面跟着很多子元素，我试图将其扩展到有多个根元素， 示例here。

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

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

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

【参考方案1】：

感谢 Steven Spungin 帮助我跟踪帮助我调试此问题的组件的 ID。

我在做的时候发现了问题：

<li v-for="(filter, index) in filters"
     v-bind:key="index"
     v-on:click.self="addfilter(filter)">

    filter.name + new Date()

    <template v-if="filter.children">
        <filter-tree
         v-bind:filters="filter.children">
        </filter-tree>
    </template></div>

</li>

li 上的loop 创建了一个带有多个子filter-tree 组件的单个父组件，这是不正确的，看起来像递归调用应该负责通过@ 上的v-for 创建/渲染自身和子组件987654327@ 如官方示例所示。

这是我的示例的正确版本：https://jsfiddle.net/z3sekaqy/

【参考方案2】：

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

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

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

【讨论】：

但是即使我只是继续向同一个现有父级添加新子级，为什么它会继续触发两次，我尝试将 v-show 替换为 v-if 并且同样发生跨度>

用更多发现编辑问题，似乎所有孩子都在为我的示例重新渲染

它会为您添加的孩子触发一次，因为该孩子在虚拟 DOM 中尚不存在。然后当它插入到父级时，父级触发。这是正常的，并且与参考示例有很大不同，因为在这种情况下，数据模型不会发生变异，并且节点是使用 v-show 预渲染的。

它为组件添加一个 id 并显示在警报中。

您能保存您的更改吗？因为它向我展示了与问题中发布的相同的小提琴