почему компонент не разрушается при 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".