所有生命周期钩子的this上下文都是绑定至实例的。

  • beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。
  • created:实例创建完成,主要包括数据帧听、计算属性、方法、事件/侦听器,(注意:由于挂在阶段还未开始,因此$el还不可用)。
  • beforeMount:挂在之前调用,render函数首次调用。
  • mounted:实例挂在完成后调用,(注意,mounted不会保证所有子组件都已挂载完成,可以使用$nextTick())。
  • beforeUpdate:数据发生改变之后,DOM被更新之前调用。
  • updated:在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用(注意,updated不会保证所有子组件都已挂载完成,可以使用$nextTick())。
  • activated:被keep-alive缓存的组件激活时 调用。
  • deactivated:被keep-alive缓存的组件失活时调用。
  • beforeUnmount:在组件实例卸载之前调用。
  • unmounted:组件实例卸载之后调用(注意,实例所有指令都被解绑,所有侦听器都被移除,所有子组件实例都被卸载)。
  • errorCaptured:在捕获一个来自后代组件的错误时被调用(可以返回false可以阻止该错误继续向上传播。)。
  • renderTracked:跟踪虚拟DOM重新渲染时调用,可用来查看哪个操作跟踪了组件及该操作的目标对象和键。
  • renderTriggered:当虚拟DOM重新渲染被触发时调用,用来监听什么操作触发了重新渲染以及该操作的目标对象和键。

其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子,比如:created、mounted、beforeUnmount(Vue 2.x版本中是beforeDestroy)等,其他的主要就是稍微了解一下,用的时候再看(手动哭笑)。

补充点:setup作为组合式API入口点,其调用时间是在创建组件实例时,在初始 prop 解析之后立即调用。在生命周期方面,它是在beforeCreate钩子之前调用的。

选项式API的生命周期选项与组合式API之间的映射

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted ;
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • activated -> onActivated
  • deactivated -> onDeactivated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered

Vue3.0 生命周期的更多相关文章

  1. 02Vue2.0+生命周期

    Vue生命周期是Vue对象从无到有再到无的一个过程,我们又是不仅要明白一个对象的使用, 同时也要知道一个对象怎么创建了,就比如Spring的生命周期,往往不只是面试官的考点, 同时在项目中也也可能常常 ...

  2. vue2.0 生命周期 简析

    Vue2.0 生命周期钩子函数: <template> <div id='app'> {{message}} </div> </template> va ...

  3. Vue 2.0 生命周期-钩子函数理解

    Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...

  4. thinkphp5.0生命周期

    本篇内容我们对ThinkPHP5.0的应用请求的生命周期做大致的介绍,以便于开发者了解整个执行流程. 1.入口文件 用户发起的请求都会经过应用的入口文件,通常是 public/index.php文件. ...

  5. Vue2.0生命周期和钩子函数的一些理解

    转自:https://segmentfault.com/a/1190000008010666 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mount ...

  6. Vue2.0 —生命周期和钩子函数

    vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...

  7. thinkphp5.0 生命周期

    1.入口文件 // 应用入口文件 index.php // 定义项目路径 define('APP_PATH', __DIR__ . '/../application/'); // 加载框架引导文件 r ...

  8. 详解Vue2.0生命周期

    网上已经有很多关于vue生命周期的文章,我的这篇文章的由来,其实是我对官网上描述的一句话的思考与理解:“el被新创建的vm.$el替换”,所以文章更多的内容可能是在对vue生命周期中“created ...

  9. vue1.0生命周期

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. ng4.0 生命周期

    名称 时机 接口 范围 ngOnChanges 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前. OnChanges 指令和组件 ngOnInit 在第一轮 ngOn ...

随机推荐

  1. 对vue中的data进行数据初始化

    this.$data:是表示当前的改变后的this中的数据 this.$options.data():是表示没有赋值前的this中的数据,表示 初始化的data 一般可以使用Object.assign ...

  2. 条件期望:Conditional Expectation 举例详解之入门之入门之草履虫都说听懂了

    我知道有很多人理解不了 "条件期望" (Conditional Expectation) 这个东西,有的时候没看清把随机变量看成事件,把 \(\sigma\)-algebra 看成 ...

  3. 洛谷P2341 [USACO03FALL / HAOI2006] 受欢迎的牛 G (tarjan缩点)

    在本题中很明显,给你一个有向图,要用tarjan缩点. 缩点后,一头牛要受到所有牛的欢迎,那么该点的出度要为0,这是容易证明的:如果该点还有出度,比如a连向b,那么a不受到b的欢迎.所以我们要找出度为 ...

  4. .NET 6 跨服务器联表查询

    一.大家是否有这个需求 1.跨品种查询 :比如 MYSQL和一个SQLSERVER进行联表查询 ,或者SQLITE和MYSQL进行联表查询 2.跨服务器查询 : A服务器和B服务器查询 如果想同时支持 ...

  5. 【linux】 第1回 linux运维基础

    目录 1. 运维的本质 2. 电脑与服务器 2.1 电脑的种类 2.2 服务器种类 2.3 服务器品牌 2.4 服务器尺寸 2.5 服务器内部组成 3. 磁盘阵列 4. 系统简介 5. 虚拟化 6. ...

  6. Request保存作用域

    Request保存作用域,作用范围是在当前请求中有效. 1.客户端重定向 2.服务器内部转发

  7. Vue学习之--------深入理解Vuex之模块化编码(2022/9/4)

    在以下文章的基础上 1.深入理解Vuex.原理详解.实战应用:https://blog.csdn.net/weixin_43304253/article/details/126651368 2.深入理 ...

  8. pip cmd下载速度慢解决方案

    cmd下载速度慢不是电脑问题,而是下载的网站有网速限制,如pip,虽然没被墙,但由于是外网,网速极差,经常是几KB一秒,所以我们可以采用镜像服务器,即在命令后加上 -i https://pypi.tu ...

  9. 查看、校验、归档…带你掌握openGauss账本数据库

    ​摘要:账本数据库融合了区块链思想,将用户操作记录至两种历史表中:用户历史表和全局区块表. 本文分享自华为云社区<openGauss账本数据库,你不知道的那些事儿>,作者:Gauss松鼠会 ...

  10. ThinkPHP 6.0 RC2 版本发布——架构升级、精简核心

    自从5.2版本变更为6.0以来,官方一直致力于优化架构和精简核心,同时也在准备手册和测试工作,在经过近1个月的开发迭代后,官方宣布发布ThinkPHP6.0RC2版本. 主要更新 相比较RC1版本更新 ...