浏览器刷新vue为什么不会走beforeDestroy和destroyed生命周期

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量2.7k 收藏 2
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42369612/article/details/126624737
版权

浏览器刷新vue为什么不会走beforeDestroy和destroyed生命周期

业务场景:

需要在页面卸载的时候去处理一些数据,比如清空 localStorage
然后就会把一些业务逻辑写在beforeDestroy或者destroyed的生命周期里

浏览器刷新的时候会走这两个生命周期吗

答案是不会
不是说在组件卸载的时候会走这两个生命周期么,为什么不会走呢?

浏览器刷新是做了些什么

浏览器的刷新其实相当于重新访问这个ip地址,包括html和js,css文件都会重新获取(这里会涉及到文件缓存的问题,但与vue的生命周期没有关系)
浏览器不在乎你之前的页面是什么,相当于把你之前的页面给关了再打开(直接拉闸再接电)

这种情况怎么处理

可以在页面加载的时候添加一个监听事件去监听浏览器刷新,关闭,这样就可以在浏览器刷新或者关闭的时候也能处理对应的业务逻辑

重温vue生命周期

在这里插入图片描述

David_Xia001
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈vue生命周期共有几个阶段？分别是什么？
11-19
一共8个阶段 1、beforeCreate（创建前） 2、created（创建后） 3、beforeMount（载入前） 4、mounted（载入后） 5、beforeUpdate（更新前） 6、updated（更新后） 7、beforeDestroy（销毁前） 8、destroyed（销毁后） vue第一次页面加载会触发哪几个钩子函数？ beforeCreate、created、beforeMount、mounted DOM 渲染在哪个周期中就已经完成？ mounted 补充知识：记录一次vue数据不同步的排查 今天我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后
浏览器刷新为什么不会走销毁（beforeDestroy和destroyed）周期？
pink_cz的博客
12-23 1409
因为之前我遇到一个内存泄漏的问题，然后呢我在vue的beforeDestroy生命周期钩子函数里去释放一个实例的内存（3d模型），然后因为电脑很卡，我一遍又一遍的刷新页面，之后我去看那个任务管理器的时候发现谷歌的浏览器内存竟然占到了四五个g，我想着我去释放内存了，怎么内存还会增长？我们可以在页面加载的时候添加一个监听事件去监听浏览器刷新,关闭,这样就可以在浏览器刷新或者关闭的时候也能处理对应的业务逻辑。浏览器不在乎你之前的页面是什么,相当于把你之前的页面给关了再打开 (
前端页面点击刷新-触发vue生命周期加载最新数据
三月和九月的博客
02-19 472
需求背景：layout布局，页面头部通过定时器获取后端消息的伪消息通知功能，在点击消息时获取所有消息总数并且刷新页面，以便触发vue的生命周期重新获取所有消息，消息展示在content中。要触发页面刷新，可以使用vue路由的router.push方法，添加一个动态的query参数，可以用一个随机数或当前时间戳，样每次路由跳转时，查询参数的值都会发生变化，从而强制刷新页面。
vue组件生命周期详解
01-19
本文实例为大家分享了vue组件生命周期的具体代码，供大家参考，具体内容如下 分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码： <!doctype html> <html> <head> <meta cha
vue生命周期实例小结
01-19
本文实例分析了vue生命周期。分享给大家供大家参考，具体如下： 每个Vue实例都存在完整的生命周期，经历从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。如下图所示 钩子函数 vue的完整生命周期可分为三个阶段：初始化阶段、运行阶段和销毁阶段。共存在很多钩子函数，他们在vue生命周期不同的阶段进行操作,列举如下： beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed 钩子函数说明 beforeCreate 通过n
vue 页面退出 组件不走beforeDestroy 计时器一直在执行
大圣爱吃香蕉
05-24 2309
调用组件可以通过 v-if 来设置组件创建与销毁 页面退出设置false可使组件销毁 执行beforeDestroy
vue组件使用生命周期不执行的方法
早晚的博客
06-01 306
使用$ref的方法获取组件的ref，然后调用子组件的方法
页面刷新Vue会触发boforedestory（destoryed）吗？
web_noob的博客
07-14 868
不会。
解决Vue中的生命周期beforeDestory不触发的问题（用了keep-alive）
han_xiao_xiao的博客
09-21 6004
给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed
Vue随笔（二）生命周期
u013798317的博客
11-27 285
vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后） 下面我们就来分别看看vue生命周期的这八个阶段： 1、创建前（beforeCreate） 对应的钩子函数为...
解决Vue中的生命周期beforeDestory不触发的问题
11-20
分享一句很有用的经验： 给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed 结束！ 补充知识：vuex actions正确使用vue-resource的方式( Error in mounted hook: “TypeError: Cannot read property ‘get’ of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 actions : { setTaskList : function (store) { let
Vue 生命周期
01-08
什么是vue的生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期 vue的生命周期里边有八个生命周期钩子函数分别是 beforeCreat() 创建前 ...
vue中destroyed方法的使用说明
11-20
我们从destroyed的字面意思可知，中文意为是...补充知识：vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed 先来回顾一下vue实例的生命周期（以下图片来自官方文档）。 我的项目中某个组件在l
Vue前端框架12 组件生命周期、生命周期的应用、动态组件、组件保持存活、异步组件、依赖注入、Vue应用原理
Wantfly9951的博客
09-14 813
每个Vue组件在创建时需要经历一系列的初始化步骤，比如设置侦听，编译模板，挂载实例到DOM，或者数据改变时更新DOM。在使用上面说的component:is 在多个组件之间切换时，被切换的组件会被卸载。在这个过程中，也会运行生命周期钩子函数，可以让我们在特定阶段运行自己的代码。可以通过keep-alive 组件强制被切换掉的组件依然保持存活状态。每个Vue应用都是从createApp函数创建的一个新的应用实例。公共资源存放在src目录下的assets文件夹下。一般我们都用App.vue作为我们的根组件。
vue 向公共组件传参时 来回切换 公共组件不刷新 生命周期不触发
qq_27970999的博客
03-25 2066
就是动态路由在来回切换时，由于它们都是指向同一组件，vue不会销毁再创建这个组件，而是复用这个组件，就是当第一次点击（如：user123）的时候，vue 把对应的组件渲染出来，但在user123, user456点击来回切换的时候，这个组件就不会发生变化了，组件的生命周期不管用了。这时如果想要在组件来回切换的时候做点事情，那么只能在组件内部（user.vue中）利用watch 来监听$route ...
Vue keep-alive后不能触发destroyed
u012174809的专栏
05-13 3721
<keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive> 当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。 首先我们来看看keep-alive是什么东西 keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。 它的作用不言而喻 用来...
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序
热门推荐
muzidigbig的博客
01-16 3万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/
vue项目切换页面beforeDestory不触发解决方法
Hassanh的博客
07-08 6212
vue项目切换页面beforeDestory不触发解决方法 主要解决销毁当前页面实例时执行操作： 可以使用路由守卫方法： 使用组件内守卫： beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 this.ws.close(); //销毁时执行的代码 next() //允许跳转页面 }, ...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 321
注释很详细，直接上代码……
请解释说明什么是Vue2中的beforeDestroy和destroyed钩子函数编写一个程序举例说明
06-14
在Vue2中，beforeDestroy和destroyed是生命周期钩子函数之一，它们分别在组件销毁之前和销毁之后被调用。beforeDestroy钩子函数在组件销毁之前会执行一些清理工作，如清除定时器、取消订阅、解绑事件等。而destroyed钩子函数则在组件销毁之后执行一些清理工作，如释放资源、清除引用等。 以下是一个简单的例子，它演示了如何使用beforeDestroy和destroyed钩子函数： ```html <template> <div> <h2>{{ message }}</h2> <button @click="changeMessage">Change Message</button> </div> </template> <script> export default { data() { return { message: "Hello World!", }; }, methods: { changeMessage() { this.message = "Goodbye World!"; }, }, beforeDestroy() { console.log("beforeDestroy: Component is about to be destroyed."); }, destroyed() { console.log("destroyed: Component is destroyed."); }, }; </script> ``` 在上面的例子中，我们定义了一个组件，它包含一个按钮和一个文本框。当按钮被点击时，文本框中的消息会改变。在组件销毁之前，我们使用beforeDestroy钩子函数打印一条消息。在组件销毁之后，我们使用destroyed钩子函数打印一条消息。这个例子演示了如何在组件销毁之前和之后执行一些清理工作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值