Vue组件的事件是否有必要在组件销毁前进行移出

最新推荐文章于 2024-05-21 10:17:20 发布
最新推荐文章于 2024-05-21 10:17:20 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSYfairy/article/details/107168361
版权

在这里插入图片描述
上面说的是Vue本身的一-些绑定监听,比如v - mode1,@click,@b1ur等等。

但是原生的document.addEventListener事件比如scroll , keydown , keyup , vue当然监测不到,无法移除监听,你可以自己销毁

你不移除就会遇到我昨天刚回答的一个哥们遇到的问题:利用keep-alive缓存页面的时候另顶面会执行上一个页面的方法? , 很多页面同时处理监听事件。

CSYfairy
关注
专栏目录
Vue路由
weixin_48494427的博客
08-06 856
SPA也就是单页Web应用，特点是：整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要，通过ajax请求获取。2、浏览器的历史记录有两种写入模式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push；（2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。（1）理解：value是function，用于处理客户端提交的请求。...
ref获取元素 vue 删除子元素_vue 使用ref获取DOM元素和组件引用
weixin_39890289的博客
01-17 3260
在vue中可以通过ref获取dom元素，并操作它，还可以获取组件里面的数据和方法。HTML部分：这是H3 refJS部分：// 定义一个组件var com1 = {template: `这是子组件的内容`,data() {return {msg: "子组件的数据"}},methods: {fun1() {console.log("子组件的fun1方法");}}}// vue实例var app = ...
【vue优化】 事件的销毁
jieweiwujie的博客
01-24 6329
事件的销毁 Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件 而对于定时器、addEventListener注册的监听器等，就需要在组件销毁的生命周期钩子中手动销毁或解绑，以避免内存泄露 <script> exportdefault{ created(){ this.timer=setInterval(this.refresh,2000) addEventListener('touchmove', this.touc...
vue3组件销毁
最新发布
wangzhen12138的博客
05-21 3392
在 Vue 3 中，组件的销毁通常涉及几个步骤和考虑因素。组件的销毁意味着从 DOM 中移除该组件，并清除与之相关的所有事件监听器和子组件。来控制组件的销毁与创建。这种方法能够确保组件在不再需要时被正确销毁，同时遵循 Vue 的生命周期管理。如果你需要更细粒度的控制，可以考虑使用 Vue 提供的生命周期钩子，如。方法，因为它会跳过组件的生命周期钩子，可能会导致一些难以追踪的 bug。时，Vue 会销毁该组件及其所有子组件，并从 DOM 中移除。如果你想在销毁组件之前保存其状态，并在之后恢复它，可以使用。
Vue页面不销毁
qq_45337854的博客
12-08 1833
Vue页面不销毁
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
歌谣的博客
03-06 1906
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？ 需要，原生DOM事件必须要手动销毁，否则会造成内存泄漏 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
vue组件销毁重置详解
热门推荐
曹定栓的博客
01-18 3万+
vue组件销毁重置详解
vue.js内置组件之keep-alive组件使用
10-18
`destroyed`钩子会在组件销毁时清除缓存。在渲染过程中，`keep-alive`会检查组件的`include`和`exclude`属性，以确定是否将组件放入缓存。 组件的`key`属性在`keep-alive`中起着重要作用，因为它用于区分不同的组件...
vue中keep-alive内置组件缓存的实例代码
10-15
在Vue.js框架中，`keep-alive`是一个内置的组件，它的主要作用是实现组件的缓存，以避免在切换组件时频繁地销毁和重建组件实例，从而提高应用性能。本文将深入探讨`keep-alive`的工作原理和使用方法，并通过实例代码...
基于vue3实现的列表无限滚动组件
10-18
同时，我们使用`onMounted`和`onBeforeUnmount`生命周期钩子来添加和移除滚动事件监听器，确保组件销毁时不会造成内存泄漏。 此组件适用于"大屏数据滚动效果"，例如在大数据展示、实时更新的信息流或者监控界面等...
Vue-生命周期-销毁
m0_73839298的博客
05-18 1126
点我n+1</button><button @click="bye">点我销毁vm
vue+antv g6完成关系图 高亮 添加节点 销毁
来了波，兄嘚
09-10 6803
vue+antv g6完成关系图 效果图： 上代码： 安装依赖：npm install @antv/g6 <template> <div id="main"></div> </template> <script> import G6 from "@antv/g6"; export default { data() { return { gg: { nodes: [ {
vue template属性 tag_Vue生命周期，我奶奶看了都懂了
weixin_39654917的博客
11-20 865
最近一直在学习Vue，而vue生命周期是我们不可能绕开的一个很核心的知识点，今天来简单的梳理一下大概的内容。一、钩子函数在一开始学习的时候，总有钩子函数这个名词冒出来，而且在vue官网文档中也频繁出现，也相信给很多初学者带来了困扰。那到底什么是钩子函数呢？按我个人的理解，钩子函数就是一个函数，他最大的特点就是在生命周期执行流程中去执行的。 钩子函数钩子函数，就是挂载一些东西的，我们把需要实现的一些...
关于vue组件的destroy和事件传递的一些问题
一个简单的故事
09-10 2万+
事情是这样的，遇到了一个问题： 使用vue进行开发的时候，在一个组件中使用事件总线进行事件监听之后，当组件销毁后该事件依然被监听。 背景 vue对于跨组件的事件监听处理有一个逐渐变迁的过程。 $dispath和$broadcast 在新版vue中废弃了旧版的一种事件传递方式。使用dispath和broadcast两种方式进行事件的传递响应。 dispath 是由子组件发...
vue移除事件
weixin_43743956的博客
12-16 4019
在vue中没有提供移除事件的方法。在网上看到一个很巧妙的方法，就是添加一个标记位。 来之 https://segmentfault.com/q/1010000004346194的高票回答 &lt;p @click="flag &amp;&amp; clickEvent()"&gt;&lt;/p&gt; （程序员真牛逼
vue 创建监听,和销毁监听(addEventListener, removeEventListener)
weixin_30847271的博客
05-02 8151
最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: mounted() { window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名 }, 　　后来发现要在后面添加一个true之后才行: mounted() { w...
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
lookingForw_4585的博客
08-04 9789
 antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。  介于业务需要，最近在学习G6,特此记录下~~  简单展示： 功能点： 连接关系图表 鼠标控制缩放 节点拖动事件 画布拖动事件 边的状态切换 节点层级展示 边的动态增加 还原视图 特性：   状态：G6中提供了状态管理，指的是节点或边的状态，包括交互状态和业务状态。   动画：动画是可视化中非常重要的内容，本例中涉及到边的动画效果   字体图标：本例中使用iconfont，具体实现参照G6官方文档，比较的详细  
vue 组件销毁并重置
Jackson991的博客
07-26 1万+
vue 组件销毁并重置 https://www.jianshu.com/p/3f51c9c752b1 (转载)
Vue组件间事件传递与DOM更新策略探析
Vue组件间事件传递主要有两种方法：自下而上的事件冒泡（子组件向父组件传递）和自上而下的props传递（父组件向子组件传递）。自定义事件允许子组件向父组件发送信息，而无需了解父组件的具体实现。这种方式提高了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值