vue 父子component生命周期

时间:2022-09-13 18:30:29

如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系,才能让代码按照我们与预料方式工作。最近参与了一个Vue.js的项目,在处理父子嵌套组件之间关系时遇到了较大的阻力,虽然问题最后解决了,但是以花费大量时间为代价的,记录在这里,希望下次不踩同样的坑,能更高效的处理此类问题。

0 问题描述

同react,vue组件也有一套完整的生命周期,不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种:

  • created
  • mounted
  • destroy

通常会在这些钩子中处理一些异步请求,最常见的就是发起网络请求调用api获取数据。

这里有个问题:在单一组件中,钩子的执行顺序是created -> mounted -> destroyed,但当父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数,这些父子组件的这些钩子是如何交融执行,且执行顺序又是怎样的呢?

最近开发中遇到的一个“诡异”的问题,就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的:有一个组件有由一系列子组件组成,子组件又被分解成组件,这样下来就构成了三级组件。需求是在组件显示在页面上之后,再将数据初始化进行回显。父组件获取数据后传递到子组件,要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢?。

我的做法是这样的:最高层父组件的mounted中发起请求获取数据,通过vue的响应机制以props的形式传递到子组件,在子组件的mounted中拿到对应的props进行处理。这样做法要求父组件的mounted时机先于子组件的mounted,但事实是这样吗?显然不是。

这样导致的问题就是,数据无法正确的回显。

1 探究

探究的方法是:写一个有父子嵌套关系的组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载。
vue 父子component生命周期

子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted中获取api的数据,子组件的mounted是拿不到的。

仔细看看父子组件生命周期钩子的执行顺序,会发现created这个钩子是按照从外内顺序执行,所以回显场景的解决方案是:在created中发起请求获取数据,依次在子组件的created中会接收到这个数据。

2 结论

Vue父子组件生命周期钩子的执行顺序遵循:从外到内,然后再从内到外,不管嵌套几层深,也遵循这个规律。

组件化的设计思路大抵相同,React中父子组件生命周期钩子执行顺序,具体没做探究,但是值得一提的是react父组件的componentDidMount也是晚于子组件componentDidMount执行的。

3 其他

关于回显,问题在于如何在子组件中知道远程数据回来了,并且通过对远程数据的加工处理,最终形成正确的回显。处理按照钩子的顺序获取数据,在vue中还有一个特性watch,是否可以通过watch属性的方式来更新回显呢?这种方法有待于探究。

vue 父子component生命周期的更多相关文章

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

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

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

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

  3. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

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

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

  5. python 全栈开发,Day91&lpar;Vue实例的生命周期&comma;组件间通信之*事件总线bus&comma;Vue Router&comma;vue-cli 工具&rpar;

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  6. Vue 2&period;0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  7. 关于Vue实例的生命周期(2)

     关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...

  8. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  9. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

随机推荐

  1. 写给Git初学者的7个建议

    [原文] - http://blog.jobbole.com/50603/ 当我刚刚开始使用Git的版本控制时,我根本不确定我付出那么多时间是不是会得到回报.Branch.Stage.Stash,这些 ...

  2. JS&period;中文乱码,Jsp&bsol;Servlet端的解决办法

    JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21|  分类: Extjs |  标签:encodeuricomponent  乱码  urldecoder   ...

  3. Apache Flume 1&period;7&period;0 发布,日志服务器

    Apache Flume 1.7.0 发布了,Flume 是一个分布式.可靠和高可用的服务,用于收集.聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型.这是一个可靠.容错的服务. 本次更 ...

  4. SpringJMS解析2-JmsTemplate

    尽管消息接收可以使用消息监听器的方式替代模版方法,但是在发送的时候是无法替代的,在Spring中必须要使用JmsTemplate提供的方法来进行发送操作,可见JmsTemplate类的重要性,那么我们 ...

  5. C&num; 实现Oracle中的数据与Excel之间的转换

    最近项目要求实现数据库之间数据在各个数据库之间导入导出,在此做个笔记 1. 将Oracle中的表导入到Excel中,反之亦然  private static readonly string conne ...

  6. django目录下的各文件

    本文部分转载. 使用Python setup.py install命令从源代码安装完Django后,这些都会被拷贝到Python安装目录下的Lib/site-packages/django子目录中.之 ...

  7. MySQL中间件之ProxySQL&lpar;1&rpar;:简介和安装

    返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.ProxySQL简介 之前的文章里,介绍了一个MySQL的中间件: ...

  8. 华为路由器 HDLC 实验

    HDLC 简介 高级数据链路控制(High-Level Data Link Control 或简称 HDLC),是一个在同步网上传输 数据.面向比特的数据链路层协议,它是由国际标准化组织(ISO)根据 ...

  9. P3723 &lbrack;AH2017&sol;HNOI2017&rsqb;礼物

    题目链接:[AH2017/HNOI2017]礼物 题意: 两个环x, y 长度都为n k可取 0 ~ n - 1      c可取任意值 求 ∑ ( x[i] - y[(i + k) % n + 1] ...

  10. 001&period;Kubernetes简介

    一 Kubernetes概述 Kubernetes是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部:Borg).在Docker ...