Vue 中 父子组件的生命周期钩子函数的执行顺序
参考原文：https://m.html.cn/qa/vue-js/22535.html
Vue 中 生命周期钩子函数分别做了什么？
beforeCreate执行时：data / el 未初始化，值为undefined
created执行时：可得到 data 的值，但 根 dom元素 el 还未初始化。
可对 data 进行操作，进行数据请求将返回的数据赋给 data。
beforeMount执行时：data / el 已初始化，但此时 el 并没有渲染进数据，el 的值为“虚拟”的元素节点
mounted执行时：el 已渲染完成并挂载到实例上
对挂载的 dom 进行操作，此时，dom已被渲染到页面上。
beforeUpdate 和 updated 触发时：el 中的数据已渲染完成，但只有 updated钩子被调用时，组件dom才被更新。
虽然updated函数会在数据变化时被触发，但却不能准确的判断是哪个属性值被改变，所以在实际情况中用 computed / watch 来监听属性的变化，并做一些其他的操作。
所有的生命周期钩子自动绑定 this 上下文到实例中，所以不能使用箭头函数来定义一个生命周期方法（例如：created: () => this.fetchTodos() ），会导致this指向父级
在使用vue-router 时，有时需要使用缓存组件状态，这时候created钩子就不会被重复调用，如果子组件需要在每次加载或切换状态的时候进行某些操作，可以使用 activated 钩子触发。
注意：activated，deactivated 是组件 keep-alive 时独有的钩子
父子组件的钩子并不会等待请求返回，请求是异步的，VUE 设计也不能因为请求没有响应而不执行后面的钩子。所以，我们必须通过 v-if 来控制子组件钩子的执行时机。
注意：
在父组件的 created 中发请求获取数据，通过props传递给子组件。子组件在 created 或者mounted中拿父组件传递过来的数据 ，这样处理是有问题的。
在父组件调用接口传递数据给子组件时，接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求，在子组件哪个钩子接收数据。都是取不到的。当子组件的mounted都执行完之后，此时可能父组件的请求才返回数据。会导致：从父组件传递给子组件的数据是 undefined
解决方法1 ：
在渲染子组件的时候加上一个条件，data1 是父组件调用接口返回的数据。当有数据的时候再去渲染子组件。这样就会形成天然的阻塞。在父组件的 created 中的请求返回数据后，才会执行子组件的 created，mounted。最后执行父组件的mounted。
<div class="test"> <children v-if="data1" :data="data1" /> </div>
解决方法2：
在子组件中 watch 监听，父组件获取到值，这个值就会变化，自然是可以监听到的。
从父组件点击调用接口并显示子组件，子组件拿到数据并监听在 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) }) } } }
Vue 的 父子组件的生命周期执行顺序
Vue 的父组件和子组件的生命周期钩子函数执行顺序可以归类为以下 4 部分：
1、加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子beforeMount -> 子 mounted -> 父 mounted
注意：mounted 不会保证所有的子组件也都被一起挂载。如果希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
2. 父组件更新过程
父 beforeUpdate -> 父 updated
3. 子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
4. 销毁过程
父 beforeDestroy -> 子 beforeDetroy -> 子 destroyed -> 父 destroyed
