почему компонент не разрушается при v-if

почему компонент не разрушается при v-if

31.10.2018 05:27:52 Просмотров 23 Источник

У меня есть очень простой пример. Есть два ДИВС каждый с V-Если с одной переменной, с правдой и с ложью. Существует компонент, вложенный в каждый из дивов (один и тот же компонент).

То, что я вижу (из консоли.log) заключается в том, что даже при наличии v-if компонент не уничтожается и не создается, а используется повторно.

Это жучок? особенность? Потому что я полагался на то, что они будут уничтожены (проблема возникает в каком-то более сложном компоненте).

Спасибо.

Html и javascript ниже, есть также jsfiddle https://jsfiddle.net/ekeydar/p64ewLd1/3/

Это и есть html:

<div id="app">
  <button @click="show1=!show1">
    Toggle  
  </button>
  <div v-if="show1">
    <my-comp title="comp1"/>
  </div>
  <div v-if="!show1">
    <my-comp title="comp2"/>
  </div>
</div>

Это и есть javascript:

Vue.component('my-comp', {
    props: ['title'],
  template: '<h1>{{title}}</h1>',
  created: function() {
    console.log('my-comp.created title='+ this.title);
  },
  destroyed: function()  {
    console.log('my-comp.destroyed title='+ this.title);
  }
}),

new Vue({
  el: '#app',
  data: {
    show1: true,
  },
})
У вопроса есть решение - Посмотреть?

Ответы - почему компонент не разрушается при v-if / why component is not destroyed under v-if

Является ответом!
T. Dirks

31.10.2018 05:34:52

Это предназначенная функциональность для Vue. Чтобы Vue знал, что компонент не должен использоваться повторно, а вместо этого должен быть уничтожен и создан другой компонент, добавьте key

Обратите внимание , что вы также можете поместить <div v-if="show1"> <my-comp title="comp1" key="somekeyhere"/> </div> <div v-else> <my-comp title="comp2" key="someotherkeyhere"/> </div> , но я думаю, что его проще добавить в компонент, так как сам div можно использовать повторно без проблем.

Jeff

31.10.2018 05:35:24

Разница между v-ifи v-showзаключается только в том, существует ли элемент в DOM, а не в том, создан он или нет. v-ifудаляет его из DOM, когда false, v-showпросто скрывает его. Компонент, однако, не разрушается в любом случае.

https://stackoverflow.com/questions/53085722/why-component-is-not-destroyed-under-v-if/53085879#comment104752074_53085879
v-ifна самом деле уничтожить компонент, когда он ложен
Timmmm

28.01.2020 01:33:37

Вот небольшой трюк (или ужасный хак, Если хотите), если вы хотите, чтобы ваш компонент всегда уничтожался, когда он скрыт (например, для сохранения памяти). Используй NaNв качестве key. Поскольку NaNникогда не равен самому себе, Ву всегда будет думать, что это другой элемент.

  <div v-if="show1">
    <my-comp title="comp1" :key="NaN"/>
  </div>
  <div v-if="!show1">
    <my-comp title="comp2" :key="NaN"/>
  </div>

Вам нужно :key=, а не key=, потому что в противном случае атрибут будет строкой со значением "NaN".

Закрыть X