Vue之生命周期activated与created使用

最新推荐文章于 2025-06-26 13:03:33 发布
原创 最新推荐文章于 2025-06-26 13:03:33 发布 · 2.1w 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细对比了Vue中created与activated两个生命周期钩子的使用场景与触发时机。created钩子在组件创建初期执行，仅触发一次；而activated钩子在使用keep-alive时每次进入组件时都会执行。

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

Vue中生命周期钩子的使用一般主要用于数据的初始化，最近使用了keep-alive，又学习到了actived这一钩子。于是就与created做了一个比较。

 createdactivated
触发顺序组件创建最初始created  =>  mounted =>activated
触发次数只在组件刚创建时创建在使用keep-alive标签中有效，每次进入都会执行钩子中的函数

 

Vue学习之---动态组件中的activated与deactivated钩子函数
weixin_43852569的博客
09-09 4607
Vue学习之—被忽视的activated与deactivated钩子函数 在学习这两个钩子函数之前呢，怎么需要先了解下Vue内置的动态组件< component >以及与之相配套的< keep-alive > 组件： 动态组件指的是动态切换组件的显示与隐藏； < component is = " " > 标签，内置组件，占位符，专门用来实现动态组件的渲染； is 属性指定要渲染出来的组件的名字，指定的值是组件的注册名称； is 属性指定的组件名称是什么，就会在<
vue 生命周期 钩子函数 keep-alive activated deactivated
global_coding的博客
06-13 1859
vue 生命周期 钩子函数 keep-alive activated deactivated
vue.js中created()与activated()的个人使用理解
热门推荐
qq_36608921的博客
08-30 18万+
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等...
关于vue3中keep-alive的钩子activated​​和deactivated​​的使用
最新发布
weixin_50379372的博客
06-26 1147
所以会渲染当前id的内容，当第二次或者第n次进入时，只会触发activated，而不会触发created和mounted，因为组件created的id不会变，mounted中的id也不会变，但是当第二次或者第n次进去组件时，会触发activated钩子，所以activated中可以 做一些操作，比如点击同一个按钮多次跳转到详情页时，说明this.id = this.当再次进入（激活）时，只会触发activated，而不会触发created和mounted，因为组件被缓存了。下面用一个案列来说明。
vue 生命周期activated与created使用
weixin_45941064的博客
04-14 1416
Vue中生命周期钩子的使用一般主要用于数据的初始化 activated created 触发顺序 组件创建最初始 created => mounted >activated 触发次数 只在组件刚创建时创建 在使用keep-alive标签中有效，每次进入都会执行钩子中的函数 ...
vue.js中created()与activated()
yingchengzzz的博客
03-04 578
vue.js中created()与activated() created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等 ...
vue中keep-alive、activated的探讨和使用
qq_38861711的博客
08-02 3万+
在修改公司的一个项目的时候发现了activated这个东西，一直觉得很疑惑，之前也没怎么用过啊！官网的生命周期那也没说过这东西啊！生命周期不就create mount update 和destory这几个东东么，怎么多了个activate出来。 百思不得其解，于是去问了下度娘和查了下文档！恍然大悟，原来这东东是结合keep-alive这东东使用的，下面顺便记录一下。   keep-ali.........
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
Vue生命周期中的`activated`函数是在组件被`keep-alive`组件缓存后，当组件再次被激活（例如从其他页面返回）时调用的。在实际开发中，它常用于处理页面返回时需要保持的数据或者状态，以避免重复请求数据。 在描述...
vue2 生命周期
qq_74114417的博客
02-14 3373
Vue 2 的生命周期钩子函数为开发者提供了丰富的控制能力，通过在不同的生命周期阶段执行相应的代码逻辑，可以更好地管理组件的状态、操作 DOM 元素、处理异步请求和进行资源清理等工作。理解这些生命周期钩子的触发时机和用途，有助于编写更高效、稳定的 Vue 应用。
Vue2 与 Vue3 生命周期对比
qq_40792800的博客
08-20 1575
1、配置式中存在。
Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序、刷新页面vue做了什么？
muzidigbig的博客
01-16 4万+
一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后；还有keep-alive 缓存特殊的两个阶段（activated(组件激活时)、deactivated(组件停用时)）；每次进入都会执行钩子中的函数。 SSR有着更好的SEO、并且首屏加载速度更快等优点。
vue.js中created()、activated()、deactivated()理解
qq_29207823的博客
07-23 8551
created()：在创建vue对象时，当html渲染之前触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据、keepalive缓存组件后，可执行方法； deactivated()：离开组件时执行； 注意：activated()和deactivated()只有在<keep-alive></ke
Vue的学习（5）
2401_88560642的博客
02-12 979
1. 项目案例实现的基本步骤分哪两大步?① 配路由 ② 实现页面功能2. 嵌套路由的关键配置项是什么？children3. 路由传参两种方式？① 查询参数传参，$route.query.参数名(适合多个参数)② 动态路由传参，$route.params.参数名(更简洁直观)4. 缓存组件可以用哪个内置组件？keep-alive三个属性：两个钩子：自定义创建项目ESlint 代码规范目标：认识代码规范代码规范：一套写代码的约定规则。
vue生命周期笔记之actived和deactived，updated
kekexiaomayi的博客
04-26 2637
vue生命周期笔记之actived和deactived
actived生命周期_Vuejs 生命周期
weixin_39570838的博客
12-19 1251
每个 Vue 实例在被创建时都要经过一系列的初始化过程。如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。一个 Vue 实例我们创建一个 Vue 实例，并在每个阶段验证 Vue 的生命周期函数。Vue 实例的生命周期函数并不放置在 methods里，而是单独放置在 Vue...
vue actived生命周期---解决进入页面不会再次调用接口请求
iorn_mangg的博客
10-30 1万+
在vue实际项目中，很多时候会在mounted或者created请求数据接口然后渲染到页面上，但是这两个生命周期都是只会在第一次进入页面后执行，再次进入该页面时，由于vue-router的机制，会缓存已经加载过的页面数据这样会大大提高效率，所以我们使用$router.push等跳转操作时会发现已经在其他页面上修改的数据，跳转到这个页面，修改的数据并没有变化。 实际例子：a页面展示了一组数据，需要...
Vue中路由缓存及activated与deactivated的详解
zxdznyy的博客
02-09 5335
在Vue的使用中，为了提高应用的效率，我们可以使用路由缓存这方面的相关知识来解决遇到的问题。本博客的内容则是对路由缓存及activated与deactivated的详解。期望能对读者有所帮助。本篇博客需要有对路由相关知识的了解，如需复习可见博客Vue2路由的详细讲解。这里要介绍两个钩子函数（生命周期函数）：activated与deactivated。这两个是专门用于路由组件的函数。先介绍一下：activated，可译为”激活的“，路由组件从未出现到出现时运行。
vue生命周期 activated
07-26
注意，上述示例展示的是如何在路由激活时使用 Vue Router 的导航守卫功能，而非直接在 Vue 组件内部访问 `activated` 生命周期钩子。在传统的 Vue 组件中，实际的生命周期钩子有以下几个关键点： 1. **beforeCreate...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值