почему компонент не разрушается при v-if
У меня есть очень простой пример. Есть два ДИВС каждый с 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

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 можно использовать повторно без проблем.


v-if
на самом деле уничтожить компонент, когда он ложен

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"
.