Vue生命周期详解

目录

1.beforeCreate

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

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实例已经从运行阶段进入了销毁阶段,此时所有的data、methods、过滤器以及指令等都还可以使用
  • 使用场景
    可用于一些定时器或订阅消息的取消

8.unmounted(destroyed)

  • 分析
    实例完成销毁(只是销毁实例,并不能清除DOM)
  • 使用场景
    用于清理与其他实例的连接、解绑全部指令及监听事件
相关推荐
小羊没烦恼!7 分钟前
关于大型asp.net应用系统的架构-架构的选择
java·服务器·开发语言·前端·c#
GISer_Jing13 分钟前
height、line-height、font-size相同字体遮挡问题
前端·ai
字节渡客18 分钟前
接口参数偶尔丢失、乱码、解析失败,不是前端传参问题
前端
夏幻灵19 分钟前
前端八股:JavaScript 深拷贝详解:实现方式、递归原理与循环引用
开发语言·前端·javascript
@#¥&~是乱码鱼啦25 分钟前
ArkWeb开发手记01|Web 组件 H5 加载与生命周期管理
前端
suaizai_26 分钟前
ComputerUse:让AI真正操控桌面系统
java·前端·javascript
CodeSheep33 分钟前
朋友面试谈薪报价2w,HR非得压到1.9,还反问他:你就差这1000块钱?后来背调时问了他前同事十几个问题,对方最后直接挂了
前端·后端·程序员
IMPYLH40 分钟前
HTML 的 <track> 元素
前端·html
涛涛ing41 分钟前
35个组件,把GPU特效直接跑在真实DOM上:Canvas UI正在重新定义Web视觉
前端
ym hyd 11141 分钟前
生鲜超市库存管理信息系统源码 Java+SpringBoot+Vue3 前后分离
java·开发语言·vue.js·spring boot·毕设