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

最新推荐文章于 2024-05-07 16:32:08 发布
最新推荐文章于 2024-05-07 16:32:08 发布
阅读量7.1k 收藏 25
点赞数 6
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nhq2018/article/details/111058665
版权

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

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

在知识的海洋里奋力狗刨
关注
  • 6
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
Vue 实现前进刷新后退不刷新的效果
10-16
在`list.vue`的`created`生命周期钩子中，我们可以初始化数据，这样只有首次访问列表页时会触发请求。 对于需求二，我们需要在某些特定情况下（如详情页删除操作后）强制列表页刷新数据。这可以通过在路由元信息(`...
Vue生命周期的理解
qq_40926233的博客
05-26 131
Vue生命周期的理解 什么是生命周期：Vue项目从开始创建到停止运作的过程就是生命周期。 什么是钩子函数：Vue项目从创建到停止运作的过程也会运行一些叫做生命周期钩子的函数 首先new Vue()新建实例，然后初始化事件和生命周期， 然后执行beforeCreate，在执行这个钩子时，data和methods中的数据都还没有被初始化， 然后执行created，在执行这个钩子时，data和methods中的数据已经被初始化好了，如何要操作data或者调用methods方法，最早要在created中操作
Vue 关闭页面触发事件
最新发布
spicyIsPleasant的博客
05-07 458
点击“课程学习”打开一个新的界面当关闭那个新的界面时刷新本页面的数据。
Vue：三种情况下的生命周期执行顺序
不咋爱学习の任大猫
04-09 2219
生命周期：在创建一个vue实例时，会经历一系列的初始化过程（Vue实例从创建到销毁的过程），这个过程就是vue的生命周期。 Vue提供给开发者的一系列的回调函数,方便我们添加自定义的逻辑,Vue的生命周期从创建到销毁,重要的节点挂载数据更新。 创建阶段 beforeCreate、created 挂载渲染页面阶段 beforeMount、mounted 更新阶段 beforeUpdate、updated 卸载阶段 beforeDestory、destoryed 1、单页面下生命周期顺序 献上一波代码，看下.
页面中组件的生命周期钩子没有被调用，刷新页面后才会被调用。
dysong09的博客
05-23 404
如果组件的生命周期钩子在刷新页面后才被调用，可能是因为你的页面缓存机制导致的。在某些情况下，浏览器会缓存页面及其组件，以提高页面加载速度。当你刷新页面时，浏览器会重新请求页面及其组件，这时候组件的生命周期钩子才会被触发。通过在组件的根元素上添加 “:key” 属性并设置为一个随机数，可以强制VueJS在每次组件渲染时生成一个新的 DOM，以避免浏览器缓存组件。这应该可以解决组件在刷新页面后才被调用的问题。记录自己遇到问题，页面中的组件的生命周期函数，每次都不会被调用，必须刷新页面才行。
vue使用记录
IT菜鸟
12-19 2351
Vue下路由History模式打包后页面空白问题
vue生命周期及执行顺序
ernesto的博客
03-12 3651
vue生命周期
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
tao19980529的博客
07-11 3136
vue中页面刷新执行哪个钩子函数使用vue钩子函数mounted
vue 生命周期4 销毁流程 beforeDestroy destroyed
热门推荐
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue2.0页面前进刷新回退不刷新的实现方法
10-18
总结，通过结合Vue的`<keep-alive>`、路由元信息`meta`、滚动位置记录以及组件的生命周期钩子，我们可以实现页面前进刷新、回退不刷新的功能。这个方法既考虑了用户体验，又兼顾了数据加载的逻辑控制，是解决此类...
vue实现页面滚动到底部刷新
10-16
在`mounted`生命周期钩子中，我们将设置滚动事件监听器以及定时器，确保每隔一段时间检查页面是否滚动到顶部。 ```javascript var app = new Vue({ el: '#app', data: { swiper: null, carousel: [], ...
vue项目中beforeDestroy和destroyed 钩子不起作用或者说不生效的原因和解决办法
weixin_54256416的博客
02-23 6590
vue项目中beforeDestroy和destroyed 钩子不起作用或者说不生效的原因和解决办法
Vue生命周期的钩子函数
小康师兄
02-02 1494
Vue的生命周期的钩子函数 目录Vue的生命周期的钩子函数一、前言二、生命周期图示三、钩子函数增加log四、调试验证4.1 创建页面4.2 刷新页面数据4.3 保留页面，切换到其他页面4.4 从其他页面再切换过来4.5 关闭页面五、生命周期钩子函数详解六、参考七、漂亮的Ending 一、前言 每个 Vue 实例在被创建时都要经过一系列的初始化过程，而在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 二、生命周期图示 三、钩子函数增加log 在如下几个生命周期钩子函
【Vue】清除定时器后定时器仍在运行
leader_li的博客
08-25 1190
我们在 vue 中使用 setTimeout() 或 setInterval() 后，通常都会在 destroyed()或 beforeDestroy() 方法里去清除。解决方案：可以在beforeRouteLeave()方法清除
vue实现前进刷新，后退不刷新
景秋
01-23 1361
项目中客户提出返回列表页需要缓存之前查询的数据，用到了以下方法解决了这个需求 实现思路： 注：demo中，index页面包含三个链接导航。page1--&gt;page2--&gt;page3.依次前进，每次前进到一个新页面都需要获取数据，而按下后退键后，从page3返回到page2，page2不再获取新数据，而是使用之前缓存的数据。从page2返回到page1时，page1不再获取新数据，而是...
【vue 生命周期】
shfjcncjn的博客
09-21 122
vue生命周期
Vue中keep-alive 缓存desroyed()不能执行解决办法
Sun~Neo
04-12 836
父组件：使用<keep-alive>， <keep-alive exclude=""> <router-view @public_footer="public_footer"></router-view> </keep-alive> <app-footer v-if="isFooter"></app...
vue生命周期钩子及父子组件 钩子执行顺序
09-02
Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序： 1. beforeCreate：在实例创建之前被调用。此时组件的数据和方法都还未初始化。 2. created：在实例创建完成之后被调用。此时组件的数据已经初始化，但 DOM 还未渲染。 3. beforeMount：在组件挂载到 DOM 之前被调用。此时模板已经编译完成，但还未挂载到页面中。 4. mounted：在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面中，可以进行 DOM 操作。 5. beforeUpdate：在数据更新之前被调用。此时组件还未重新渲染，但数据已经更新。 6. updated：在数据更新之后被调用。此时组件已经重新渲染，可以进行 DOM 操作。 7. beforeDestroy：在组件销毁之前被调用。此时组件还存在，可以进行一些清理工作。 8. destroyed：在组件销毁之后被调用。此时组件已经从 DOM 中移除，事件监听和定时器等资源都已经被销毁。 对于父子组件，它们的生命周期钩子函数的执行顺序如下： 1. 父组件的 beforeCreate 和 created 钩子函数执行。 2. 子组件的 beforeCreate 和 created 钩子函数执行。 3. 子组件的 beforeMount 钩子函数执行。 4. 子组件的 mounted 钩子函数执行。 5. 父组件的 beforeMount 钩子函数执行。 6. 父组件的 mounted 钩子函数执行。 7. 数据更新时，先执行父组件的 beforeUpdate 钩子函数，然后执行子组件的 beforeUpdate 钩子函数，再执行子组件的 updated 钩子函数，最后执行父组件的 updated 钩子函数。 8. 组件销毁时，先执行父组件的 beforeDestroy 钩子函数，然后执行子组件的 beforeDestroy 钩子函数，最后执行子组件的 destroyed 钩子函数，再执行父组件的 destroyed 钩子函数。 这是 Vue 组件生命周期钩子函数的一般执行顺序，但在实际开发中可能会有特殊情况，需要根据具体需求来使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值