描述 Vue 组件生命周期（有父子组件的情况）

单组件生命周期

• 挂载阶段（
  • beforeCreate:此阶段为实例初始化之后,此时数据观察和事件机制还没有形成,不能获取到dom节点；
  • created：此阶段的vue实例已经创建,仍不能获取DOM 节点.把vue 的一个实例给初始化了，只是存在于 js 内存的一个变量而已，这个时候并没有开始渲染；
  • beforeMount:在这一阶段,我们虽然还不能获取到具体 DOM 元素,但 vue 挂载的根节点已经创建,下面 vue 对DOM 的操作将围绕这个根元素继续进行,beforeMount 这个阶段是过渡性的,一般一个项目只能用到一两次；
  • mounted：组件真正绘制完成了，页面已经渲染完了,数据和DOM 都已被渲染出来,一般我们的异步请求都写在这里)
• 更新阶段（
  • beforeUpdate: 这一阶段，vue遵循数据驱动DOM 的原则，beforeUpdate 函数在数据更新后没有立即更新数据，但是DOM 数据会改变，这是双向数据绑定的作用；
  • updated：这一阶段，DOM 会和更改过的内容同步)
• 销毁阶段（
  • beforeDestroy：在上一阶段vue已经成功通过数据驱动DOM 的修改，当我们不再需要 vue 操纵 DOM 时，就要销毁 vue，也就是清除vue 实例与 DOM 的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发 beforeDestroy 钩子函数；
  • destroyed：在销毁后，会触发destroyed 钩子函数）

beforeDestroy要做的事：

• 自定义事件解除绑定：（eventBus 等）
• 销毁定时任务：（setTimeout,setInterval等）
• 绑定的window 或 document 事件要销毁

总之就是该销毁的要在这里销毁，不要让他们留在内存中

多组件生命周期：

• 挂载阶段（加载渲染过程）：
• 父 beforeCreate --> 父 created --> 父 beforeMount --> 子 beforeCreate --> 子 created --> 子 beforeMount --> 子 mounted --> 父 mounted
• 更新阶段：
• 父 beforeUpdate --> 子 beforeUpdate --> 子 updated --> 父 updated
• 销毁阶段：
• 父 beforeDestroy --> 子 beforeDestroy --> 子 destroyed --> 父 destroyed

标签：生命周期,销毁,vue,--,DOM,beforeDestroy,Vue,阶段,组件
来源： https://www.cnblogs.com/supershare/p/14768680.html