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

Vue生命周期都有哪些?

定义

Vue的生命周期就是实例从创建销毁的一个过程,即从创建、初始化数据、编译模板、挂载Dom($el)->渲染、更新->渲染,卸载等一系列的过程。el是挂载点如<div id="app"></div>。

Vue的生命周期分为八个阶段

1.beforeCreate(实例创建前)

Vue实例开始初始化事件和生命周期函数,data为空,el为空。(可加loading效果)。

2.created(实例创建后)

Vue实例已创建好,事件配置完毕。data有值,el为空。(结束loading效果,可发请求获取数据)。

3.beforeMount(挂载前)

首次调用render函数,编译模板把data数据和模版生成html,但html未挂载。data有值,el有值。

4.mounted(挂载后)

把编译好的html(vm.$el)替换el属性指向的dom对象,渲染完成。

5.beforeUpdate(更新前)

当数据发生改变和视图更新之前,新数据和旧视图未同步。

6.updated(更新后)

虚拟dom重新渲染结束,视图更新完成。可操作更新后的dom。

7.beforeDestroy(销毁前)

将要销毁组件,此时Vue实例仍然可用。

8.destroyed(销毁后)

Vue实例所有的指令都解除绑定,然后销毁组件和移除事件监听器。

完整的父子生命周期

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

http://www.lryc.cn/news/342863.html

相关文章:

  • 景源畅信:个人抖音小店怎么开通?
  • python学习笔记B-16:序列结构之字典--字典的遍历与访问
  • 《QT实用小工具·四十八》趣味开关
  • QML进阶(十四) Model-View-Delegate视图框架
  • word:三线表的绘制【攻略】
  • 嵌入式物联网系统软硬件基础知识大全(2)
  • Origin拟合EIS(电化学阻抗谱),怎么出来圆圈
  • Android APP转成launcher
  • 【副本向】Lua副本逻辑
  • ROS机器人实用技术与常见问题解决
  • Linux学习之IP协议
  • Python Dash库:一个Web应用只需几行代码
  • 用Docker 创建并运行一个MySQL容器
  • 在Java中如何有效地处理内存泄露
  • 值得收藏!修复Windows 10/11中找不到输出或输入设备的五种方法
  • Slurm运行pytorch深度学习模型(小白版)
  • SQL如何利用Bitmap思想优化array_contains()函数
  • 面试官:打开了一个新窗口,怎么知道这个窗口已经被打开过?
  • 机器学习项目实践-基础知识部分
  • CNN卷积神经网络,TensorFlow面试题
  • Android 官网Ota介绍
  • Redis(持久化)
  • 基于Flask的岗位就业可视化系统(一)
  • 嵌入式学习68-C++(运算符重载和虚函数)
  • UVA1048/LA3561 Low Cost Air Travel
  • 学习和分析各种数据结构所要掌握的一个重要知识——CPU的缓存利用率(命中率)
  • IOS自动化—将WDA打包ipa批量安装驱动
  • SAP PP学习笔记12 - 评估MRP的运行结果
  • AndroidStudio的Iguana版的使用
  • 通过方法引用获取属性名的底层逻辑是什么?