Question

刚刚开始学习vue js，并已基于该示例（官方示例here

）尝试了递归树示例

上面的示例从具有单个根的treedata开始，随后是许多子级，我试图 将其扩展为具有多个根元素， < / strong>示例here。

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

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

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

Answer 1

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

您引用的项目仅会更改所单击的组件节点中的状态，因为已经通过使用v-show指令而不是v-if指令来渲染了整个树。

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

Answer 2

感谢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>

loop上的li创建了一个具有多个filter-tree子组件的单父对象，这是不正确的，似乎递归调用应该负责通过以下方式创建/呈现自身和子组件如官方示例中所示，v-for上的filter-tree。

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

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

2 个答案: