Vue生命周期详解

目录

1.beforeCreate

  • 分析
    beforeCreate执行时Vue实例还没有被创建datamethods也没有初始化,还没进行数据观测,所以此时不能访问datamethods
  • 使用场景
    通常用于插件开发中执行初始化任务。

2.created

  • 分析
    Created执行时Vue实例已经被创建,数据观测完成,此时可以调用methods中的函数,也可以访问和修改data中的数据。
  • 使用场景
    各种数据可以使用,常用于异步数据的获取。

3.beforeMount

  • 分析
    beforeMount执行时,虚拟DOM已经生成,模板也已经渲染完成,但还没有挂载到页面上,此时的页面还是旧的页面。
  • 使用场景
    此时可以做一些模板相关的操作或者数据预处理相关的操作。

4.mounted

  • 分析
    mounted执行时已完成DOM的渲染和挂载,页面已经更新
  • 使用场景
    可以访问数据并操作DOM元素

5.beforeUpdate

  • 分析
    beforeUpdate执行时更新的虚拟DOM已经生成,更新的数据已经渲染到了模板中,但还没有挂载到页面上,此时的页面还是旧的页面。
  • 使用场景
    可以获取更新前的各种状态

6.updated

  • 分析
    updated执行时更新的DOM已经渲染并挂载完成,页面已经更新
  • 使用场景
    所有状态都是最新的,可以执行操作,触发组件动画等操作

7.beforeUnmount(beforeDestroy)

  • 分析
    beforeUnmount钩子函数执行时,vue实例已经从运行阶段进入了销毁阶段,此时所有的datamethods、过滤器以及指令等都还可以使用
  • 使用场景
    可用于一些定时器或订阅消息的取消

8.unmounted(destroyed)

  • 分析
    实例完成销毁(只是销毁实例,并不能清除DOM
  • 使用场景
    用于清理与其他实例的连接、解绑全部指令及监听事件
相关推荐
咖啡の猫40 分钟前
Shell脚本-for循环应用案例
前端·chrome
百万蹄蹄向前冲3 小时前
Trae分析Phaser.js游戏《洋葱头捡星星》
前端·游戏开发·trae
朝阳5814 小时前
在浏览器端使用 xml2js 遇到的报错及解决方法
前端
GIS之路4 小时前
GeoTools 读取影像元数据
前端
ssshooter4 小时前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry5 小时前
Jetpack Compose 中的状态
前端
dae bal6 小时前
关于RSA和AES加密
前端·vue.js
柳杉6 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog6 小时前
低端设备加载webp ANR
前端·算法
LKAI.6 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi