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

  • Z时代
  • 2024-01-10
  • 分类：综合

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 组件生命周期（有父子组件的情况） 的全部内容， 来源链接： utcz.com/z/377590.html

回到顶部