前言
首先记录一个组件的生命周期顺序:
1.挂载(初始化相关属性)
- beforeCreate
- created
- beforeMount
- mounted
2.更新(元素或组件的变更操作)
- beforeUpdate
- updated
3.销毁(销毁相关属性)
- beforeDestory
- destoryed
下图是图示:
结合父子组件,其生命周期为:
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
一、遇到的问题
今天在前端界面开发过程中,子组件是一个封装好的echart散点图,想要通过在父组件读取本地json格式的配置数据确定散点图的点位数据和尺寸大小。
在父组件的mounted函数中编写了读取配置数据并设置传入子组件的参数,在子组件的watch函数中监听数据的变化并实时更新界面。
但是界面上子组件一直未更新,反复检查了代码,并没有发现错误,很是费解。
二、问题定位和解决方式
想到可能是由于父子组件生命周期顺序导致的数据没有传进去,子组件mounted挂载先于父组件,通过界面输出log,定位到是由于在父组件读取配置数据耗时较长,导致父组件挂载函数中的语句还没有执行好,子组件已经更新,于是在子组件的watch函数加了延时函数解决问题。
setTimeout(() => {
},100);