（一）说说vue的生命周期？⭐⭐⭐⭐⭐
总共分为 8 个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
-
创建前/后：（数据data和Method的差别）
- ①
beforeCreate：
创建之前，此时还没有data和Method，vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。 - ②
created：- 创建完成，此时data和Method可以使用了（请求数据data），可以访问里面的数据和方法
- 未挂载到DOM，el还没有， 在Created之后beforeMount之前如果没有el选项的话那么此时生命周期结束，停止编译，如果有则继续
- ①
-
载入前/后：（虚拟DOM节点的差别）
- ③
beforeMount：
在渲染之前，vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点； - ④
mounted：- vue实例挂载到真实DOM上，数据完成双向绑定，页面已经渲染完成，并且
vm实例中已经添加完$el了，已经替换掉那些DOM元素了（双括号中的变量），这个时候可以操作DOM了 ，可以使用$refs 属性对 Dom 进行操作。 - 但是是获取不了元素的高度等属性的，如果想要获取，需要使用
nextTick() - mounted不会保证所有的子组件也都一起被挂载。如果要等到整个视图都渲染完毕，等子组件完全挂载之后再执行操作。可以在mounted内部使用
vm.$nextTick
- vue实例挂载到真实DOM上，数据完成双向绑定，页面已经渲染完成，并且
- ③
-
更新前/后：（新旧DOM）
- ⑤
beforeUpdate：- 响应式数据更新时调用，发生在虚拟DOM打补丁之前，
- 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
- ⑥
updated：- data改变后，对应的组件重新渲染完成，
- 避免在这个钩子函数中操作数据，防止死循环
- ⑤
-
销毁前/后：(监听事件)
- ⑦
beforeDestroy：- 实例销毁前调用，实例还可以用，this能获取到实例，
- 常用于销毁定时器，解绑事件
- ⑧
destroyed：实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁
- ⑦
（二）简单描述每个周期具体适合哪些场景？
| 周期 | 场景 |
|---|---|
| beforeCreate | 可以在这加个loading事件，在加载实例时触发 |
| created | 初始化完成时的事件写在这里，如在这结束loading事件，异步请求(服务端渲染)也适宜在这里调用 |
| mounted | 挂载元素，获取到DOM节点 |
| updated | 如果对数据统一处理，在这里写上相应函数 |
| beforeDestroy | 可以做一个确认停止事件的确认框 |
| nextTick | 更新数据后立即操作dom; |
（三）vue中父子组件的生命周期⭐⭐⭐⭐⭐
父子组件的生命周期是一个嵌套的过程
组件的调用顺序都是先父后子，渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
- 生命周期（父子组件）：父组件更新前，子组件先销毁⭐
- 父组件beforeCreate --> 父组件created --> 父组件beforeMount -->
- 子组件beforeCreate --> 子组件created -->
- 子组件beforeMount --> 子组件 mounted -->
- 父组件mounted -->
- 父组件beforeUpdate ⭐ -->
- 子组件beforeDestroy--> 子组件destroyed ⭐ -->
- 组件updated ⭐
- 渲染的过程（子组件先mounted，父组件再mounted）
- 父beforeCreate->父created->父beforeMount->
- 子beforeCreate->子created->子beforeMount->子mounted->
- 父mounted
- 挂载阶段
- 父created->子created->子mounted->父mounted
- 子组件更新过程（子组件先 updated，父组件再 updated）
- 父beforeUpdate->
- 子beforeUpdate->子updated->
- 父updated
- 父组件更新过程
父beforeUpdate->父updated
- 销毁过程 （子组件先 destroyed，父组件再 destroyed）
- 父beforeDestroy->
- 子beforeDestroy->子destroyed->
- 父destroyed
