vue生命周期及其作用

vue生命周期及其作用

1. 生命周期总览

2. beforeCreate

  • 我们在new Vue()时,初始化一个Vue空的实例对象,此时对象身上只有默认的声明周期函数和事件,此时data,methods都未被初始化

3. created

  • 此时,已经完成数据观测,属性和方法的运算,watch、event事件回调的配置
  • 可以调用methods中的的方法,访问和修改data数据出发响应式渲染dom,可以通过compute和watch完成数据计算
  • 此时,vm.$el并没有被创建

4. created->beforeMounted

  • 判断是否存在el选项,如果不存在,则停止编译,直到调用vm.$mount(el)才会继续编译
  • vm.el获取到的事挂载DOM的

5. beforeMount

  • 此时可以获取到vm.el
  • vm.el已完成DOM初始化,但未挂载到el选项上

6. beforeMount->Mounted

  • 此阶段vm.el完成挂载,vm.¥el生成的DOM替换了el选项所对应的DOM

7. Mounted

  • vm.el已完成DOM的挂载和渲染,

8. beforeUpdate

  • 更新的数据必须是被渲染在模板上的
  • 此时view层还没有更新

9. updated

  • 完成view层的更新

10. beforeDestroy

  • 实例被销毁前调用,此时实例属性与方法仍可访问

11. destroyed

  • 完全销毁一个实例,仅销毁实例,并不能清楚DOM

12. 总结

生命周期 描述
beforeCreate 执行时组件实例还未被创建,可用于插件开发中执行一些初始化任务
created 组件初始化完毕,各种数据可以使用,常用于异步数据获取
beforeMount 未执行渲染、更新,dom未创建
mounted 初始化结束,DOM已经创建,可用于获取访问数据和DOM元素
beforeUpdate 更新前,可用于获取更新前各种状态
updated 更新后,所有状态意识最新
beforeDestroy 销毁前,可用于一些定时器清楚或者订阅的取消
destroyed 组件已销毁

13. created和mounted数据请求的区别

  • created是在实例创建完成之后立刻调用,这时候dom节点未生成,如果进行数据请求,后续在mounted时就一次性渲染结束
  • mounted是在dom挂载完立刻执行,这时候如果再进行数据请求,可能会发生回流和重绘,页面会闪动
  • 所以,数据请求一般放在created中
相关推荐
河畔一角4 分钟前
一些感悟
前端
excel10 分钟前
理解 JavaScript 中的 for...in 与 for...of 的区别
前端
前端小巷子40 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑43 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了43 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆1 小时前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆1 小时前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook3 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug