Vue beforeUpdate событие запускается дважды для рекурсивного компонента

Question

Только что начал изучать vue js и экспериментировал с примером рекурсивного дерева на основе этого примера. Официальный пример здесь

Приведенный выше пример начинается с treedataимея один корень , за которым следуют многие дети, я пытался распространить то же самое на наличие нескольких корневых элементов, пример здесь .

В моем примере я заметил, что beforeUpdate вызывается дважды при каждом щелчке компонента, более того, даже если я пытаюсь напрямую вставить элементы в children, beforeUpdateдо сих пор вызывается дважды, тогда как в официальном рекурсивном примере это происходит один раз (отлаживается с помощью vue-devtools).Я не могу найти объяснение описанному выше поведению, кто-нибудь может посоветовать, почему это происходит?

Это потому, что я вместо *

вместо * фактического имени компонента v-for?

РЕДАКТИРОВАТЬ: Я добавляю datetime, чтобы увидеть, какие элементы визуализируются, и в моем примере, все дочерние элементы должны быть повторно визуализированы, через время на компоненте

Answer 1

Причина, по которой ваш onUpdate вызывается дважды, заключается в том, что он вызывается один раз для внешнего компонента и один раз для вашего вложенного компонента. Я добавил уникальный идентификатор для каждого экземпляра компонента и подтвердил это в предупреждении.

Проект, на который вы ссылаетесь, только изменяет состояние в узле компонента, на который нажали, потому что все дерево уже визуализировано с использованием директивы v-show вместо директивы v-if.

Ваш пример фактически добавляет узлы к данным, поэтому дочерний компонент отображается, а внешний компонент обновляется.

Answer 2

Спасибо Стивену Спанжину, который помог мне отследить идентификаторы компонентов, которые помогли мне отладить эту проблему.

Я выяснил проблему, когда делал:

<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/