vue 如何控制组件初始与销毁_vue组件什么条件下需要摧毁？

Vue 是数据驱动的MVVM框架，所以上来你思考的是如何组织你的数据。

v-if与组件的自动销毁

在文档中有这样一句话，v-if会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

如果我们有这样一个组件

销毁

我们通过点击按钮改变v-if的值，销毁Child组件

var Child = {

template: `

{{ data }}

`,

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: `

{{ data }}

`,

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

Child component

destoryed

Child component

如果你想查看结果，请点击这里

手动编译与DOM操作

如果你为了配置方便，想要通过字符串配置组件，而不是slot等。你可能会用到compile和el。这时候你就要手动销毁组件了。

但是官方并不建议！

但是官方并不建议！

但是官方并不建议！