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
  • 使用场景
    用于清理与其他实例的连接、解绑全部指令及监听事件
相关推荐
树叶会结冰18 分钟前
HTML语义化:当网页会说话
前端·html
冰万森24 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr37 分钟前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学1 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空1 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞1 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛2 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端