vue 销毁dom_<vue疑惑>关于使用vm.$destroy()和destroyed钩子的问题

先从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变量&#

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值