我有一个非常简单的例子.有两个div,每个v-if都有相同的变量,一个为真,一个为假.每个div中都嵌套了一个组件(同一个组件).
我(从console.log)看到的是,即使有v-if,组件也不会被销毁和创建,而是被重用.
这是虫子吗?特色因为我依赖于它们被销毁(问题发生在一些更复杂的组件中).
谢谢
下面是Html和javascript,还有JSFIDLE 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,
},
})