描述 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