父子组件生命周期及子组件获取数据问题

一、父子组件的生命周期

1.普通父子组件：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

2.爷组件Y、父组件F、子组件Z

其中父组件为component(:is="")写法，

子组件为按需引入写法 

switch(this.pos){
    case enums.top:
        return ()=> import("./top.vue")
    default:
        return ()=>import("./default.vue")
}

生命周期：爷beforeCreate-爷created->爷beforeMount->父beforeCreate->父created->父beforeMount->父mounted->爷mounted->子beforeCreate->子created->子beforeMount->子mounted

二、父传子props数据问题分析

1.异步数据问题 在子组件的created和mounted打印不到最新的props 

如父组件传过来的数据是created中请求接口获取的，走到父created遇见请求接口的异步任务，会将其放到一个任务队列，继续执行生命周期（生命周期是同步的）钩子，执行到子组件的created和mounted，还没开始请求接口当然打印不到最新的数据,只能打印到父组件在data中定义的该数据

注意：如果在created中有await语法则await之后的代码块同样的也会被放入任务队列，先执行子组件的生命周期，子挂载后再执行父mounted中的同步代码，等所有同步任务执行完再执行await的异步及await之后的代码块

2.同步数据 父组件在data定义的数据或执行到子created前父组件生命周期中的同步数据

同步数据可以在子组件的created中直接打印处理

三、子组件渲染及如何处理父组件的异步数据 

1.无需在子组件中进行处理的数据

如父传递的数据无需特别处理，不论该数据是同步异步，都可用来展示，因为vue是响应式的即使异步数据等数据更新后页面后自动刷新的，不过若为异步数据在子的created里打印不到最新的，不过为什莫要打印呢哈哈

2.子对接受的父数据需要处理

同步：可直接在created写方法进行处理

异步：

方案一：watch 监听到传来的新数据时通过方法进行处理

方案二：在父组件添加v-if 如下,请求接口后 给list赋值，通过list的长度判断是否展示模块

这样就可以确保子组件执行created值一定是接口的值然后再进行处理，相当于把数据变成同步的了

topModule(v-if="list.length")
data(){
    return {
        list:[]   
     }
}