vue——路由独有的生命周期函数 activated deactivated

最新推荐文章于 2023-02-09 20:06:38 发布
最新推荐文章于 2023-02-09 20:06:38 发布
阅读量1k 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc_xxo/article/details/123300635
版权
本文探讨了Vue.js中路由组件的激活与失活生命周期函数，特别是`activated`和`deactivated`。当组件被`<keep-alive>`包裹时，跳转到其他组件不会触发`beforeDestroy()`，可能导致资源浪费。通过使用`activated`和`deactivated`，可以更有效地管理组件状态，比如在失活时关闭定时器。
摘要由CSDN通过智能技术生成

activated：路由组件被激活时触发
deactivated：路由组件失活时触发
当 使用了 <keep-alive> </keep-alive>之后跳转到其他组件时，之前的组件不会被销毁 这时配置在beforeDestroy()中的方法就不会生效可能会产生资源浪费达不到想要的效果
例如

mounted(){
   
	this.timmer = setInterval(()=>{
   
		console.log('hello word'
最低0.47元/天 解锁文章
cc_xxo
关注
vue的activated生命周期
u012201879的博客
11-27 1万+
包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素,当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 如包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行。在切换到组件B，这时组件A的deactivated的生命周期函数会被触发。在切换回组件A，...
vue生命周期、路由守卫、keep-alive
Darlingmi的博客
03-07 1421
vue路由守卫钩子函数~ 完整的生命周期~ keep-alive用法~
vue 生命周期-activated
MYuanFang的博客
01-13 4735
当组件激活时调用的生命周期钩子函数 页面出现的时候执行 activated生命周期函数，跟监听 watch 有类似的作用。 activated生命周期函数，是配合 keep-alive 进行使用或者路由跳转。进入页面时，mounted 与 activated 生命周期函数都会执行，当前 keep-alive 时或者路由跳转，进行了缓存，这时返回上一页 ，mounted生命周期函数不会执行，而 a...
Vue - 生命周期函数(activated)
Future1994的博客
12-27 1564
● <keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 ● 如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时
Vue的生命周期钩子函数之activated
qq_40041944的博客
09-08 2万+
Vue的生命周期钩子函数之activated activated 生命周期在keep-alive 组件激活时调用 服务器端渲染期间不调用该生命周期 通常和deactivated周期一起使用 以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏效果 html代码块 &lt;div id="singleBanner"&gt; &lt;!-- 顶部悬浮窗效果 --...
vue生命周期
weixin_43837268的博客
06-19 148
Vue生命周期大致分为：created、mounted、update、activated、destroy，每一个周期钩子都可分为前后两个状态，例如：beforeCreate/created，下面，详细讲解一下 Create beforeCreate：组件实例刚刚被创建，组件属性计算之前，data数据初始化之前(el和data并未初始化) created：组件实例已经创建完成之后(实例已经...
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及生命周期钩子。 首先，Vue的生命周期钩子是我们在组件创建、更新和销毁过程中可以利用的关键点。以下是一些常见的生命周期钩子： 1. `...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
为了解决这个问题，可以使用activated和deactivated生命周期钩子，这两个钩子分别在组件被激活和停用时调用，可以用来代替beforeDestroy进行相关的逻辑处理。 此外，文章还提到了关于使用Vue-resource进行HTTP请求...
vue执行的生命周期函数
weixin_55808645的博客
04-16 741
1. 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新； 在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； 2. 生命周期钩子函数： 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码； 生命周期的钩子函数中的this，会默认指向vue的实例; 3. vue生命周期函数执行： 周期函数 函数执行描述 beforeCreate 创
vue的生命周期函数
weixin_53690943的博客
03-15 207
路由钩子函数/导航守卫 1.全局–写在路由配置文件index.js中（全部路由变化） 改变前：拦截操作 router.beforeEach:(ro,from,next)=>{ }; 改变后：获取路由信息 router.afterEach:(ro,from,next)=>{ }; 进入完成、解析：获取路由信息 2.组件内：写在组件内（当前组件涉及的路有变化） 进入前：beforeRouteEnter:(to,from,next)=>{ }; 发生改变：befo
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序
热门推荐
muzidigbig的博客
01-16 3万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/
vue生命周期详解
weixin_48264501的博客
07-12 328
一、vue的生命周期 创建前：beforeCreate, 创建后:created 挂载前：beforeMount, 挂载后：mounted 更新前：beforeUpdate, 更新后：updated 销毁前：beforeDestroy, 销毁后：destroyed DOM渲染在哪个周期中就已经完成 ： mounted -----使用了 keep-alive 就会多2个生命周期： activated deactivated 二、生命周期的理解 总共分为：8个阶段 创建前/后： beforeCrea
vue 生命周期图 + activated + deactivated
cnailili的博客
07-23 8606
vue 生命周期图 除此之外，简单介绍一下在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。 文档：在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。 activated调用时机：第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用
Vue中路由缓存及activated与deactivated的详解
最新发布
zxdznyy的博客
02-09 4730
在Vue的使用中，为了提高应用的效率，我们可以使用路由缓存这方面的相关知识来解决遇到的问题。本博客的内容则是对路由缓存及activated与deactivated的详解。期望能对读者有所帮助。本篇博客需要有对路由相关知识的了解，如需复习可见博客Vue2路由的详细讲解。这里要介绍两个钩子函数（生命周期函数）：activated与deactivated。这两个是专门用于路由组件的函数。先介绍一下：activated，可译为”激活的“，路由组件从未出现到出现时运行。
vue 路由跳转后执行跳转后的页面里的函数_vue-router路由守卫-上
weixin_39853590的博客
11-21 3007
1. 为什么要使用路由守卫？什么是路由守卫？第一次认识路由守卫：之前我做过的小项目里面，我们直接在浏览器网址的地方进行修改就能跳转页面，这是不安全的，因此就需要路由守卫，实现通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，避免非法登录。路由守卫的概念：路由守卫也叫导航首位，路由拦截。官方的解释是：正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。其实我们...
active vue 路由样式保持_vue 如何通过监听路由变化给父级路由菜单添加active样式...
weixin_39875516的博客
01-14 294
1、项目需求：在项目开发中，多级菜单的情况下，勾选子菜单时，需要在父级菜单添加active样式。2、遇到的问题：一级路由菜单的话，点击当前路由会自动在路由标签上添加router-link-exact-active和router-link-active样式。因此针对一级路由只需要改写活跃状态下的css样式即可。但是在下拉菜单中，无法通过点击子菜单的路由给父级菜单自动添加活跃状态下的css属于，因为就...
vue中activated的用法
Hailee7的博客
02-09 1266
所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；
Vue学习之---动态组件中的activated与deactivated钩子函数
weixin_43852569的博客
09-09 3999
Vue学习之—被忽视的activated与deactivated钩子函数 在学习这两个钩子函数之前呢，怎么需要先了解下Vue内置的动态组件< component >以及与之相配套的< keep-alive > 组件： 动态组件指的是动态切换组件的显示与隐藏； < component is = " " > 标签，内置组件，占位符，专门用来实现动态组件的渲染； is 属性指定要渲染出来的组件的名字，指定的值是组件的注册名称； is 属性指定的组件名称是什么，就会在<
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值