页面中有父子组件，生命周期顺序如何执行？（面试高频 一篇搞懂）

最新推荐文章于 2023-03-12 13:31:44 发布
最新推荐文章于 2023-03-12 13:31:44 发布
阅读量848 收藏 1
点赞数 1
分类专栏： Vue 文章标签： 面试 vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45745641/article/details/122267216
版权
本文探讨了在Vue中，当页面包含父子组件时，它们的生命周期顺序如何执行。通过实例展示，创建过程中子组件先于父组件完成创建和挂载；而在子组件销毁时，父组件的更新前先执行，接着是子组件的销毁过程，最后是父组件的更新后。理解这一顺序对编写正确的代码逻辑至关重要。
摘要由CSDN通过智能技术生成

前言

之前一篇文章详细讲解了Vue2生命周期的过程 —> Vue2生命周期详解
在实际开发中，一个页面经常会有父组件和子组件，那么在这个页面中，对于父子组件他们的生命周期又是如何执行的呢？看了一些网上的文章资料，竟然有些讲解写的是错误答案，带偏大家，所以在本文利用实践得出结论，带大家彻底搞懂这个知识点~

创建子组件和父组件

这里我就写一个页面，在里面创建子组件和父组件

let item = Vue.component('item', {
   
   template: `&
最低0.47元/天 解锁文章
Beiyux
关注
专栏目录
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
2023大厂高频面试题之Vue篇(2)
zag666的博客
04-25 457
虚拟DOM的理解 vue 和 react 里的key的作用是什么? 为什么不能用Index？用了会怎样? 如果不加key会怎样? 为何Vue采用异步渲染 Vue.nextTick() 组件中的 data为什么是一个函数 为什么new Vue这个里面的data可以放一个对象？ vue如何检测数组变化 ajax请求放在哪个生命周期中 Vue父子组件生命周期调用顺序 Vue组件为什么只能有一个根元素？ vue 的keep-alive的作用是什么？怎么实现的？如何刷新的? 何时需要使用beforeDestroy
父组件创建及创建的时候，如果有子组件，子组件会经历哪些生命周期阶段，顺序是怎样的？
ImeiLau的博客
03-30 339
经历的周期及顺序如下所示 执行App组件中的constructor； 执行App组件中的getDerivedStateFromProps 执行App 组件中 Render函数 执行子组件组件的constructor 执行子组件中的getDerivedStateFromProps" 执行子组件中的render函数 执行子组件中的执行componentDidMount 执行App组件中 componentDidMount 代码演示 import React, { Component } from "reac
Page页面生命周期函数执行顺序
weixin_47426048的博客
11-26 1517
uni-app 生命周期函数执行顺序
动态页面生命周期（讲到了系统函数的执行顺序）
fuda_1985的专栏
09-14 358
 我刚学c#的时候老师讲过一回，后来一直想不起来了。今天偶然看到了。觉得还是很有必要看一下的。留个地址~http://www.cnblogs.com/cathsfz/archive/2006/11/19/564929.html
asp.net页面生命周期事件执行顺序
HiNet
03-27 797
Page页面： Page_PreInit Page_Init Page_InitComplete Page_PreLoad Page_Load      //Button事件 Page_LoadComplete Page_PreRender Page_RenderComplete Page_SaveStateComplete 带有Master页面： Page_PreIni
网页生命周期-控件事件执行顺序
weixin_30817749的博客
06-07 317
页面事件执行的循序（粗略） 1，Perlnit 2，Lnit 3，Lnitcomplete 4，Perload 5，Page.load 6，控件load（包括控件的属性值） 7，控件事件 8，............... 9，Render【】 10，Page.unload 控件事件的执行顺序 l提交按钮必定在最后 l其他相同级别的 -TextChang...
2023高频前端面试题合集之Vue篇
最新发布
07-30
### 多组件（父子组件）中生命周期的调用顺序 在复杂的多组件结构中，理解组件间生命周期的调用顺序至关重要。通常情况下： - **父组件**的生命周期钩子先于**子组件**执行。 - 当组件挂载时，父组件的`mounted`...
2023大厂高频面试题之Vue篇
zag666的博客
06-24 843
Vue的优点及缺点 react框架是mvvm框架还是mvc框架 谈谈对MVVM原理的理解 Vue响应式数据的原理 Vue 双向数据绑定原理 computed、watch和methods Vue的生命周期 Vue父子组件生命周期 Vue的created中如何获取到dom元素 v-if和v-for哪个优先级更高？如果两个同时出现，应该怎么优化得到更好的性能？ Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？ Vue中的diff算法 为什么引入diff Vue能不能在编译时构建而不是运行时使用虚
React笔记(四)生命周期函数、生命周期运行顺序
qq_39535240的博客
03-15 914
生命周期函数、生命周期运行顺序
vue生命周期及执行顺序
ernesto的博客
03-12 4041
vue生命周期
父子组件传值相关知识（回显在同一页面，非同一文件）
Crowd_chips的博客
11-23 443
props介绍 props: 用于传参，类似与data() 下的 return; props: 也存在默认值，只不过比return 要复杂一些，需要自己指定类型。如使用类型不正确则控制台就会报错。 例： props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: {
应用生命周期、页面生命周期、组件生命周期
︶￣城南花已开
12-21 1517
uni-app中 应用生命周期、页面生命周期、组件生命周期
vue（子组件访问父组件，$root,$parent）
lbs311709000127的博客
12-03 583
$root:访问根组件 $parent：访问父组件 运行结果 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> </st...
小程序的应用生命周期、页面生命周期
weixin_44001906的博客
09-30 1867
小程序的应用生命周期与页面生命周期
uniapp的生命周期顺序
weixin_45977349的博客
01-03 2061
Page页面生命周期函数执行顺序 beforeCreate => onLoad => onShow => created => beforeMount => onReady => mounted 刷新数据后 beforeUpdate => updated 我的例子 代码 // beforeCreate() { console.group('be...
组件页面跳转及父子组件传参
dianhegong6630的博客
07-02 350
(1) 方法一 1 <template> 2 <div> 3 <ul> 4 <li @click="showPage1" :class="{active:isShow1}">11</li> 5 <li @click="showP...
vue项目构建——父子组件中调用方法的执行顺序
WXY19951125的博客
12-03 2051
需求场景： 使用vue-cli创建的项目，父组件LeftMainmenu.vue里通过&lt;router-view&gt;加载了子组件，父组件与子组件的methods里各自有方法，初始化的时候在mounted里进行了调用。预设的想法是想在父组件LeftMainmenu.vue的方法里把axios请求到的数据设置成缓存【以下用localdata替代】，然后子组件调用的方法去使用localdata...
组件内部前置守卫beforeRouteEnter没有this如何使用？组件如何进行递归使用？父子组件生命周期执行顺序？
05-20
3. 父子组件的生命周期执行顺序如下： - 父组件 `beforeCreate` - 父组件 `created` - 父组件 `beforeMount` - 子组件 `beforeCreate` - 子组件 `created` - 子组件 `beforeMount` - 子组件 `mounted` - 父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值