解决vue开发时子组件数据和组件渲染的异步问题

在开发中有时候会遇到子组件渲染完成了请求也没响应回来的情况
父子组件的钩子并不会等待请求返回，请求是异步的，VUE设计也不能因为请求没有响应而不执行后面的钩子，因此，偶尔会遇到请求也正常请求了，数据也能在控制台打印出来，但是页面就是没渲染数据的问题，下面总结一下解决方案：

1.在父组件使用子组件的时候添加v-if判断

在渲染子组件的时候加上一个条件,data1是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。

<div class="test">
    <children v-if="data1" :data="data1" ></children>
</div>

2.在自组件watch prop变量

在父组件请求数据完成并赋值对应的传给子组件的变量后，子组件prop发生改变，子组件watch对应的prop，再做相关操作

watch:{
   "props中的变量":{
      deep:true,
      handler:function(newVal,oldVal) {
        this.$nextTick(() => {
          this.xxx（子组件data定义变量） = newVal
        })
      }
    },
}