歌单详情页面的backgroundUrl属性出现undefined报错，但是图片仍然出现，不影响渲染的效果。

歌单详情页面的backgroundUrl属性出现undefined报错，但是图片仍然出现，不影响渲染的效果
这个问题是我在开发Vue的网易云音乐项目中所遇到的问题，之所以会如此，与我从axios中获取数据的时间和页面的渲染有很大的关联。
刚开始，我以为时axios获取数据的生命周期顺序有关系，（一般我们都在create或者mounted中去请求一个后台的数据）

如下使用方式：

<img :src="playlist.creator.backgroundUrl"class="smmimg" alt=""/>

playlist.creator.backgroundUrl的数据，但是它还没有被定义，也就是说axios还没有得到数据（异步）。
那么问题会是什么呢？
网络？网络确实会有影响。但是，主要的是axios语句(我们把它放在created下)执行的时间，它的实际执行时间是在mounted之后。放在其他生命周期也会出现相同的问题。所以，axios会在页面渲染之后获取到数据。在渲染页面获得模板字符串与替换字符串时，发现引用了不存在的属性，自然就报错了。
且，axios是异步，既然是异步的，axios会在所有过的宏任务（js异步的机制，就是遇到宏任务时，先执行宏任务，再执行微任务，执行完成后才会被访问到，并且按照微任务队列的数据继续执行。Axios就不能在页面渲染之前获取到数据的。
如果，axios是同步的，当我们填写了错误的api或者api失效，这就会导致整个生命周期受到阻碍从而崩溃，最终页面渲染失败。
那么，我们知道axios会在页面渲染之后执行，那我们可以人为的添加上一个状态，用于标识axios是否获取到数据。对于对应的模板，仅当该状态为true才进行渲染。

async getMusicList(){//获取歌单的详情页面
        let id = this.$route.query.id //传输过来的id
        let res = await getMusicItemList(id);
        this.playlist =res.data.playlist;
        this.status = true;//解决axios渲染数据问题
        console.log(this.playlist);
      },
 data(){
      return{
        total:[],
          playlist:{},//歌单详情页的数据
           itemList:[],//歌单的歌曲
          status:false,
      }
}
//在页面渲染处，进行v-if的渲染

这样，我们就可以在数据获取到的时候，再去渲染该页面了。
错误解决。