vue单页面应用, 页面刷新, 后退, 前进及关闭时, vue执行的生命周期钩子

最新推荐文章于 2025-05-28 23:18:08 发布
最新推荐文章于 2025-05-28 23:18:08 发布
阅读量7.6k 收藏 25
点赞数 6
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nhq2018/article/details/111058665
本文解析了Vue.js单页面应用中页面刷新、后退、前进及关闭时的生命周期钩子执行顺序。详细介绍了不同操作下各组件生命周期的具体流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue单页面应用,页面刷新, 后退, 前进及关闭时, vue执行的生命周期钩子

页面刷新时, vue执行的生命周期钩子

依次执行当前页面vue组件的beforeCreate, created, beforeMount, mounted, beforUpdate, updated

页面后退时, vue执行的生命周期钩子

假设从b页面后退到a页面
依次执行a页面vue组件的beforeCreate, created, beforeMount, 然后是b页面组件的beforeDestroy, destroyed, 最后是执行a页面vue组件的mounted, beforUpdate, updated

页面前进时, vue执行的生命周期钩子

假设从a页面到b页面
依次执行b页面vue组件的beforeCreate, created, beforeMount, 然后是a页面组件的beforeDestroy, destroyed, 最后是执行b页面vue组件的mounted, beforUpdate, updated

页面关闭时, vue执行的生命周期钩子

直接点击浏览器标签关闭页面, 不执行任何生命周期钩子, 如果要在页面关闭前做点事情(例如保存数据),
可以给页面绑定beforeunload或unload事件, 在事件中编写逻辑

随手一记, 写的不对的地方, 欢迎指出

Vue随笔（二）生命周期
u013798317的博客
11-27 376
vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后） 下面我们就来分别看看vue生命周期的这八个阶段： 1、创建前（beforeCreate） 对应的钩子函数为...
vue单页面实现当前页面刷新或跳转时提示保存
10-17
在上面的代码中，我们只在特定的页面（如添加页面）添加了onbeforeunload事件监听，而在组件销毁之前（例如在beforeDestroy生命周期钩子中）清除了该事件监听。这样做是为了防止在跳转到其他页面后，该页面的...
vue生命周期的探索
11-30
那么进入某个路由对应的组件的时候，我们会触发哪些类型的周期呢？ 根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted） 组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted) nextTick方法的回调 接下来，让我们用vue-cli简单改造后的
【Vue/Uni-app】浏览器返回强制刷新页面及Vue生命周期
水到渠成
08-09 7872
应用场景：跳转第三方页面进行操作并同步数据后，用户点击返回（前进/后退）至源系统页面时数据没刷新 原因剖析： 浏览器在返回**【history.go(-1)】期间会优先获取缓存中的数据 既vue-Router中对当前页面配置了Keep-alive**（页面缓存模式） PS：uni-app中，默认在全局范围内开启并使用了Keep-alive 解决方案： 1.Vue/iView中 { p...
uni-app学习笔记十五-vue3页面生命周期(二)
最新发布
shenxiaomo1688的博客
05-28 750
onShow：用于监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面；onHide:监听页面隐藏，当离开当前页面时触发。
Vue生命周期的钩子函数
02-02 1695
Vue的生命周期的钩子函数 目录Vue的生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log四、调试验证4.1 创建页面4.2 刷新页面数据4.3 保留页面，切换到其他页面4.4 从其他页面再切换过来4.5 关闭页面五、生命周期钩子函数详解六、参考七、漂亮的Ending 一、前言 每个 Vue 实例在被创建时都要经过一系列的初始化过程，而在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 二、生命周期图示 三、钩子函数增加log 在如下几个生命周期钩子函
uniApp页面钩子函数
qw_cui的博客
08-04 8994
页面钩子函数
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在实际开发中，可以通过合理利用这些生命周期钩子，在组件的不同阶段插入我们的业务逻辑代码，以满足各种需求。例如，在`created`钩子中可以发起Ajax请求获取数据，在`mounted`钩子中可以操作DOM，在`beforeDestroy`...
Vue监听页面刷新和关闭功能
10-16
在进行Vue.js项目的开发过程中，确保数据同步是一个常见的需求。...总的来说，合理地利用Vue生命周期钩子和JavaScript事件，能够帮助开发者更加灵活地处理各种前端事件和交互，从而提升应用的用户体验和数据的一致性。
vue2.0页面前进刷新回退不刷新的实现方法
10-18
总结，通过结合Vue的`<keep-alive>`、路由元信息`meta`、滚动位置记录以及组件的生命周期钩子，我们可以实现页面前进刷新、回退不刷新的功能。这个方法既考虑了用户体验，又兼顾了数据加载的逻辑控制，是解决此类...
解决vue页面刷新或者后退参数丢失的问题
08-27
在列表页中，我们可以在 beforeRouteLeave 生命周期钩子函数中，将筛选条件保存到 localStorage 中。当我们返回列表页时，我们可以从 localStorage 中读取条件并赋值给查询表单。 以下是使用 localStorage 的示例...
Vue.js+Node.js全栈开发教程：Vue.js生命周期
Lee达森的博客
06-21 312
在Vue.js应用中，每个Vue实例在被创建（new Vue()）时，都要 经过一系列的初始化过程，例如：设置数据监听、编译模板、将实例 挂载到D?M上，以及在数据变化时更新D?M等。一般地，在前端应用框 架中将这个过程称为应用的“生命周期”。 同时，在Vue应用的“生命周期”过程中，会根据进程演化的不同 阶段定义一组相关过程方法（回调函数的形式）。前端框架会将这组 过程方法称为“生命周期的钩子函数”，所谓“钩子函数”就是给用 户提供了在这些回调函数中添?自定义代码的机会。因此，这些“生 命周期的钩子函数”
Vue生命周期知识点
yechongchong的博客
07-18 279
父子组件的生命周期： 执行顺序：1、父组件开始执行到beforeMount然后开始子组件执行，最后是父组件mounted. 2、如果有兄弟组件，父组件开始执行 到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted. 3、当子组件挂载完成后，父组件才会挂载。】 4、当子组件完成挂载后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅 首次） ...
【vue 生命周期】
shfjcncjn的博客
09-21 174
vue生命周期
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
tao19980529的博客
07-11 3400
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
js实现禁止页面刷新，阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作
weixin_43400431的博客
11-15 2533
mounted() { // 浏览器刷新事件 window.addEventListener('beforeunload', this.unload) this.stopF5Refresh() } methods: { stopF5Refresh() { document.onkeydown = function(e) { // 正式 var evt = window.event || e var c.
vue 对浏览器关闭、刷新的监听
qq_35440907的博客
06-28 2514
vue 对浏览器关闭、刷新的监听
vue项目中，多个页面做离开页面未保存的提醒（离开/关闭/刷新页面提示未保存）
梨城毒妃的博客
02-24 4282
​ 一、多个页面需要，考虑用mixins混入 src/mixins/index.js： export const beforeRouteLeave = require('./beforeRouteLeave').default src/mixins/beforeRouteLeave.js： ​export default { data() { return { oldRuleForm: {}, // 旧数据 ifNextStepFlag: false // 下一步，组件页面中，下一步的事件函数中要加上t
vue 在IOS移动端中 windon.open 等跳转外部链接后，返回不触发vue生命周期、mounted等相关事件-解决方法
少年感
08-24 1542
做了一个列表的h5页面，通过点击列表跳转到外部链接，然后返回是回到原来页面状态，类似缓存。发现在ios端返回后，vue 的mounted() 、create()、路由监听等方法都不会执行。在安卓和pc 端都能正常调用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值