执行 this.$destroy()后原生DOM事件也无法执行

已于 2022-12-13 16:01:29 修改
阅读量1.2k 收藏 5
点赞数 8
分类专栏： Vue学习笔记和案例 文章标签： vue.js 前端 javascript
于 2022-11-22 21:15:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44566194/article/details/127990155
版权

在跟随尚硅谷 Vue 全家桶学习视频学习销毁组件实例时，视频中执行 this.$destroy() 后虽然组件实例销毁了，但原生 DOM 事件依然能调用，但实际操作发现不仅组件实例销毁，原生 DOM 事件也无法被调用了，其原因主要在于 vue.js 版本的问题，即

2.7.0 及以上版本执行完 this.$destory() 指令后，原生DOM的响应事件也不会被触发。

通过指令 查询 vue 版本

npm list vue

结果发现我安装的版本是 2.7.14 的版本，因此无法执行原生 DOM 事件

上官海岚
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue清除指定缓存的方法（三个）
09-30 2万+
一、 路由方法，可以小改 在main.js文件中 Vue.mixin({ beforeRouteLeave:function(to, from, next){ console.log('111111111111111触发了') console.log(this) // 确定是点击关闭按钮过来的 关闭的路由时可缓存的 if(from.meta.reload&&from.meta.keepAlive&&this.$vnode.comp
vue中 $destroy 并且 removeChild 组件数据响失效
舜岳的博客
01-07 5864
this.$destroy() 作用: 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发 beforeDestroy 和destroyed 的钩子。 当销毁一个组件时我们有可能会用这种方法： this.$destroy() this.$el.parentNode.removeChild(this.$el) //通过父级元素销毁当前组件 查看页面html该组件确实被销毁， 但是removeChild销毁组件只是表面上的销毁了该组件， 实际上该组件函数任然缓存在vue中，下次组件显
vue3组件销毁
最新发布
wangzhen12138的博客
05-21 1136
在 Vue 3 中，组件的销毁通常涉及几个步骤和考虑因素。组件的销毁意味着从 DOM 中移除该组件，并清除与之相关的所有事件监听器和子组件。来控制组件的销毁与创建。这种方法能够确保组件在不再需要时被正确销毁，同时遵循 Vue 的生命周期管理。如果你需要更细粒度的控制，可以考虑使用 Vue 提供的生命周期钩子，如。方法，因为它会跳过组件的生命周期钩子，可能会导致一些难以追踪的 bug。时，Vue 会销毁该组件及其所有子组件，并从 DOM 中移除。如果你想在销毁组件之前保存其状态，并在之后恢复它，可以使用。
执行this.$destory()指令后，原生DOM也没有响应的问题
s_123_123__的博客
08-14 1475
2.7.0及以上版本执行完this.$destory()指令后，原生DOM的响应事件也不会被触发。（个人猜测，7.0版本以后执行完this.$destory()后，原生DOM也被销毁了）
Vue销毁流程+Vue中组件的使用（嵌套）+Vue实例与组件实例+Vue中一个重要的内置关系+单文件组件的使用，尚硅谷Vue系列教程学习笔记（6）
weixin_43749999的博客
08-19 2581
本学习笔记主要包含如下内容： 051-销毁流程 052-生命周期总结 053-对组件的理解 054-非单文件组件 055-组件的几个注意点 056-组件的嵌套 057-VueComponent 058-Vue实例与组件实例 059-一个重要的内置关系 060-单文件组件
this.$toast() 了解一下？
10-17
在Vue.js框架中，`this.$toast()` 是一种方便的全局方法，用于在应用中快速显示消息提示，类似于浮层通知。这种功能常见于各种UI框架中，如Element UI、Vuetify等，它允许开发者在任何地方通过简单的JavaScript调用...
Vue.js实例方法之生命周期详解
12-29
本文主要给大家介绍的是...比如我们扩张了一个全局组件，通过$mount手动的挂载到DOM上，也就生成了一个Vue实例。 <div id=#app></div> 扩张一个全局组件，并且挂载到DOM上。 //扩张全局的组件 var navBar = Vue.exte
图解DataX执行流程.pdf
08-17
在执行完成后，DataX会输出统计信息，包括执行时间、内存使用情况等信息。 DataX的执行流程是一个复杂的过程，涉及到多个组件和插件的协作。了解DataX的执行流程对于使用DataX进行数据集成非常重要。
浅尝Spring注解开发_Bean生命周期及执行过程.doc
07-08
- DisposableBean 接口：包含 `destroy()` 方法，该方法会在容器关闭时调用，用于执行销毁操作。 例如： ```java @Component public class Car implements InitializingBean, DisposableBean { public Car() { ...
destroy-mbstract.rar_USB编程_destroy mat
07-14
基于余弦调制多相滤波器的设计,该滤波器的通带窄,阻带衰减高,适用于子信道数为偶数的情况
vue组件销毁重置详解
热门推荐
曹定栓的博客
01-18 3万+
vue组件销毁重置详解
Vue实例生命周期
weixin_44904482的博客
09-14 3953
Vue实例的生命周期
vue生命周期钩子函数
qq_45152044的博客
02-19 275
前言 看本文可同时参考官方文档。点击跳转 什么是生命周期？ 一个东西从出生到死亡 什么是钩子函数？ 提前在对象内部预埋的函数，这些函数会在规定的情况下执行。 vue的生命周期 在vue不同的时期，会执行一些特定的函数 beforeCreate创建前：数据和容器都没有加载 created创建后：刚读取完数据，还没有找到容器 beforeMount挂载前：读完完数据，并找到容器，但是容器里的数据还未替换 mounted挂载后：读完完数据，并找到容器，容器里的数据已替换，所谓挂载就是m和v建立联系。 bef
vue生命周期函数
yangdengce的博客
02-18 227
vue生命周期函数 beforeCreate： 可以在这个钩子中插入我们的代码，在对象初始化之前执行，初始化非响应式变量； created： 实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$ el属性，$ref属性内容为空数组，最早只能在created中操作 ajax请求，页面的初始化； beforeMount： 挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数； mo
vue 销毁dom_<vue疑惑>关于使用vm.$destroy()和destroyed钩子的问题
weixin_39841640的博客
01-14 3198
先从v-if出发，观察组件销毁turn-Com复制代码当组件使用v-if切换时正常走完destroyed钩子，DOM也会相应更新移除在destroyed钩子中使用this.tesMessage = 'XXX'试图改变View内容也已经是无效的了当组件调用vm.$destroy()手动销毁时同样走完了destroyed钩子，但页面中的DOM还存在，切换switchCom变量，组件将重新走生命周期，生...
关于vue生命周期
w2807585195的博客
07-27 279
关于vue生命周期
Vue 生命周期(分享)
weixin_60547084的博客
04-15 2275
先看图 Vue 实例初始化：beforeCreate → created → beforeMount → mounted Vue 实例更新：beforeUpdate → updated Vue 实例销毁：beforeDestroy → destroyed 常用的生命周期钩子： mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】 关于销毁 Vue 实例： 销毁后借助 Vu.
this.$destroy
07-27
您好！对于您提到的 `this.$destroy`，这是一个Vue.js框架中的方法。它用于销毁一个Vue实例并清理它的所有指令、事件监听器和子组件。 当调用 `this.$destroy` 方法时，Vue实例会触发 `beforeDestroy` 和 `destroyed` 生命周期钩子。在这个过程中，Vue会解绑所有的指令和事件监听器，并销毁子组件。 需要注意的是，`this.$destroy` 方法只能在Vue实例上调用，而不是在任何其他上下文中使用。这个方法通常在组件的销毁过程中使用，以确保组件在不再需要时被正确地清理和销毁。 希望这个解答对您有所帮助！如果您还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值