程序员经验分享-hwhale

vue父子组件在不同情况下生命周期的执行顺序

2023-11-16

 在分析父子组件生命周期之前，我们先核实一次两个路由（不包含子组件）之间切换，其生命周期的执行顺序！

在这用到两个路由，新闻路由和top路由（名字只做区分，没有其他含义）

1、首先切换到新闻路由

                       

执行顺序：beforeCreate > created > beforeMount > mounted

2、从新闻路由切换到top路由

                     

可以看到top组件开始挂载后，先执行了新闻组件的 beforeDestory 和 destroyed 生命周期后才完成top组件的挂载。

结论：如果涉及到两个组件的切换，当切换后，当前组件执行到 beforeMounte 时，会先执行上一个组件的销毁生命周期，之后当前组件完成挂载。

父子组件生命周期执行顺序

        确认完简单情况的生命周期，我们正式研究一下我们的标题：父子组件的生命周期执行顺序

        这里我们用到两个组件，新闻组件和父组件，其中父组件包含子组件one和子组件two

        场景一：从新闻组件切换到父组件

                        ​​​           

         执行顺序：one组件从开始创建执行到开始挂载，然后two组件执行相同的步骤，当上一个组件销毁后，按顺序子组件分别挂载完成，最后父组件挂载完成。

        场景二：从父组件切换到新闻组件

        通过这个场景我们来看看父组件和其子组件的销毁顺序

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

         执行顺序：父组件开始销毁，子组件分别执行开始销毁和销毁完成生命周期，最后父组件销毁完成

        场景三：two组件再包含子组件，即父组件的孙组件

                 父子组件的创建和挂载过程：

                                

        结论：从这个场景，我们再结合上面的不同场景可以分析出：如果某组件包含子组件（在这里父包含one，two，two包含孙子组件），父组件开始挂载后，会先执行子组件从开始创建到挂载完成生命周期，最后执行父组件的挂载完成生命周期

         父子组件的销毁过程：

                                 

                 以嵌套的方式完成销毁

ps：如果包含缓存的激活和失活过程，则会替代销毁的开始和完成阶段，在这里就不做测试啦！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WebView

P2P

LINQ

vue父子组件在不同情况下生命周期的执行顺序 的相关文章

  • 表达式树序列化器

    我想在客户端使用 Linq 表达式 序列化它们并在服务器端执行它们 为此我想使用 http expresstree codeplex com http expressiontree codeplex com 但我想针对自己的 WCF 调用执

  • 同步通过 LAN 电缆连接的两台 Windows 7 计算机之间的时间

    我有许多笔记本电脑 它们运行我们的应用程序 同时通过以太网电缆成对连接 但未连接到任何外部网络或互联网 时间 我需要连接对来同步其系统时间 但由于每台计算机都需要能够与任何其他计算机同步 因此我无法将一台计算机定义为时间服务器 而另一台计算

  • android webview溢出无法禁用

    我在 android webview 中有一个本地页面 页面的html and body两者都有width 100 height 100 overflow hidden 以及 result popup wrap有以下CSS result p

  • 使用 Linq 获取当前和上一个项目

    我有一个 Offer 类 例如 public class Offer public int OfferID get set public DateTime OfferDate get set public int CustomerID ge

  • Linq 警告

    Linq 是 NET 的一个很棒的补充 我发现它在很多情况下都对我很有帮助 尽管我才刚刚开始学习如何使用 Linq 然而 在阅读有关 Linq 的文章时 我发现开发人员需要留意一些微妙的事情 否则可能会导致麻烦 我已经添加了一个明确的警告

  • 如何设置属性选择器的值 Expression>

    我需要使用模式工厂的想法将 Person 类实体中的实体属性 Address 与 FactoryEntities 类中的表达式 linq 相关联 看看这就是我所拥有的并且我想要做的 Address address new Address a

  • .NET、C#、LINQ、SQL 和 OR 映射 - 我只是不明白:(

    我只是不明白 我什至不确定我是否在寻找正确的方向 问题 这就是我的 C 应用程序 我通过 SSH 连接到在线 MySQL 数据库 现在我可以使用 MySQL Connector Net 驱动程序 http dev mysql com dow

  • LINQ：根据列值选择重复行

    我试图在我的 DataGrid 中显示那些共享相同列值的行 例如 对于具有相同姓氏的人 我尝试了以下方法 dataGrid ItemsSource dataContext Addresses GroupBy a gt a SurName W

  • 仅使用 LINQ 对包含数字属性的对象集合求和

    我有一个像这样的对象模型 public class Quantity public decimal Weight get set public decimal Volume get set perhaps more decimals pub

  • Linq 中不区分大小写的“包含”

    我有一个 mvc 项目 我在其中使用 linq 在我的数据库中有一些记录 例如 Someth ing SOmeTH ing someTh ing SOMETH ING someTH ING 我想做这个 SELECT FROM dbo doc

  • 如何在 1 个活动 (android) 中显示 2 个视图？

    假设我打开了一个网络视图 public void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout ma

  • 实体框架将本地数据添加到数据库中的列表

    我对实体框架相当陌生 我正在使用此方法来查询我的数据库 var context new StudioEntities var results context tblStudios Select u gt new u Standort u N

  • WebView ssl 错误

    对不起我的英语不好 我需要加载 url https 我有一些问题 当我尝试加载页面时 webView 给我错误 primary error 3 certificate Issued to CN my site com Issued by C

  • ASP.NET 搜索表单 - 动态 Linq to SQL？

    我有一个搜索表单 允许用户以多种不同的方式搜索多个不同的字段 这是我的代码的示例 var claims from c in db Claims select c switch ddlSearchField Text case StartsW

  • LINQ 到实体日期时间比较

    我在将 LINQ 中的日期与实体表达式进行比较时遇到问题 我想检查一下是否DateTime DateTime whole day 我想这样做 return context Events Any x gt x UserId id x Date

  • LINQ FirstOrDefault 与Where(...).FirstOrDefault 之间的区别？

    之间有什么区别 FirstOrDefault someField gt someField Name Equals settings Text and Where someField gt someField Name Equals set

  • LINQ：获取表详细信息

    我正在使用 LINQPad 我想了解表的架构详细信息 我知道我是用 SQL 来做的 SELECT column name FROM information schema columns WHERE table name table name

  • 无法在 Android 中调整 Web 视图的大小

    我正在尝试调整大小Web View在安卓中 第一次单击时 Web 视图会扩展为新大小 但第二次单击时 它不会恢复为我指定的旧大小 任何帮助表示赞赏 public class MainActivity extends Activity Rel

  • 使用 Linq 返回具有最大计数的列表

    使用 C 和 Linq 如何返回具有最大大小 计数的 List 我假设您有一个名为的列表集合lists并且您想要返回此集合中元素最多的列表 如果是这样 请尝试以下操作 var listWithLargestCount lists Order

  • 为什么 Dictionary 上的这个 Linq 查询不作为数据源工作

    我在VB中有以下内容 Dim sources From source In importSources Select New With Type source Key Source source Value Name dgridSource

随机推荐

  • conda的使用教程

    conda的介绍 简单来说 conda软件就是来管理包的软件 以Python为例 在实际生活中 我们要处理多个不同的项目 因此 要安装不同的项目所需要的包 为了管理方便 conda就是用来打理不同项目的包 为不同项目创建不同虚拟环境 把不同

  • 制作HTML5百科页面

    先建一个index html 首页 代码如下 p align center a href page01 html target self img src images index jpg alt 传智播客设计学院UI设计师 a p 首页的效

  • java学习之路——第一次java（java的入门）

    java学习之路 第一次java java的入门 一 什么是java java语言是一种强类型的语言 其中包含一套基本的符号 这些符号构成了java语言的表示符和关键字 是一个跨平台的面向对象的程序设计语言 由Sun Microsystem

  • 离散数学第一章总结

    离散数学第一章 1 公式类型 1 重言式 也是永真式 公式真值恒为1 2 矛盾式 永假式 真值恒为0 3 可满足式 不是矛盾式的就都是可满足式 重言式一定是可满足式 2 成真赋值与成假赋值 也叫成真指派与成假指派 一组原子的取值 真值指派

  • Tensorflow计算、数据和运行模型

    参考书籍 Tensorflow实战Google深度学习框架 郑泽宇等 Tensorflow是一款谷歌开源的深度学习工具 与其他深度学习工具 比如caffe Deeplearning4j等 相比 其受关注度和欢迎程度尤为突出 在谷歌内部 Te

  • 02-Node.js—Buffer（缓冲器）

    文章目录 1 概念 2 特点 3 创建Buffer 3 1 Buffer alloc 3 2 Buffer allocUnsafe 3 3 Buffer from 4 操作Buffer 4 1 Buffer 与字符串的转化 4 2 Buff

  • H264实时编码及NALU，RTP传输

    原文引用地址 http wmnmtm blog 163 com blog static 382457142011920102618122 fromdm fromSearch isFromSearchEngine yes H264实时编码及N

  • linux中find命令详解,Linux下的find指令详解

    在Linux下有很多查找指令 locate whereis which find 在这些查找指令中功能最强大的当属find指令了 find命令在目录结构中搜索文件 并执行指定的操作 Linux下find命令提供了相当多的查找条件 功能很强大

  • linux shell数据重定向（输入重定向与输出重定向）详细分析

    在了解重定向之前 我们先来看看linux 的文件描述符 linux文件描述符 可以理解为linux跟踪打开文件 而分配的一个数字 这个数字有点类似c语言操作文件时候的句柄 通过句柄就可以实现文件的读写操作 用户可以自定义文件描述符范围是 3

  • Vue计算属性：简化数据处理和视图更新的利器

    一 计算属性的基本使用 计算属性 一个特殊属性 值依赖于另外一些数据动态计算出来 计算属性特点 函数内使用的变量改变 重新计算结果返回 注意 计算属性必须定义在computed节点中 计算属性必须是一个function 计算属性必须有返回值

  • 基于STM32通过RTC唤醒低功耗模式

    一 低功耗模式 1 简介 通俗的来讲低功耗模式就是降低单片机的运行功耗 STM32F10xxx有三种低功耗模式 1 睡眠模式 Cortex M3 内核停止 所有外设包括 Cortex M3 核心的外设 如 NVIC 系统时 钟 SysTic

  • 解决Go-CQhttp无法登录（服务器如何登录）的问题

    既然你能看到这篇帖子 说明你一定对这个东西不陌生了 这是某讯的登录检查机制 解决方法 也很简单 保证手机与电脑处于同一wifi以内 那这时候有人叫要问了 可是我明明开了wifi 为什么还是登陆不了呢 麻烦你不要一边开wifi一边开数据 别问

  • 大数据技术炙手可热 专业人才短缺成发展掣肘

    大数据技术炙手可热 专业人才短缺成发展掣肘 2011 11 25 09 29 1765次阅读 已有0条评论 发表评论 来源 CSDN编译 作者 李智 收藏到我的网摘 导读 尽管还存在安全等问题 但Hadoop已经为部署在大企业中的大型项目做

  • 防止内存泄露 Linux下用Valgrind做检查

    用C C 开发其中最令人头疼的一个问题就是内存管理 有时候为了查找一个内存泄漏或者一个内存访问越界 需要要花上好几天时间 如果有一款工具能够帮助我们做这件事情就好了 valgrind正好就是这样的一款工具 Valgrind是一款基于模拟li

  • 数据建模，ODS模型分析

    根据ODS系统解决的不同的数据问题 将ODS模型将数据按三层进行管理 分别针对细节级数据 汇总型数据和分析型数据 每个区域有自己的管理重点 下面分别介绍 基础数据层 FDM FOUNDATION DATA MODLE 来源于标准化的各源系统

  • 计算机视觉基础：自适应阈值分割（Computer Vision Fundamentals: Adaptive Threshold Segmentation）

    前言 阈值分割方法虽然简单 但是如果场景简单 还是可以尝试使用的 因为其消耗的时间较少 同时 也可以作为一个baseline来验证提出的新算法是否有效 对于阈值分割 我们认为没有理由讲了 这里主要介绍两种自适应阈值分割方法 实际工程应用过程

  • 3dmax出现白屏解决方法

    3DMax 卡死 白屏 渲染死机问题总结 Deveuper的博客 CSDN博客 3dmax一渲染完就卡死 修改设置

  • 区块链技术的创新周期在不断缩短吗？

    有业内人士指出 区块链技术的发展可能要经过高峰 低谷和平复的过程 这也对金融监管部门提出了挑战 要在鼓励金融创新和防范风险之间找到平衡 从有利因素来看 区块链技术的创新周期在不断缩短 据介绍 金融科技定义是指技术驱动的金融创新 包括新业务模

  • 剑指 Offer 32 - II. 从上到下打印二叉树 II

    剑指 Offer 32 II 从上到下打印二叉树 II 题目 题目链接 解题思路 具体思路 具体代码 题目 题目链接 https leetcode cn com problems cong shang dao xia da yin er c

  • vue父子组件在不同情况下生命周期的执行顺序

    在分析父子组件生命周期之前 我们先核实一次两个路由 不包含子组件 之间切换 其生命周期的执行顺序 在这用到两个路由 新闻路由和top路由 名字只做区分 没有其他含义 1 首先切换到新闻路由 执行顺序 beforeCreate gt crea

热门标签