Функция $ destroy удаляет компонент Vue Custom из кэша

Question

Я создаю глубокое вложенное дерево родительских и дочерних пользовательских компонентов Vue, используя мой компонент верхнего уровня, а затем обновляю данные, из которых построено все дерево. Который имеет эффект рендеринга всего дерева (это форма с различными пользовательскими компонентами). Я обновляю / перестраиваю всю форму после извлечения данных (что и делает vue для реагирующих данных), которые сами говорят мне, как восстановить представление (это как схема JSON, из которой я отображаю весь вид).

Это связано с моей другой проблемой здесь .

Я наблюдаю очень странное поведение в моем приложении Vue. Когда я уничтожаю все свои дочерние компоненты и перестраиваю данные для принудительного рендеринга формы, кажется, что даже после того, как я вызвал $ destroy для каждого дочернего компонента ... Vue не полностью удаляет их из кэша?

Удаляет ли vue компонент из кэша, если вызывается $ destroy?

Поскольку я не вижу несколько компонентов одного типа в списке компонентов Vue на панели расширений Chrome Vue DevTool. Но я вижу, что одно и то же пользовательское событие дважды обрабатывается одним и тем же компонентом. Одна и та же функция, которая обрабатывает события, вызывается дважды, хотя в Vue DevTools этого типа виден только один компонент.

Это происходит только после того, как я рендерил форму. Когда страница загружается в первый раз, все работает. Затем, после того как я сбросил форму, уничтожив дочерний компонент и сбросив данные для повторного рендеринга формы, волшебным образом этот дочерний компонент начинает обрабатывать событие дважды ... а в третьем - обрабатывать события трижды. Но я вижу только один компонент в панели расширения Google Chrome VueJS DevTool. Поэтому я предполагаю, что vue по-прежнему хранит ранее уничтоженный компонент в кэше. Я пытаюсь понять, как мне уничтожить эти компоненты в кеше.

Если кто-то заметил нечто подобное и нашел решение, пожалуйста, дайте мне знать.

В данный момент я собираюсь еще немного покопаться в ключах своих компонентов (для этого конкретного компонента не задан явный ключ).

Answer 1

Прежде всего, документация vue гласит:

vm.$destroy

В обычных случаях использования вам не нужно вызывать этот метод самостоятельно. Предпочитают управлять жизненным циклом дочерних компонентов в управляемых данными мода с использованием v-if и v-for.

Таким образом, вместо того, чтобы самостоятельно разрушать и перестраивать компоненты, вам действительно нужно позволить vue обработать это через v-if и v-for. Если компоненты не обновляются в соответствии с вашими изменениями, возможно, вы столкнулись с проблемой реактивность .

Как вы упомянули, что это глубоко вложенная структура, реактивность является ключом к поддержанию компонентов в соответствии с данными.

Vue не позволяет динамически добавлять новые реактивные свойства корневого уровня к уже созданному экземпляру. Однако можно добавить реактивные свойства к вложенному объекту, используя метод Vue.set(object, key, value):

Vue.set(vm.someObject, 'b', 2)

Внутри компонента:

this.$set(this.someObject, 'b', 2)

Кроме того, имейте в виду, что Vue должен выполнять тяжелую работу в отношении управления компонентами, в то время как вы должны определить параметры, с помощью которых отображается компонент.