vue同级别组件切换生命周期执行顺序

于 2024-08-22 15:39:22 发布
阅读量140 收藏
点赞数 5
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36619440/article/details/141429671
版权

初次载入时，会先触发A组件的beforeCreate、created、beforeMount、mounted等生命周期，且按照顺序执行，

但是当A组件切换到B组件时

此时会先执行B组件的生命周期函数，当执行到beforeMount后，又会去执行组件A的注销函数（beforeDestroy，deactivated），注销结束后才会执行B组件的mounted生命周期函数

qq_36619440
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue父子组件生命周期执行顺序是什么？
qq_43648865的博客
02-28 5462
在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。子组件先挂载，然后父组件挂载，即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。所以组件数据回显的时候，在父组件mounted中获取api的数据，子组件的mounted是拿不到的。子组件先挂载，然后父组件挂载。注意：在父组件传递接口的数据给子组件时，一定要在子组件标签上加上v-if="传递的接口数据"
Vue中父子组件生命周期执行顺序小结
qq_40922656的博客
12-21 639
在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->… ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢? 组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载。 父beforeCreate-> 父create -> 子beforeCreate-&gt
vue父子组件生命周期执行顺序_Vue中父子组件生命周期执行顺序回顾
weixin_39742392的博客
12-18 471
问题背景在单一组件中，钩子的执行顺序是beforeCreate-> created -> mounted->... ->destroyed，但当父子组件嵌套时，父组件和子组件各拥有各自独立的钩子函数，这些父子组件的这些钩子是如何交融执行，且执行顺序又是怎样的呢?父子组件生命周期执行顺序组件，分别在他们的钩子函数中打印日志，观察执行顺序。得到的结果如图所示，父组件先创建，然后...
vue父子组件生命周期执行顺序_深入理解Vue父子组件生命周期执行顺序及钩子函数...
weixin_39641386的博客
12-18 210
先附一张官网上的vue实例的生命周期图，每个Vue实例在被创建的时候都需要经过一系列的初始化过程，例如需要设置数据监听，编译模板，将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数)，这给了用户在不同阶段添加自己代码的机会。1、vue的生命周期图在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网...
vue父子组件生命周期执行顺序
Zing_ing的博客
01-11 771
一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。在使用v-router时有时需要使用keep-alive来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子调用。此时 Vue 实例中的数据是最新的了，但是页面中的数据还是旧的，可以在此时进一步更改数据，而不会造成重新渲染。实例仍然完全可以使用。
vue父子组件生命周期执行顺序_Vue父子组件生命周期执行顺序
weixin_39867200的博客
12-18 147
1、vue的生命周期2、实际操作下面我们在实际的代码执行过程中理解父子组件生命周期创建过程以及钩子函数执行的实时状态变化。测试基于下面的代码，引入vue.js文件后即可执行。(打开页面后，再按一次刷新会自动进入debugger状态)1 2 3 4 5 6 7 Document8 910 11 12 13 14 {{message}}15 ...
vue父子组件在不同情况下生命周期的执行顺序
qq_42549445的博客
05-20 2477
在分析父子组件生命周期之前，我们先核实一次两个路由（不包含子组件）之间切换，其生命周期的执行顺序！ 在这用到两个路由，新闻路由和top路由（名字只做区分，没有其他含义） 1、首先切换到新闻路由 执行顺序：beforeCreate > created > beforeMount > mounted 2、从新闻路由切换到top路由 可以看到top组件开始挂载后，先执行了新闻组件的 bef...
Vue父组件和子组件生命周期的执行顺序
qq_41915137的博客
03-04 606
在Vue中，组件的生命周期可以分为几个主要阶段：创建（creation）、挂载（mounting）、更新（updating）和销毁（destruction）。每个阶段都有相应的钩子函数，允许我们在特定时刻介入组件的行为。这个初始化过程确保了父组件能够在子组件准备就绪之前，完成自己的设置和渲染准备工作。这个顺序确保了子组件能够在父组件重新渲染之前，先更新自己的状态和视图。这个顺序确保了子组件能够在父组件完全销毁之前，先进行必要的清理工作。
vue生命周期及执行顺序
ernesto的博客
03-12 3884
vue生命周期
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在开发Vue应用时，理解父子组件的生命周期执行顺序和钩子函数是至关重要的。 Vue实例的生命周期包括多个阶段，每个阶段都有相应的钩子函数（hook），这些钩子函数是Vue实例在特定生命周期阶段被调用的函数。当创建...
vue 页面回退mounted函数不执行的解决方案
10-15
另外，对于子组件而言，如果 `created` 方法在某些情况下未执行，可能是因为数据未发生变化，或者生命周期的顺序问题。在这种情况下，可以使用 `watch` 来监听数据变化，或者确保在父组件正确传递数据给子组件。如果...
对vue里函数的调用顺序介绍
11-28
在Vue.js框架中，函数的调用顺序是与Vue组件的生命周期紧密相关的。Vue组件有多个生命周期钩子，...理解Vue组件的生命周期和函数调用顺序是编写高效、可维护的Vue应用的关键，这有助于确保在正确的时间执行正确的操作。
vue.js轮播图组件使用方法详解
10-18
总的来说，构建一个Vue.js轮播图组件需要理解Vue组件化思想，掌握数据绑定、计算属性、事件处理和生命周期钩子等核心概念，同时结合CSS布局和JavaScript动画技术，以实现功能完整且用户体验良好的轮播图效果。
类似于淘宝多属性选择vue组件
08-11
这个名为“类似于淘宝多属性选择vue组件”的项目，显然旨在实现一个功能强大的商品属性筛选组件，类似于淘宝网站上用于商品详情页面的多属性选择器。这个组件可以帮助用户根据商品的不同属性（如颜色、尺寸、材质等...
avue-crud 自定义搜索项 插槽
最新发布
qq_31683775的博客
08-20 217
加上 -search 就可以自定义查询项了。
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件
我是Superman丶的博客
08-19 177
【前端】VUE动态引入组件 通过字符串动态渲染模板。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1223
Vue 生命周期详解、面试常问问题案例 含 demo
【vue3】组件通信
aaaa_aaab的博客
08-19 557
1. 概述：自定义事件常用于：**子 => 父。**2. 注意区分好：原生事件、自定义事件。● 原生事件：● 事件名是特定的（ click 、 mosueenter 等等）● 事件对象 $event : 是包含事件相关信息的对象（ pageX 、 pageY 、 target 、 keyCode ）● 自定义事件：● 事件名是任意名称● 事件对象 $event : 是调用 emit 时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：-->
vue组件激活的生命周期
09-02
在Vue中，组件的激活生命周期包括两个钩子函数：activated和deactivated。activated钩子函数会在组件被激活时调用，而deactivated钩子函数会在组件被停用时调用。当组件从一个被缓存的路由切换到另一个路由时，组件不会被销毁，而是会触发activated钩子函数，表示组件被激活。在这个钩子函数中，我们可以执行需要在组件激活时执行的逻辑操作。而当组件从当前路由切换到其他路由时，会触发deactivated钩子函数，表示组件被停用。在这个钩子函数中，我们可以执行需要在组件停用时执行的逻辑操作。通过使用activated和deactivated钩子函数，我们可以更好地控制组件在激活和停用状态下的行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序](https://blog.csdn.net/muzidigbig/article/details/112696398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [【Vue学习】Vue组件的生命周期](https://blog.csdn.net/zx1041561837/article/details/129202119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue中keep-alive内置组件缓存的实例代码](https://download.csdn.net/download/weixin_38721119/14801633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值