VUE父子组件生命周期执行顺序

        我们去了解父子组件生命周期执行顺序之前，先了解一下，vue中的属性是如何执行的。

一、vue中属性执行顺序

1. props ：父组件传递给子组件的属性会首先被处理。
2. data ：在处理完 props 之后，Vue 会处理数据对象中的所有属性，并将它们添加到 Vue 实例中。
3. computed ：计算属性会在处理完 data 之后被计算，并添加到 Vue 实例中。
4. watch ：侦听器会在 computed 之后被处理，并添加到 Vue 实例中。
5. created ：在处理完所有选项后，Vue 实例会调用 created 钩子，并完成实例化。
6. mounted ：在实例挂载到DOM元素之后，Vue 实例会调用 mounted 钩子。
7. methods ：实例方法会在 mounted 之后被处理，并添加到 Vue 实例中

二、VUE父子组件生命周期执行顺序

1. 首先执行的是父组件的beforeCreate
2. 执行的是父组件的created周期
3. 执行的是父组件的beforeMount周期
4. 执行的是子组件的beforeCreate周期
5. 执行的是子组件的created周期
6. 执行的是子组件的beforeMount周期
7. 执行的是子组件的mounted周期
8. 执行的是父组件的mounted周期

 总结：

一、父子组件异步传值的坑

子组件的生命周期只会执行一次，但是当子组件渲染的时候父组件的数据还没接受完就会造成子组件没有任何内容渲染。

二、解决父子组件异步传值的方法

1. 给子组件添加渲染条件，使用v-if，当父组件数据接收完毕后在渲染子组件。

2. 在子组件中添加watch监听，当父组件数据传输过来时，改变原有的默认数据，重新渲染页

执行的先后顺序为 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 。