vue生命周期钩子函数以及触发时机


Posted in Vue.js onApril 26, 2022

vue生命周期钩子函数

vue生命周期即为一个组件从出生到死亡的一个完整周期

主要包括以下4个阶段:创建,挂载,更新,销毁

  • 创建前:beforeCreate, 创建后:created
  • 挂载前:beforeMount, 挂载后:mounted
  • 更新前:beforeUpdate, 更新后:updated
  • 销毁前:beforeDestroy, 销毁后:destroyed

我平时用的比较多的钩了是created和mounted,created用于获取后台数据,mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等,

另外还新增了使用内置组件 keep-alive 来缓存实例,而不是频繁创建和销毁(开销大)

  • actived 实例激活
  • deactived 实例失效

以下为详解版

大家理解就ok:

生命周期钩子函数(11个)Function(类型),标注蓝色的那个是属于类型的意思。

  • beforeCreate Function 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created Function 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer), 属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
  • beforeMount Function 在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted Function el 被新创建的 vm.el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
  • beforeUpdate Function 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。
  • updated Function 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
  • activated Function keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。
  • deactivated Function keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。
  • beforeDestroy Function 实例销毁之前调用。在这一步,实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
  • destroyed Function Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
  • errorCaptured(2.5.0+ 新增) (err: Error, vm: Component, info: string) => ?boolean 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

生命周期mounted和activated使用、踩坑 

activated

说到activated不得不提到keep-alive,你切换出去又切出来会调用到它。(你可以理解为生命周期钩子函数,用法也一样)

mounted

指的是实例被挂载后调用,如果没有keep-alive每次切回来该组件都会触发一次,但是keep-alive会缓存不活动的组件实例,那么可以说他只会触发一次。所以往往一些数据的请求要在这写一次请求,在activated里写一次请求,保证你浪荡回来还能请求到新的数据。

踩坑

1.这里有个关键词是实例,也就是说如果你用了$refs,你就得注意了。

2.mounted先执行,首次进入时候两个一起执行

vue生命周期钩子函数以及触发时机

附言

keep-alive的运用非常非常非常多。

vue生命周期钩子函数以及触发时机

Vue.js 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
如何vue使用el-table遍历循环表头和表体数据
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
You might like
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
用js判断输入是否为中文的函数
2014/03/10 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
详解Vue之事件处理
2020/07/10 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python图像处理入门(一)
2019/04/04 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python实现猜拳小游戏
2020/04/05 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
高中数学教学反思
2014/01/30 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
低碳生活倡议书
2014/04/14 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
求职自我评价范文100字
2014/09/23 职场文书
党员转正意见怎么写
2015/06/03 职场文书
纪检监察立案决定书
2015/06/24 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
我的收音机情缘
2022/04/05 无线电
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL