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。這時候你就要手動銷毀組件了。

可以參考iView的cell實現。

但是官方並不建議！

但是官方並不建議！

但是官方並不建議！

---

我覺得不如問在什麼條件下不需要銷毀組件。

vue在條件轉換或者路由切換後，如果不做keep-alive的話，都會自動幹掉之前的組件啊？

vue總會默默的把不需要的組件給打死的，難道不是這樣嗎？

---

我想說手動銷毀keepalive的路由會內存泄漏 頁面組件是放不掉 _(:з」∠)_ 反正我已經改成失活的時候把數據銷毀掉了

---

要回答這個問題，我認為首先需要理解lifecycle和虛擬DOM，Vue是基於MVVM的一個框架，根據data渲染頁面，由路由去控制組件展示，講道理在切換路由的時候，會根據data去生成虛擬DOM，然後再渲染成真實DOM，在這個過程中由watch負責監聽DOM變化，並將最後一次的結果進行渲染，理論上來講，不需要考慮組件摧毀

---

我見過的只有element-ui的message全家桶組件。那一堆組件是用完用就可以扔掉了。

---

我認為你不需要關注組件的銷毀。

---

推薦閱讀：