vue 生命周期4 销毁流程 beforeDestroy destroyed

最新推荐文章于 2024-07-19 12:00:10 发布
最新推荐文章于 2024-07-19 12:00:10 发布
阅读量1.5w 收藏 18
点赞数 7
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/118885574
版权
本文详细探讨了Vue实例的销毁流程，包括$destroy调用后的变化、beforeDestroy和destroyed钩子的作用。在销毁过程中，数据和方法仍然可用，但不再触发更新。在beforeDestroy阶段，数据变更不会反映到视图，而destroyed后，Vue实例完全解除绑定，事件监听器和指令失效。建议在这些钩子中进行善后操作，如关闭定时器和清理自定义事件。
摘要由CSDN通过智能技术生成

销毁流程：

 

当调用了vm.$destroy 则触发销毁流程

验证下：

加一个按钮和销毁事件

 

效果：

发现点击了vm销毁,但是页面上仍不变

因为虽然vm没了但是vm的工作成果还是在的

并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了

再点加1就发现不好用了 

发现vue的开发者工具上也没有了任何东西了

 验证：指令也不奏效

 点击n加1发现页面都不变了说明指令也不奏效了 

验证事件监听器也不奏效了

 但发现在销毁之后点击n++,仍能触发事件

因为这边的click方法是原生jsdom实现,也是杀死vm它仍存在

而官网说的事件监听器,指的是自定义事件

2.beforeDestroy

销毁前 

验证watch关闭了

发现当销毁后,就留下了一个原生js实现的click事件回调

 验证：data和methods都处于可用状态

发现仍能输入n,说明data还可以用

发现方法仍能被调用,但是页面不变！！！！！

为什么没有变成2？？？？

以为,这边其实进行了n++代码

但是在beforeDestroy是在销毁前有关vue销毁实例的所有数据都不会触发更新了

也就是说到了beforeDestroy虽然可以调用data可以调用方法,但是所有数据都不会发生更改了

验证数据不会更改了

页面没有发生更改,说明数据在beforeDestroy之后就不会发生更改了

 在updated中就可以

 

也就是说除非把数据修改放在这两个钩子里数据再也不会触发更新了,都快销毁了就别再修改数据了,再做点善后的事就行了,关闭点定时器,自定义事件等等

3.

 消除了定时器,子组件,和自定义事件

4.destroy

被忽略最严重的钩子,只要知道有这么一个钩子就行

兜里揣着星星
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue 生命周期 返回不触发_解决Vue中的生命周期beforeDestory不触发的问题
weixin_39854369的博客
12-20 2447
分享一句很有用的经验：给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed结束！补充知识：vuex actions正确使用vue-resource的方式( Error in mounted hook: "TypeError: Cannot read property 'get' of u)场景. SPA中 使用vuex初始化一...
Vue——生命周期
鹿蹊zz的博客
08-10 1212
更新
Vue生命周期 11个钩子
小劉同志、的博客
08-06 1547
Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们称为Vue 实例的生命周期(钩子函数) 附上网上找的一张图解释 当我们 new vue 的时候，这些函数就会自动执行 生命周期钩子的11个阶段： 创建： beforeCreate – 数据初始化前 created – 数据初始化之后 挂载： beforeMount – 数据准备渲染 Mounted – 数据渲染完成 运行： beforeUpdata – 数据更新前 updated
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue】深入解析 Vue 生命周期：从创建到销毁的完整流程
最新发布
lph159的博客
07-19 814
Vue 生命周期是指Vue 实例从创建到销毁的整个过程。每个 Vue 组件都有一个生命周期，在不同的生命周期阶段，可以执行特定的操作。创建阶段：Vue 实例的初始化过程。挂载阶段：将 Vue 实例挂载到 DOM 上。更新阶段：响应数据变化并更新视图。销毁阶段：Vue 实例及其所有子组件的销毁过程。
vue 生命周期 beforeDestroy 调用
热门推荐
cppp1111的博客
03-22 2万+
vue 生命周期 beforeDestroy 调用1. 离开当前路由，会直接调用2.离开当前路由，不会直接调用，需要程序控制调用；3.``应用于全局事件`` 1. 离开当前路由，会直接调用 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 2.离开当前路由，不会直接调用，需要程序控制调用； 当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用 beforeR
Vue高级----hook:beforedestroy
muzidigbig的博客
01-16 1万+
vue中hook的两点使用 1. 在同一个组件中 例如：在mounted中添加一个监听需要在beforeDistroy中移除这个监听，考虑到某些原因你不想再写个beforeDistroy去实现，这时候绿巨人hook就该登场了 mounted () { window.addEventListener('online', this.handleOnline) this.$once('hook:beforeDestroy', function () { window.removeEvent
Vue高级-hook:beforeDestroy
weixin_42232325的博客
01-21 1028
vue中hook的两点使用 在同一个组件中 场景：在mounted中添加一个监听，需要在beforeDistroy中移除这个监听，如果不想再写个beforeDistroy去实现，可以使用hook mounted() { window.addEventListener('online', this.handleOnline); this.$once('hook:beforeDestroy', function() { window.removeEventListener('
vue生命周期和react生命周期对比【推荐】
10-18
首先，Vue.js的生命周期可以分为八个阶段：创建前beforeCreate、创建created、载入前beforeMount、载入mounted、更新前beforeUpdate、更新***d、销毁前beforeDestroy和销毁destroyed。Vue实例化过程中会依次调用这些...
浅析Vue 生命周期
08-27
Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue 实例时，会读取所有的...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue中destroyed方法的使用说明
11-20
我们从destroyed的字面意思可知，中文意为是“销毁”的意思，当我们离开这个页面的时候，便会调用这个函数(具体可以看看vue的的生命周期)，我们常用来销毁一些监听事件及定时函数，例如： // 销毁监听事件 destroyed() { window.removeEventListener('resize', this.resizeWin) } 从上函数可知，当用户离开页面的时候便会销毁监听事件。 补充知识：vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed 先来回顾一下vue实例的生命周期（以下图片来自官方文档）。 我的项目中某个组件在l
详解Vue生命周期的示例
08-31
本文将通过示例详细解释Vue生命周期的各个阶段。 首先，Vue实例在创建时会经历以下阶段： 1. **created**：当Vue实例创建后，`created`钩子函数会被调用。在这个阶段，数据绑定、计算属性、方法、监听器和事件回调...
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-17 2571
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）
vue实例的生命周期
qq_33879627的博客
09-28 256
（十三）Vue实例的生命周期 13.1 生命周期图 ​ Vue实例的生命周期中有多个状态。 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA
beforeDestroy与destroyed的使用
seimeii的博客
07-29 2747
beforeDestroy与destroyed的使用
vue监听用户在页面的浏览时间需在beforeDestroy()里面进行销毁
LuiChun
11-27 7702
无论把这些钩子放到哪个位置，都是按顺序执行 <template> <div class="all"> <div class="one"> <h3>生命周期</h3> <div> <h4>new Vue()</h4> </div> <div> <h4>Init Events&Li
Vue：beforeDestroy和destroyed生命周期函数的特点
weixin_46682277的博客
03-08 4774
beforeDestroy生命周期函数表示即将销毁，此时仍然可以使用子组件的实例、methods、watch 到了destroyed生命周期函数，此时已经被销毁，无法再使用子组件的实例，methods、watch
vue生命周期销毁函数
08-12
Vue的生命周期销毁函数是beforeDestroy和destroyed。beforeDestroy函数在实例销毁之前调用，而destroyed函数在Vue实例销毁之后调用。在beforeDestroy函数中，实例仍然完全可用，可以进行一些清理工作。而在destroyed函数中，Vue实例指示的所有东西都会解绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。这两个函数在Vue的生命周期中扮演着非常重要的角色，用于处理实例销毁前和销毁后的一些操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue生命周期函数](https://blog.csdn.net/popping_kai/article/details/113841497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue生命周期钩子函数（一个页面从开始到销毁的过程）](https://blog.csdn.net/m0_65789360/article/details/122167896)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值