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
  • 使用场景
    用于清理与其他实例的连接、解绑全部指令及监听事件
相关推荐
云水一下1 分钟前
CSS3从零基础到精通(一):前世今生与基础入门
前端·css3
顾凌陵4 分钟前
CSRF&SSRF漏洞攻击的溯源分析与实战
前端·csrf
月月大王的3D日记6 分钟前
Three.js 材质篇(中):从兰伯特到PBR,一篇文章看懂五种光照材质
前端·javascript
且白7 分钟前
leaflet切片变色、地图滤镜逻辑实现 colorfilter
前端·javascript
用户8876654266312 分钟前
Linux 终端入门:新手必须掌握的常用命令和基本思路
前端·操作系统
用户1257585243623 分钟前
Vue3 后台框架的网络请求怎么设计?看 XYGo Admin 三套 Axios 实例与拦截器方案
前端
ZengLiangYi26 分钟前
多格式文件解析:JSONL / SQLite / Event Stream
前端·javascript·后端
边界条件╝34 分钟前
微前端进阶(一)
前端
ZC跨境爬虫34 分钟前
跟着 MDN 学CSS day_34:(CSS 布局全面解析)
前端·css·ui·html·tensorflow
万少34 分钟前
湖南卫视的秘密武器曝光!芒果灵创,专业AI影视创作平台
前端·javascript·后端