vue之组件的激活activated与失活deactivated

最新推荐文章于 2024-05-31 11:20:41 发布
最新推荐文章于 2024-05-31 11:20:41 发布
阅读量3.2k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31676483/article/details/123082296
版权
本文介绍了Vue中组件的激活activated和失活deactivated生命周期，强调这两个钩子函数在与keepalive结合使用时的作用。在页面跳转过程中，activated会在进入组件时触发，而deactivated则在离开组件时触发。举例说明了在student组件中，如果在beforeDestroy清除定时器，但由于组件被缓存，定时器会持续执行。
摘要由CSDN通过智能技术生成

、、、、、、、、、、、仅对以前所学做复习记录使用、、、、、、、、、

组件的激活activated与失活deactivated

只有与keepalive一起使用才有效。

当跳入页面就会激活，当跳出页面就会失活。

student组件：

在这里插入图片描述

显示页面

在这里插入图片描述

school组件

在这里插入图片描述

当从school页面跳转到student页面。

在这里插入图片描述

在这里插入图片描述

再从stud
最低0.47元/天 解锁文章
火红_
关注
专栏目录
Vue的动态组件keep-alive---组件的失活缓存 Vue的过渡与动画 Vue阶段小结
weixin_45343878的博客
08-09 1613
动态组件 动态组件keep-alive 过渡 选项卡效果可以通过 Vue 的 元素加一个特殊的 is 特性实现 Vue可以在不同组件之间进行动态切换，这种方法称为动态组件 ①绑定is特性 ②绑定计算属性 此时，切换activeTab便可以切换展示信息 动态组件keep-alive—失活缓存 失活缓存keep-alive： 重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希...
vue 动态组件 创建 缓存 keep-alive 激活 activated deactivated
259的博客
12-22 726
vue 动态组件 创建 缓存 激活 keep-alive activated deactivated
Vue3---激活状态显示
weixin_52053631的博客
07-06 560
Router-Link组件默认支持激活样式显示的类名，只需要给。属性设置对应的类名即可。
vue created 生命周期
weixin_34242658的博客
06-21 561
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el属性目前不可见。 methods、data、watch等可以使用了。  ...
vue中keep-alive、activated的探讨和使用
热门推荐
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
vue里面的动态组件和组件缓存，组件激活状态
zhuyuan123456的博客
03-09 511
先来看一下使用逻辑
Vue - 生命周期函数(activated)
Future1994的博客
12-27 1544
● <keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 ● 如<keep-alive>包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行，这时通过点击事件改变组件A的文字的颜色，在切换到组件B，这时
Vue父子组件生命周期顺序
猫与故巷的博客
08-11 1262
Vue父子组件生命周期顺序一、Vue生命周期图二、常见的生命周期函数三、代码举例3.1根组件的beforeCreate阶段3.2根组件的Created阶段3.3根组件的beforeMount阶段3.4子组件的beforeCreate、Created、beforeMount、Mounted阶段3.5子组件的activated阶段3.6父组件的mounted阶段3.7deactivated、beforeUpdate、updated阶段3.8beforeDestroy和destroyed钩子函数间的生命周期四、总
四个阶段 八个钩子函数 父子组件中的先后顺序 激活失活 10个钩子函数
qq_43944285的博客
05-09 498
什么是组件生命周期 一个组件从 创建 到 销毁 的整个过程就是生命周期 生命周期函数(钩子函数) 四个阶段 (一个阶段两个钩子函数) 八个钩子 vue 框架内置函数，随着组件的生命周期，自动 按次序 执行 **作用：**特定的时间点，执行某些特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 生命周期函数(钩子函数) 四个阶段: ● 初始化 => 创建组件 => beforeCreate cr
vue——路由独有的生命周期函数 activated deactivated
cc_xxo的博客
03-06 1081
activated：路由组件被激活时触发 deactivated：路由组件失活时触发 当 使用了 <keep-alive> </keep-alive>之后跳转到其他组件时，之前的组件不会被销毁 这时配置在beforeDestroy()中的方法就不会生效可能会产生资源浪费达不到想要的效果 例如 mounted(){ this.timmer = setInterval(()=>{ console.log('hello word') }) }, beforeDestroy(
VUE activated,deactivated使用
dafadafahao的博客
05-13 3660
VUE activated,deactivated使用 项目中keepalive用得不多，记录一下以免遗忘。 页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。 事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中， activated 中的不管是否需要缓存多会执行。 所以当页面设置了keepalive的时候，要想
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
Cxil的博客
11-29 1827
如何切换2个组件 互斥的显示或者隐藏呢 除了v-if什么是动态组件？多个组件使用同一个挂载点，并动态切换。这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息vue内置component组件, 配合is属性, 设置要显示的组件名字在频繁的切换动态组件 会导致 组件的频发创建和销毁，导致效率不高可以通过vue 内置的Keep-alive 组件包裹 component 组件 来解决keep-alive 组件有两个生命周期。
vue的activated生命周期
u012201879的博客
11-27 1万+
包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素,当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 如包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行。在切换到组件B，这时组件A的deactivated的生命周期函数会被触发。在切换回组件A，...
vue中activated的用法
Hailee7的博客
02-09 1214
所以当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中其只会在首次加载该组件的时候起作用。简单的说activated()函数就是一个页面激活后的钩子函数，一进入页面就触发；
Vue Router activated deactivated 路由守卫
suqi_123123的博客
05-11 504
在Vue Router中，activated和deactivated是两个钩子函数，用于处理路由的激活和停用。它们允许我们在路由切换时执行一些操作，比如数据的加载和卸载、动画效果的处理等。下面我们来看一下它们的具体作用：activated路由守卫：当导航到该路由时触发。在activated守卫中，我们通常会执行一些需要在路由激活时进行的操作，比如数据的加载、页面的初始化等。deactivated路由守卫：当离开该路由时触发。
Vue导航激活设置-
最新发布
qq_52686989的博客
05-31 414
【代码】Vue导航激活设置-
Vue的生命周期钩子函数之activated
qq_40041944的博客
09-08 2万+
Vue的生命周期钩子函数之activated activated 生命周期在keep-alive 组件激活时调用 服务器端渲染期间不调用该生命周期 通常和deactivated周期一起使用 以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏效果 html代码块 &lt;div id="singleBanner"&gt; &lt;!-- 顶部悬浮窗效果 --...
vue中的activated和deactivated
蓝朽的小世界
08-16 451
vue中的activated和deactivated
Vue父子组件生命周期与钩子函数详解
7. **activated/deactivated**：仅对使用了`<keep-alive>`的组件有效，分别在组件被缓存（激活）和从缓存中移除（停用）时调用。 8. **beforeDestroy/destroyed**：在实例销毁前/后调用，销毁后所有绑定解除，事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值