记录一次父子组件异步数据渲染的问题

一、业务场景

点击对应歌单，通过歌单id获取歌单数据以及可播放列表

主页与歌单组件是父子组件关系，通过父子组件传值，将要显示的信息展示到子组件

二、问题描述

父组件值还没有传递过来，子组件的页面在就进行渲染，此时值为undefined，报错

因为父组件的monted在子组件的created和mounted之后

先了解父子组件生命周期的顺序关系

一个组件的生命周期

beforeCreate ——> created ——> beforeMount ——> mounted ——> beforeUpdate ——> update ——> beforeDestroy ——> destroyed

父组件结合子组件之后

父beforeCreate ——> 父created ——> 父beforeMount ——> 子beforeCreate ——> 子created ——> 子beforeMount ——> 子mounted ——> 父mounted ——> 父beforeUpdate ——> 子beforeUpdate ——> 子updated ——> 父updated ——> 父beforeDestroy ——> 子beforeDestroy ——> 子destroyed ——> 父destroyed

所以产生了以上的原因

三、解决方案

• 在父组件created生命周期发起请求，在子组件创建之前就获得数据

• 给子组件页面添加v-if判断，等到数据获取到之后在渲染页面，这种方法页面加载有一定延迟