vue组件什么条件下需要摧毁？
v-if与组件的自动销毁
在文档中有这样一句话，v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
如果我们有这样一个组件
<div id="app">
<template>
<el-button type="primary" @click="handleClick">销毁</el-button>
<i-ctorc v-if="isChild"></i-ctorc>
</template>
</div>
我们通过点击按钮改变v-if的值，销毁Child组件
var Child = {
template: `<div>{{ data }}</div>`,
data () {
return {
data: 'Child component'
}
},
beforeDestroy () {
console.log('before destory')
console.log(this.$el)
},
destroyed () {
console.log('destoryed')
console.log(this.$el)
}
}
var Ctorc = Vue.extend(Child)
var Main = {
data () {
return {
isChild: true
};
},
components: {
'i-ctorc': Ctorc
},
methods: {
handleClick () {
this.isChild = false
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')var Child = {
template: `<div>{{ data }}</div>`,
data () {
return {
data: 'Child component'
}
},
beforeDestroy () {
console.log('before destory')
console.log(this.$el)
},
destroyed () {
console.log('destoryed')
console.log(this.$el)
}
}
var Ctorc = Vue.extend(Child)
var Main = {
data () {
return {
isChild: true
};
},
components: {
'i-ctorc': Ctorc
},
methods: {
handleClick () {
this.isChild = false
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
在用户点击时，Child组件就会被销毁，销毁的时候触发生命周期的钩子，在控制台输出
before destory
<div>Child component</div>
destoryed
<div>Child component</div
手动编译与DOM操作
如果你为了配置方便，想要通过字符串配置组件，而不是slot等。你可能会用到compile和el。这时候你就要手动销毁组件了。
可以参考iView的cell实现。