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中
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python