Vue2.0之生命周期created、mounted、activated区别

最新推荐文章于 2024-05-13 09:17:36 发布
最新推荐文章于 2024-05-13 09:17:36 发布
阅读量7.9k 收藏 7
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stodger0216/article/details/104968761
版权

created：在创建vue对象时，当html渲染之前就触发；但是注意，只会触发一次

mounted：是挂载vue实例后的钩子函数，钩子在主页挂载时执行一次，如果没有缓存的话，再次回到主页时，此函数还会执行

activated：是组件被激活后的钩子函数，每次回到页面都会执行

执行顺序：created  =>  mounted =>activated

Stodger0216
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Vue.js2.0生命周期的研究与理解1
08-03
关于Vue.js2.0生命周期的研究与理解1
基于Vue实例生命周期(全面解析)
08-29
"基于Vue实例生命周期(全面解析)" Vue实例生命周期是指从创建到销毁的整个生命周期过程。在这个过程中，Vue实例会经历多个阶段，每个阶段都提供了生命周期钩子函数，以便开发者在合适的时机执行业务逻辑。 ...
【解决方案】【最佳实践】vue2.0生命周期、运行机制（详细讲解+中文图解）
最新发布
一起寻找DX3906-探索未知
05-13 764
vue2.0生命周期、beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、errorCaptured
Vue2 的生命周期函数介绍和应用 ——详细总结
小文同学的博客
03-17 1039
Vue的生命周期函数，又称生命周期钩子，它是Vue在实例创建、挂载、更新和销毁等过程中所调用的方法，是代表 Vue 页面创建进行某些操作后的状态，因此能在不同过程进行操作
VUE2中activated和created的使用区别
qq_45812595的博客
05-24 1593
与created钩子函数相比，activated钩子函数是在组件已经挂载渲染到页面上之后再被执行的，可以用于处理需要在组件显示后处理的逻辑。场景：跳转一个页面时，只有第一次执行了created，后边退出再次打开也不执行created，因为已经挂载完成了，可以使用activated钩子函数，这样每次进入页面都是被激活都会执行activated。总体来说，created钩子函数适合用来进行组件的初始化操作，而activated钩子函数适合处理组件被激活时的操作。需要根据具体的场景选择使用哪个钩子函数。
vue2基础知识
前端程序媛_Ying博客
03-10 327
系统自带了8个生命周期，分别是：哪8个，第一次进入到组件会执行前4个周期，分别是 beforeCreate，created，beforeMount，mounted，如果用到keep-alive 就变成了10个生命周期，因为会额外增加两个生命周期，activated,deactivated,如果加入keep-alive，第一次进入到组件，就会执行5个生命周期了前面那4个，再加上keep-alive那一个，如果第二次或者第N次进入到这个组件，就会执行一个生命周期了，也就是keep-alive那一个。
Vue生命周期函数执行顺序（使用注意事项）
weixin_43749805的博客
05-11 2812
Vue.js 是一个基于 MVVM 模式的前端框架，它的核心是一个响应式的数据绑定系统。在 Vue.js 中，组件是一个可复用的 Vue 实例，它拥有自己的生命周期钩子函数，用于在组件生命周期的不同阶段执行一些特定的逻辑。
Vue created()和 activated()区别和作用调用顺序
A乐神的博客
01-18 1024
Vue created()和 activated()区别和作用调用顺序
VUE中 created()，mounted()与activated() 方法都是干嘛的？
qq_42692714的博客
05-14 3980
created:html加载完成之前，执行。执行顺序：父组件-子组件 mounted:html加载完成后执行。执行顺序：子组件-父组件 methods：事件方法执行 watch：watch是去监听一个值的变化，然后执行相对应的函数。 computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值 created()：组件实例创建完成，dom还未生成，仅仅触发一次； mounted是挂载vue实例后的钩子函数，仅仅执行一次； activated()：在使用时，会用到act.
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
Vue生命周期中的`activated`函数是在组件被`keep-alive`组件缓存后，当组件再次被激活（例如从其他页面返回）时调用的。在实际开发中，它常用于处理页面返回时需要保持的数据或者状态，以避免重复请求数据。 在描述...
vue 路由子组件created和mounted不起作用的解决方法
10-16
因此，对于那些依赖于`created`或`mounted`钩子的初始化操作，可能需要调整到其他合适的生命周期钩子，例如`activated`，这个钩子在组件被`keep-alive`缓存并重新激活时调用。 最后，遇到类似问题时，查阅官方文档...
Vue的生命周期操作示例
10-16
Vue 的生命周期是指一个 Vue 实例从创建、初始化、渲染、更新到销毁的过程。在这个过程中，Vue 提供了一系列的生命周期钩子函数，使得开发者可以在特定的时间点进行自定义操作。 在给定的示例中，我们可以看到以下 ...
vue.js中的created()与activated()的用法
qq_57528681的博客
04-26 8235
created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。 // 获取列表数据 getTeamTree(val) { this.treeLoading = true; this.$http.position
vue2.0的生命周期和钩子函数深度解析
关注最新技术问题并持续维护更新
04-18 2294
一、理清Vue的生命周期和钩子函数
Vue2教程详解四（生命周期）
一只努力搬砖的打工妹纸
01-27 2803
每个Vue实例在被创建时都要经过一系列的初始化过程----如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会；生命周期又称生命周期回调函数、声明周期函数； 上一张官网的生命周期图示： 其中红字红框白底的内容为生命周期钩子，图中所示共有八个钩子（4对），分别是： beforeCreate---created，beforeMount---mounted，beforeUpdate---up
Vue.js中created()与activated()的区别
qq_46344419的博客
11-06 653
Vue.js中created()与activated()的区别
vue.js中created()与activated()的个人使用理解
Y4258的博客
10-20 5501
个人理解 一、 created和mounted生命周期 created： 初始化生命周期，加载初始化数据。创建vue时，当html渲染前调用，只执行一次。 mounted： 在模板挂载之后执行，即html渲染之后调用，更新dom变化，执行一次。 二、actived是什么周期？ 在官网上，actived在keep-alive有提到过 三、actived与created actived与created都只执行一次，都可以用来加载数据 acteved在进入页面进行切换时，如果vue存在，会立刻触发函数，执
vue.js2.0关于computed、methods、watch、created的区别
热门推荐
milli236的博客
09-22 1万+
{{ss}} export default{ data(){ return{ list:'' } }, computed:{ ss:function(){ return this.list+'zhe shi s' }, }, created
vue2和vue3的生命周期有什么区别
12-23
Vue2和Vue3的生命周期有以下区别： 1. 移除的生命周期钩子函数：Vue3移除了一些生命周期钩子函数，包括activated、deactivated、beforeMount和errorCaptured。这些钩子函数在Vue2中用于处理组件的激活和停用、挂载前和错误捕获等情况。 2. 新增的生命周期钩子函数：Vue3引入了一些新的生命周期钩子函数，包括beforeUnmount和unmounted。beforeUnmount在组件卸载之前调用，unmounted在组件卸载之后调用。 3. 生命周期的合并：Vue3对生命周期的合并进行了优化。在Vue2中，父组件和子组件的生命周期钩子函数执行顺序是先父后子，而在Vue3中，父组件和子组件的生命周期钩子函数会同时触发，不再有先后顺序的区分。 4. 生命周期的重命名：Vue3对一些生命周期钩子函数进行了重命名。例如，beforeCreate被重命名为beforeSetup，created被重命名为setup。 5. Composition API的引入：Vue3引入了Composition API，它提供了一种新的组织组件逻辑的方式。在Composition API中，可以使用onBeforeMount、onMounted、onBeforeUnmount等函数来替代Vue2中的生命周期钩子函数。 下面是一个示例代码，演示了Vue2和Vue3的生命周期钩子函数的区别： ```javascript // Vue2 export default { beforeCreate() { console.log('Vue2 - beforeCreate') }, created() { console.log('Vue2 - created') }, beforeMount() { console.log('Vue2 - beforeMount') }, mounted() { console.log('Vue2 - mounted') }, beforeUpdate() { console.log('Vue2 - beforeUpdate') }, updated() { console.log('Vue2 - updated') }, beforeDestroy() { console.log('Vue2 - beforeDestroy') }, destroyed() { console.log('Vue2 - destroyed') } } // Vue3 import { onBeforeMount, onMounted, onBeforeUnmount } from 'vue' export default { setup() { onBeforeMount(() => { console.log('Vue3 - beforeMount') }) onMounted(() => { console.log('Vue3 - mounted') }) onBeforeUnmount(() => { console.log('Vue3 - beforeUnmount') }) return {} } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值