【实战】Vue 中 Props 值因异步获取导致的报错问题解析

问题简述

父子组件通过 props 传值，当所传值需要异步请求获取时，子组件在挂载完成阶段（mounted），拿不到props值

具体实例描述

父组件：

复制代码

子组件：

复制代码

问题根源

上面的代码，我们从生命周期的角度，从头走一遍：

1. 父组件开启生命周期
2. 父组件进行到 created 阶段，完成 fatherData 的初始化，并发出了异步请求获取数据。
3. 父组件进行到 beforeMount 阶段，发现有引用子组件，于是开始编译子组件
4. 子组件开启生命周期
5. 子组件进行到 created 阶段，完成 props 的初始化（其值为 fatherData的初始值 {}）
6. 子组件进行到 mounted 阶段，输出 props
7. 父组件进行到 mounted 阶段
8. 异步请求返回数据，并更新了 fatherData (忽略 beforeUdate 和 updated，不是重点)
9. 子组件中 watch 检测到 fatherData 值变化，触发函数输出 {name: 'hehe'}

沙盒模拟地址

可以看出，有三个关键因素决定了这种结果：

1. Js 异步机制
2. Vue 生命周期中 Props 的创建机制（在 created 完成）
3. Vue 生命周期中父子组件的挂载机制（先子后父）

解决思路

子组件应增加 v-if 判断条件，在异步请求返回数据后进行编译渲染。