父子组件生命周期执行顺序（同步组件的情况下）
更新过程
父beforeCreate -> 父created ->父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
更新过程
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
销毁过程
父beforeDestror -> 子beforeDestroy -> 子destroyed -> 父destroyed
常用钩子简易版
父created -> 子created -> 子mounted -> 父mounted
补充单一组件钩子执行顺序
activated,deactivated是组件keep-alive时独有的钩子
1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. activated
8. deactivated
9. beforeDestroy
10. destroyed
11. errorCaptured
单一钩子总结
- beforeCreate执行时：data和el均未初始化，值为undefined
- created执行时：Vue实例观察的数据对象data已经配置好，已经可以得到data的值，但Vue实例使用的根DOM元素el还未初始化
- beforeMount执行时：data和el均已经初始化，但此时el并没有渲染进数据，el的值为“虚拟”的元素节点
- mounted执行时：此时el已经渲染完成并挂载到实例上
- beforeUpdate和updated触发时，el中的数据已经渲染完成，但只有updated钩子被调用时候，组件dom才被更新。
- 在created钩子中可以对data数据进行操作，这个时候可以进行数据请求将返回的数据赋给data
- 在mounted钩子对挂载的dom进行操作，此时，DOM已经被渲染到页面上。
- 虽然updated函数会在数据变化时被触发，但却不能准确的判断是哪个属性值被改变，所以实际情况中用computed或watch函数来监听属性的变化，并做一些其它的操作。
- 所有的生命周期钩子自动绑定this上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法（例如 created:()=>this.fetchTodos()）,会导致this指向父级。
- 在使用v-router时有时需要使用keep-alive来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载或切换状态的时候进行某些操作，可以使用activated钩子调用。
- 父子组件的钩子并不会等待请求返回，请求是异步的，VUE设计也不能因为请求没有响应而不执行后面的钩子。所以我们必须通过v-if来控制子组件钩子的执行时机
在父组件的created中请求获取数据，通过prop传递给子组件。子组件在created或者mounted中拿父组件传递过来的数据这样处理是有问题的！
在父组件调用接口传递数据给子组件时，接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求，在子组件哪个钩子接收数据。都是取不到的。当子组件的mounted都执行完之后，此时父组件的请求才返回数据。会导致，从父组件传递给子组件的数据是undefined。
解决方法1：
在渲染子组件的时候加上一个条件，当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created中的请求返回数据后，才会执行子组件的created，mounted。最后执行父组件的mounted。
<div class="test">
<children v-if="data1" :data="data1" ></children>
</div>
解决方法二：
在子组件中watch监听，父组件获取到值，这个 值就会变化，自然可以监听到的
watch:{
data:{
deep:true,
handler:function(newVal,oldVal) {
this.$nextTick(() => {
this.data = newVal
this.data = newVal.url ? newVal.url : ''
})
}
},
}
从父组件点击调用接口并显示子组件，子组件拿到数据并监听在watch中调用方法并显示
以下为子组件，data1是从子组件传递过来的数据。在created,mounted中都拿不到父组件调用接口返回的data1。只能watch监听data1。并调用方法渲染子组件。
props:['data1'],
watch:{
data1:{
deep:true,
handler:function(newVal,oldVal) {
this.$nextTick(() => {
this.data1 = newVal
this.showData1(this.data1)
})
}
},
}