当前位置: 首页 > article >正文

简述vue生命周期,以及每个周期做的事情?

思路:定义-> 各个阶段->阐述整体流程->结合实际

定义:

   在vue组件实例被创建后,会经历一系列初始化过程,例:数据观测,模板编译,挂载实例到dom上,以及数据变化时,更新dom数据。在这个过程中会运行名叫生命周期钩子的函数。以便于用户在特定阶段添加自己的代码

各个阶段

生命周期钩子每个阶段的事情

beforeCreate(创建前)

vue实例里挂载的元素el和数据对象data都是undefined,还未初始化

可以在这加个loading事件,在加载实例时触发

created(创建后)

vue实例的数据对象data可访问,还未挂载到DOM上,el还没有

可以访问各种数据,获取接口数据等

初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

beforeMount(挂载前)

组件挂载之前,vue实例的el和data都已初始化完成,还未挂载到真实dom节点上

mounted(挂载后)

组件挂载到实例之后

dom已被创建,可以用于访问数据和dom元素

挂载元素,获取到DOM节点

beforeUpdate(更新前)

组件数据发生变化更新之前

“view”层还未更新,可以获取更新前的状态

updated(更新后)

组件更新完成之后

“view”层已更新,所有的状态都是最新的

beforeDestroy(销毁前)

组件实例销毁之前,this还能获取到实例

用于定时器,订阅的取消

destroyed(销毁后)组件实例销毁之后

问题一:第一次页面加载会触发哪几个钩子  ?

beforeCreate  created  beforeMount mounted

问题二:父子组件的生命周期触发顺序?

加载渲染过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程:
父beforeUpdate->父updated
销毁过程:
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

问题三:keep-alive多了那两个生命周期?

activited unactivited

问题四:加入keep-alive,第一次进入页面会执行哪些生命周期?第二次进入呢?

第一次进入:beforeCreate  created  beforeMount mounted activited

第二次进入:activited


http://www.kler.cn/a/5828.html

相关文章:

  • 如何在 Ubuntu 22.04 上安装 Caddy Web 服务器教程
  • CES 2025|美格智能高算力AI模组助力“通天晓”人形机器人震撼发布
  • C#中的常用集合
  • Elixir语言的学习路线
  • Windows11环境下设置MySQL8字符集utf8mb4_unicode_ci
  • halcon三维点云数据处理(七)find_shape_model_3d_recompute_score
  • 简单谈谈图形界面和命令行的区别
  • 大一被忽悠进了培训班
  • Java题目训练——统计每个月兔子的总数和字符串通配符
  • 2022年河南省高等职业教育技能大赛软件测试赛项竞赛任务书
  • 使用RegQueryValueEx作为可能为REG_DWORD或REG_SZ的注册表值
  • 蓝桥杯·3月份刷题集训Day03
  • GPT4国内镜像站
  • 第四十八天打卡
  • Date Time组件(下)
  • 【JavaEE】线程池
  • flutter安装自用笔记
  • 第一批00后,已经变成“职场老油条”了
  • TCP流套接字编程
  • Spark sql怎么使用Kafka Avro序列化器
  • 阿里云高级技术专家林立翔:基于阿里云弹性GPU服务的神龙AI加速引擎,无缝提升AI训练性能
  • 每日学术速递4.3
  • React Native开发环境搭建-Windows平台
  • IT知识百科:什么是访问控制列表ACL?
  • @Lookup与@Bean@Scope获取原型实例,谁更胜一筹
  • gcc在Linux下如何运行一个C/C++程序