我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件的生命周期的执行顺序是什么?

当父子组件在加载的时候,执行的先后顺序为

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

然后理解下这个顺序:

1.当父组件执行完beforeMount挂载开始后,会依次执行子组件中的钩子,直到全部子组件mounted挂载到实例上,父组件才会进入mounted钩子

2.子级触发事件,会先触发父级beforeUpdate钩子,再去触发子级beforeUpdate钩子,下面又是先执行子级updated钩子,后执行父级updated钩子

总结:

父组件先于子组件created,而子组件先于父组件mounted

父子组件加载渲染过程:

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新:父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程:父beforeUpdate->父updated

销毁:父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
————————————————
版权声明:本文为CSDN博主「程序_人生」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qyl_0316/article/details/107505447

vue中父子组件钩子的执行顺序的更多相关文章

  1. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  2. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

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

    之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...

  4. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  5. Vue父子组件生命周期执行顺序及钩子函数的个人理解

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...

  6. Vue相关,vue父子组件生命周期执行顺序。

    一.实例代码 父组件: <template> <div id="parent"> <child></child> </div& ...

  7. vue 中父子组件之间的交互

    1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. vue中父子组件传递信息实现

    为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...

随机推荐

  1. noi.ac 字符串游戏

    题面 Zhangzj和Owaski在玩一个游戏.最开始有一个空的01串,Zhangzj和Owaski轮流进行操作,Zhangzj先走.每次进行操作的人可以在串上任意位置加一个新的字符,由于串是01串, ...

  2. 不想业务被中断?快来解锁华为云RDS for MySQL新特性

    摘要:新特性上线!华为云RDS for MySQL又添新技能,实力保障业务连续性. 本文分享自华为云社区<不想业务被中断?快来解锁华为云RDS for MySQL新特性>,作者:Gauss ...

  3. Pipeline 有什么好处,为什么要用 pipeline?

    答:可以将多次 IO 往返的时间缩减为一次,前提是 pipeline 执行的指令之间没有 因果相关性.使用 redis-benchmark 进行压测的时候可以发现影响 redis 的 QPS 峰值的一 ...

  4. 在 Spring MVC 应用程序中使用 WebMvcTest 注释有什么用处?

    在测试目标只关注 Spring MVC 组件的情况下,WebMvcTest 注释用于单元测试 Spring MVC 应用程序.在上面显示的快照中,我们只想启动 ToTestController. 执行 ...

  5. MySQL_fetch_array 和 MySQL_fetch_object 的区别是 什么?

    以下是 MySQL_fetch_array 和 MySQL_fetch_object 的区别: MySQL_fetch_array() – 将结果行作为关联数组或来自数据库的常规数组返回. MySQL ...

  6. java中的异常体系?throw和throws的区别?

    一.java中的异常体系 Thorwable类(表示可抛出)是所有异常和错误的超类,两个直接子类为Error和Exception,分别表示错误和异常.其中异常类Exception又分为运行时异常(Ru ...

  7. Thymeleaf+Spring使用自己的工具类

    第一种.提供思路,继承SpringStandardDialect,重写getExpressionObjectFactory方法,设置expressionObjectFactory的实际对象,并在Tem ...

  8. 为什么WAIT必须在同步块中

    我们知道java的Object有wait和notify方法,如果要使用wait和notify的话,那么必须在synchronized块中,否则会抛出IllegalMonitorStateExcepti ...

  9. 有哪些不同类型的 IOC(依赖注入)方式?

    构造器依赖注入:构造器依赖注入通过容器触发一个类的构造器来实现 的,该类有一系列参数,每个参数代表一个对其他类的依赖.Setter 方法注入:Setter 方法注入是容器通过调用无参构造器或无参 st ...

  10. js里面是没有Trim()这个方法的可以用以下的形式来判断是否输入的值为空

    if (text.value.replace(/\s+/g, "").length == 0)