❝前言 :阿巴阿巴阿巴
❞
生命周期做了什么以及能做什么
❝初始化 (create)--- 组件挂载(渲染dom mount)-----组件更新 (update)--- 销毁(destroy)
❞
- beforeCreate（初始化界面前）
- 组件实例被创建之初，组件的属性生效之前组件实例中还没有提升任何的成员
- data、methods、computed以及watch上的数据和方法都不能被访问
- created（初始化界面后） (异步请求,ssr放这里)
- 组件初始化完成 props 、methods 、data 、computed等有值 还未编译模板 可以做一些初始数据的获取,可以通过vm.$nextTick来访问Dom
- 这里修改数据无法更新视图
- beforeMount（渲染dom前） (异步请求)
- 完成模板编译(虚拟DOM创建完成),还未挂载到页面中
- mounted（渲染dom后） (异步请求)
- 将编译好的模板挂载到页面 (虚拟DOM挂载)
- el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子,Dom替换 vue实例已经挂载到页面中
- 可以$refs属性对Dom进行操作。
- beforeUpdate（更新数据前）
- 组件数据更新之前调用，数据都是新的,页面上数据都是旧的 组件即将更新,准备渲染页面
- 可以在当前阶段进行更改数据，不会造成重渲染
- updated（更新数据后） -组件更新后 , render重新渲染 , 此时数据和界面都是新的 -避免在此期间更改数据，因为这可能会导致无限循环的更新。
- beforeDestroy（卸载组件前）
- 组件销毁前调用 , 卸载事件监听 、观察、子组件等
- destroyed(可以执行一些优化操作，例如清空定时器，清理缓存，解除事件绑定等)
- 组件销毁后调用
- 组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。
初次渲染就会触发的生命周期
- beforeCreate() , created()
- beforeMount() , mounted()
keep-alive专属生命周期
- activited(keep-alive 专属，组件被激活时调用)
- deactivated(keep-alive 专属，组件被销毁时调用)
父组件和子组件之间的生命周期执行顺序
- 加载渲染过程
- 子组件在父组件的beforeMount和Mounted之间渲染
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程
影响到子组件： 父beforeUpdate -> 子beforeUpdate->子updated -> 父updted
不影响子组件： 父beforeUpdate -> 父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
本文使用 mdnice 排版
