先从v-if出发,观察组件销毁

turn-Com

复制代码

当组件使用v-if切换时

正常走完destroyed钩子,DOM也会相应更新移除

在destroyed钩子中使用this.tesMessage = 'XXX'试图改变View内容也已经是无效的了

当组件调用vm.$destroy()手动销毁时

同样走完了destroyed钩子,但页面中的DOM还存在,切换switchCom变量,组件将重新走生命周期,生成一个新的实例,原来绑定的DOM会被替换

调用vm.$destroy()手动销毁前,尝试改变数据

这里却出现了一个小插曲

我试图在调用销毁前改变data中的testMessage,但DOM中的内容没有如实更新

调用vm.$destroy()后若需要清理DOM中的内容

调用这个方法可以实现,但如果有v-else或是其他v-if引用了switchCom变量进行条件渲染的DOM都会被移除

this.$el.parentNode.removeChild(this.$el);

复制代码

此时继续切换switchCom变量,将报错

总结现象

这里的测试做的还不够完善,但清楚可见走完destroyed后的组件实例已经与相应的DOM解除绑定,通过vm.$destroy()也确实能让组件实例走完destroyed钩子,实例解除了与DOM的绑定但DOM仍然会残留,官方也提倡使用v-if等数据驱动的方式控制子组件的生命周期销毁。

这里留下了个问题,无论是v-if指令或是destroy()让组件销毁后,其实例中的data和$el还是可以取得到的(这或许是我验证的方法有问题),用API中的一句解答是,销毁指:完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。这样似乎有悖完全销毁一个实例,那么真正的实例销毁和内存释放发生在什么时候呢。

Logo

前往低代码交流专区

更多推荐