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

最新推荐文章于 2023-05-23 12:49:51 发布
原创 最新推荐文章于 2023-05-23 12:49:51 发布 · 7.7k 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文解析了Vue.js单页面应用中页面刷新、后退、前进及关闭时的生命周期钩子执行顺序。详细介绍了不同操作下各组件生命周期的具体流程。
部署运行你感兴趣的模型镜像

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事件, 在事件中编写逻辑

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

您可能感兴趣的与本文相关的镜像

Facefusion

Facefusion

AI应用

FaceFusion是全新一代AI换脸工具，无需安装，一键运行，可以完成去遮挡，高清化，卡通脸一键替换，并且Nvidia/AMD等显卡全平台支持

vue单页面实现当前页面刷新或跳转时提示保存
10-17
在上面的代码中，我们只在特定的页面（如添加页面）添加了onbeforeunload事件监听，而在组件销毁之前（例如在beforeDestroy生命周期钩子中）清除了该事件监听。这样做是为了防止在跳转到其他页面后，该页面的...
vue项目实现前进刷新后退不刷新
07-02
当组件在`keep-alive`内被切换时，它的`activated`和`deactivated`生命周期钩子会被调用。在前进操作时，由于组件已经存在，所以会直接触发`activated`，而不会重新渲染；在后退操作时，组件不会被销毁，因此状态...
页面中组件的生命周期钩子没有被调用，刷新页面后才会被调用。
dysong09的博客
05-23 554
如果组件的生命周期钩子在刷新页面后才被调用，可能是因为你的页面缓存机制导致的。在某些情况下，浏览器会缓存页面及其组件，以提高页面加载速度。当你刷新页面时，浏览器会重新请求页面及其组件，这时候组件的生命周期钩子才会被触发。通过在组件的根元素上添加 “:key” 属性并设置为一个随机数，可以强制VueJS在每次组件渲染时生成一个新的 DOM，以避免浏览器缓存组件。这应该可以解决组件在刷新页面后才被调用的问题。记录自己遇到问题，页面中的组件的生命周期函数，每次都不会被调用，必须刷新页面才行。
vue使用记录
IT菜鸟
12-19 3767
Vue下路由History模式打包后页面空白问题
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【Vue/Uni-app】浏览器返回强制刷新页面及Vue生命周期
水到渠成
08-09 7960
应用场景：跳转第三方页面进行操作并同步数据后，用户点击返回（前进/后退）至源系统页面时数据没刷新 原因剖析： 浏览器在返回**【history.go(-1)】期间会优先获取缓存中的数据 既vue-Router中对当前页面配置了Keep-alive**（页面缓存模式） PS：uni-app中，默认在全局范围内开启并使用了Keep-alive 解决方案： 1.Vue/iView中 { p...
Vue随笔（二）生命周期
u013798317的博客
11-27 396
vue生命周期可以分为八个阶段，分别是： beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后） 下面我们就来分别看看vue生命周期的这八个阶段： 1、创建前（beforeCreate） 对应的钩子函数为...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在实际开发中，可以通过合理利用这些生命周期钩子，在组件的不同阶段插入我们的业务逻辑代码，以满足各种需求。例如，在`created`钩子中可以发起Ajax请求获取数据，在`mounted`钩子中可以操作DOM，在`beforeDestroy`...
Vue监听页面刷新和关闭功能
10-16
在进行Vue.js项目的开发过程中，确保数据同步是一个常见的需求。...总的来说，合理地利用Vue生命周期钩子和JavaScript事件，能够帮助开发者更加灵活地处理各种前端事件和交互，从而提升应用的用户体验和数据的一致性。
vue2.0页面前进刷新回退不刷新的实现方法
10-18
总结，通过结合Vue的`<keep-alive>`、路由元信息`meta`、滚动位置记录以及组件的生命周期钩子，我们可以实现页面前进刷新、回退不刷新的功能。这个方法既考虑了用户体验，又兼顾了数据加载的逻辑控制，是解决此类...
vue生命周期的探索
11-30
那么进入某个路由对应的组件的时候，我们会触发哪些类型的周期呢？ 根实例的加载相关的生命周期（beforeCreate、created、beforeMount、mounted） 组件实例的加载相关的生命周期(beforeCreate、created、beforeMount、mounted) 全局路由勾子(router.beforeEach) 组件路由勾子(beforeRouteEnter) 组件路由勾子的next里的回调(beforeRouteEnter) 指令的周期(bind,inserted) nextTick方法的回调 接下来，让我们用vue-cli简单改造后的
Vue生命周期的钩子函数
02-02 1724
Vue的生命周期的钩子函数 目录Vue的生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log四、调试验证4.1 创建页面4.2 刷新页面数据4.3 保留页面，切换到其他页面4.4 从其他页面再切换过来4.5 关闭页面五、生命周期钩子函数详解六、参考七、漂亮的Ending 一、前言 每个 Vue 实例在被创建时都要经过一系列的初始化过程，而在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 二、生命周期图示 三、钩子函数增加log 在如下几个生命周期钩子函
uniApp页面钩子函数
qw_cui的博客
08-04 9355
页面钩子函数
Vue.js+Node.js全栈开发教程：Vue.js生命周期
Lee达森的博客
06-21 331
在Vue.js应用中，每个Vue实例在被创建（new Vue()）时，都要 经过一系列的初始化过程，例如：设置数据监听、编译模板、将实例 挂载到D?M上，以及在数据变化时更新D?M等。一般地，在前端应用框 架中将这个过程称为应用的“生命周期”。 同时，在Vue应用的“生命周期”过程中，会根据进程演化的不同 阶段定义一组相关过程方法（回调函数的形式）。前端框架会将这组 过程方法称为“生命周期的钩子函数”，所谓“钩子函数”就是给用 户提供了在这些回调函数中添?自定义代码的机会。因此，这些“生 命周期的钩子函数”
Vue生命周期知识点
yechongchong的博客
07-18 312
父子组件的生命周期： 执行顺序：1、父组件开始执行到beforeMount然后开始子组件执行，最后是父组件mounted. 2、如果有兄弟组件，父组件开始执行 到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted. 3、当子组件挂载完成后，父组件才会挂载。】 4、当子组件完成挂载后，父组件会主动执行一次beforeUpdated/updated钩子函数（仅 首次） ...
【vue 生命周期】
shfjcncjn的博客
09-21 193
vue生命周期
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
tao19980529的博客
07-11 3437
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
js实现禁止页面刷新，阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作
weixin_43400431的博客
11-15 2579
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 2683
vue 对浏览器关闭、刷新的监听
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值