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 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue使用element-ui按需引入
May 20 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中的UNICODE 编码与解码
2013/06/29 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
javascript window对象属性整理
2009/10/24 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
vuejs简单验证码功能完整示例
2019/01/08 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
对python中Json与object转化的方法详解
2018/12/31 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Python实现播放和录制声音的功能
2020/08/12 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
实习生体会的自我评价范文
2013/11/28 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
倡议书作文
2015/01/19 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
旅游投诉信范文
2015/07/02 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
golang 实现并发求和
2021/05/08 Golang