我们已经非常熟悉单个的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. 一键生成mapper、mapperxml等文件——MybatisX插件的使用

    本文首发于西二blogs:一键生成mapper.mapperxml等文件--MybatisX插件的使用 搬运请务必转载出处. MybatisX插件使用--为快速开发而生 前言:其实很久以前我就非常厌恶 ...

  2. wordpress在线检测主题和插件

    http://wpthemedetector.coderschool.cn/ http://www.wpthemedetector.com/ http://whatwpthemeisthat.com ...

  3. 深入理解RPC—序列化

    深入理解RPC-序列化 xiaofang233 2020-09-18 16:38:22 1024 收藏 6分类专栏: 分布式服务版权为什么需要序列化?首先,我们得知道什么是序列化与反序列化. 我们先回 ...

  4. IDEA端口占用的解决方案

    使用端口查找到对应的进程PID: netstat -ano | findstr "端口" 查找到对应PID的进程信息 tasklist /v /fi "PID eq &l ...

  5. 请说说你对Hibernat的理解?JDBC和Hibernate各有什么优势和劣势?

    Hibernate是一个轻量级的持久层开源框架,它是连接Java应用程序和关系数据库的中间件,负责Java对象和关系数据之间的映射.Hibernate内部对JDBC API进行了封装,负责Java对象 ...

  6. 在Spring AOP 中,关注点和横切关注的区别是什么?

    关注点是应用中一个模块的行为,一个关注点可能会被定义成一个我们想实现的一个功能. 横切关注点是一个关注点,此关注点是整个应用都会使用的功能,并影响整个应用,比如日志,安全和数据传输,几乎应用的每个模块 ...

  7. 哪些是重要的bean生命周期方法?你能重载它们吗?

    有两个重要的bean 生命周期方法,第一个是setup , 它是在容器加载bean的时候被调用.第二个方法是 teardown 它是在容器卸载类的时候被调用. The bean 标签有两个重要的属性( ...

  8. 什么是 zuul路由网关?

    (1)Zuul 包含了对请求的路由和过滤两个最主要的功能:其中 责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础而过滤器功能则负 请求的处理过程进行干预,是实现请求校验.服务聚合等功 ...

  9. Kafka 新旧消费者的区别?

    旧的 Kafka 消费者 API 主要包括:SimpleConsumer(简单消费者) 和 ZookeeperConsumerConnectir(高级消费者).SimpleConsumer 名字看起来 ...

  10. 静态嵌套类(Static Nested Class)和内部类(Inner Class) 的不同?

    Static Nested Class 是被声明为静态(static)的内部类,它可以不依赖于外部类 实例被实例化.而通常的内部类需要在外部类实例化后才能实例化,其语法看起 来挺诡异的,如下所示. / ...