vue父组件传参子组件界面未更新

前言

首先记录一个组件的生命周期顺序：

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);