vue父子组件生命周期顺序
# 前言
vue的生命周期是官方公布的一系列的钩子，其实你只需要知道这些钩子在什么时候使用就可以了。但是有时你会发现，给子组件传值传一个复杂对象的时候，感觉明明传了，但子组件中遍历取值的还是会报错，甚至需要在子组件中去做if else之类的判断。
当然如果你给子组件设置props时加上合适的数据类型以及默认值，那么也没多大事儿，但是这是基于vue生命周期出现的问题，也许你了解了这个生命周期后，可以更优雅的解决这个问题噢。
# vue 生命周期
之前有看过vue源码，时间太久了，也不是记得很清楚，但是大概是那样的。
接下来我会把这些生命周期以及它们做的事情简单的列举出来：
- beforeCreate：该组件vue实例尚未创建，什么data和el都是undefined
- created：该组件的vue实例创建完毕，data 也初始化完毕，但由于未挂载，所以el为undefined
- beforeMount：挂载之前，el初始化完毕，是一个未放到页面中的dom结构。
- mounted：挂载完毕，挂载到页面中去了
- beforeUpdate：这时候就是数据发生变化，对比vdom，比对出差异，准备更新
- updated：更新因数据变化而生成的新DOM到页面中去。
- activated：keep-alive标签包裹的内容被激活了，就直接将缓存的vue实例对象中的dom并挂载到页面中去。
- deactivated：keep-alive标签包裹的内容被隐藏了，直接将vue实例对象存放到内存中，等待后面的activated执行。也有可能轮不到被执行就被移除掉了。
- beforeDestroy：vue的实例被调用destroy方法时，把自己绑定的数据、事件等等递归的移除掉。
- destroyed：把自己的引用设置为null，如果你想清空页面中这部分dom，可以在这个生命周期中清空那部分dom。销毁操作只会销毁当前数据绑定和事件，然后去除响应式的对象，以及在大的vdom中的引用。
- errorCaptured：vue实例在运行过程中报错，可以捕获错误对象、组件、堆栈信息。
# 创建和挂载
父beforeCreate =》父created=》beforeMount=》子beforeCreate=》子created=》子beforeMount=》子mounted=》父mounted
# 更新
父beforeUpdate =》子beforeUpdate =》 子updated =》 父updated
# 销毁
父beforeDestroy =》 子 beforeDestroy =》 子 destroy =》 父destroy
# 总结
父组件先创建，子组件再创建，子组件先挂载到父组件的dom上，父组件的dom再挂载到页面上。
父组件先diff，子组件再diff，子组件比出差异后更新到父组件的dom上，父组件diff出差异后再更新到页面中。
父组件先开始解除绑定的数据和事件，子组件再解除绑定的数据和事件，子组件把自己的引用从组件中移除，父组件再把自己的引用从页面中清除。
激活的话，是把之前缓存的vue实例对象dom直接挂载到页面中，不会调用什么beforeCreate、created、beforeMount、mounted、beforeUpdate、updated 这样的钩子。
隐藏的话，是把当前vue实例对象缓存到内存中去，不会调用beforeDestroy、destroyed这样的钩子。
# 解决父组件给子组件传递一个复杂的对象但是未收到的问题
在组件的watch中去使用深度监听，这样就能实时的获取数据了，还可以加一个$nextTick，这样可以插入一个微任务到vue的任务队列尾，可以确保不受任务执行顺序的影响。
{
props: ['superObj'],
data () {
return {
mySuperObj: {}
}
},
watch: {
superObj: {
deep: true,
handler: function (newVal, oldVala) {
this.$nextTick(() => {
this.mySuperObj = this.superObj
})
}
}
}
}
有的时候父组件还没有拿到子组件的数据，但是已经给子组件传递了数据，而子组件中会取这个数据，并且这个数据还是复杂类型的，那么在子组件中使用一个默认值，或者在父组件级别用一个if判断以下，当数据有的时候再渲染子组件，那么就不用watch那么麻烦了。