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實現。