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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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下实现折线图效果的代码
2007/04/28 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
js对象的复制继承实例
2015/01/10 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python数据库小程序源代码
2019/09/15 Python
python dumps和loads区别详解
2020/02/04 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
python如何写try语句
2020/07/14 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
餐饮采购员岗位职责
2014/03/15 职场文书
演讲稿的写法
2014/05/19 职场文书
真诚的求职信
2014/07/04 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
Python 视频画质增强
2022/04/28 Python