描述 Vue 组件生命周期

最新推荐文章于 2024-08-15 16:11:23 发布

( =_= )

最新推荐文章于 2024-08-15 16:11:23 发布

阅读量94

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73301433/article/details/127792653

版权

本文详细介绍了Vue.js组件的生命周期，包括挂载、更新和销毁三个阶段的关键钩子函数，如beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。在每个阶段，阐述了其特点和常见用途，例如数据绑定、DOM操作和资源清理。同时，还讲解了多组件间的生命周期顺序。

摘要由CSDN通过智能技术生成

单组件生命周期，生命周期可分为

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