如今前端框架都流行组件化,页面元素都可以使用组件进行高度概括,那么处理组件之间的关系就如同处理页面架构一样重要。正确理解组件之间的关系,才能让代码按照我们与预料方式工作。最近参与了一个Vue.js的项目,在处理父子嵌套组件之间关系时遇到了较大的阻力,虽然问题最后解决了,但是以花费大量时间为代价的,记录在这里,希望下次不踩同样的坑,能更高效的处理此类问题。
0 问题描述
同react,vue组件也有一套完整的生命周期,不同阶段有不同的分工。总体来讲经常会用的生命周期钩子有以下几种:
- created
- mounted
- destroy
通常会在这些钩子中处理一些异步请求,最常见的就是发起网络请求调用api获取数据。
这里有个问题:在单一组件中,钩子的执行顺序是created -> mounted -> destroyed
,但当父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数,这些父子组件的这些钩子是如何交融执行,且执行顺序又是怎样的呢?
最近开发中遇到的一个“诡异”的问题,就是由于对父子组件生命周期钩子执行顺序理解不透彻引起的。问题是这样的:有一个组件有由一系列子组件组成,子组件又被分解成组件,这样下来就构成了三级组件。需求是在组件显示在页面上之后,再将数据初始化进行回显。父组件获取数据后传递到子组件,要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢?。
我的做法是这样的:最高层父组件的mounted
中发起请求获取数据,通过vue的响应机制以props的形式传递到子组件,在子组件的mounted
中拿到对应的props进行处理。这样做法要求父组件的mounted
时机先于子组件的mounted
,但事实是这样吗?显然不是。
这样导致的问题就是,数据无法正确的回显。
1 探究
探究的方法是:写一个有父子嵌套关系的组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载。
子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted
中获取api的数据,子组件的mounted
是拿不到的。
仔细看看父子组件生命周期钩子的执行顺序,会发现created
这个钩子是按照从外内顺序执行,所以回显场景的解决方案是:在created中发起请求获取数据,依次在子组件的created中会接收到这个数据。
2 结论
Vue父子组件生命周期钩子的执行顺序遵循:从外到内,然后再从内到外,不管嵌套几层深,也遵循这个规律。
组件化的设计思路大抵相同,React中父子组件生命周期钩子执行顺序,具体没做探究,但是值得一提的是react父组件的componentDidMount也是晚于子组件componentDidMount执行的。
3 其他
关于回显,问题在于如何在子组件中知道远程数据回来了,并且通过对远程数据的加工处理,最终形成正确的回显。处理按照钩子的顺序获取数据,在vue中还有一个特性watch
,是否可以通过watch属性的方式来更新回显呢?这种方法有待于探究。
vue 父子component生命周期的更多相关文章
-
Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
-
vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
-
Vue父子组件生命周期
转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...
-
Vue相关,vue父子组件生命周期执行顺序。
一.实例代码 父组件: <template> <div id="parent"> <child></child> </div& ...
-
python 全栈开发,Day91(Vue实例的生命周期,组件间通信之*事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
-
Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
-
关于Vue实例的生命周期(2)
关于Vue实例的生命周期(2) 创建(create)->挂载(mount)->更新(update)->销毁(destory) 钩子函数触发事件 beforeCreate 在实例初始 ...
-
Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
-
Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
随机推荐
-
写给Git初学者的7个建议
[原文] - http://blog.jobbole.com/50603/ 当我刚刚开始使用Git的版本控制时,我根本不确定我付出那么多时间是不是会得到回报.Branch.Stage.Stash,这些 ...
-
JS.中文乱码,Jsp\Servlet端的解决办法
JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21| 分类: Extjs | 标签:encodeuricomponent 乱码 urldecoder ...
-
Apache Flume 1.7.0 发布,日志服务器
Apache Flume 1.7.0 发布了,Flume 是一个分布式.可靠和高可用的服务,用于收集.聚合以及移动大量日志数据,使用一个简单灵活的架构,就流数据模型.这是一个可靠.容错的服务. 本次更 ...
-
SpringJMS解析2-JmsTemplate
尽管消息接收可以使用消息监听器的方式替代模版方法,但是在发送的时候是无法替代的,在Spring中必须要使用JmsTemplate提供的方法来进行发送操作,可见JmsTemplate类的重要性,那么我们 ...
-
C# 实现Oracle中的数据与Excel之间的转换
最近项目要求实现数据库之间数据在各个数据库之间导入导出,在此做个笔记 1. 将Oracle中的表导入到Excel中,反之亦然 private static readonly string conne ...
-
django目录下的各文件
本文部分转载. 使用Python setup.py install命令从源代码安装完Django后,这些都会被拷贝到Python安装目录下的Lib/site-packages/django子目录中.之 ...
-
MySQL中间件之ProxySQL(1):简介和安装
返回ProxySQL系列文章:http://www.cnblogs.com/f-ck-need-u/p/7586194.html 1.ProxySQL简介 之前的文章里,介绍了一个MySQL的中间件: ...
-
华为路由器 HDLC 实验
HDLC 简介 高级数据链路控制(High-Level Data Link Control 或简称 HDLC),是一个在同步网上传输 数据.面向比特的数据链路层协议,它是由国际标准化组织(ISO)根据 ...
-
P3723 [AH2017/HNOI2017]礼物
题目链接:[AH2017/HNOI2017]礼物 题意: 两个环x, y 长度都为n k可取 0 ~ n - 1 c可取任意值 求 ∑ ( x[i] - y[(i + k) % n + 1] ...
-
001.Kubernetes简介
一 Kubernetes概述 Kubernetes是一个全新的基于容器技术的分布式架构领先方案.Kubernetes(k8s)是Google开源的容器集群管理系统(谷歌内部:Borg).在Docker ...