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+iview实现分页及查询功能
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
ant design vue的form表单取值方法
Jun 01 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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
AngularJS实现Model缓存的方式
2016/02/03 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
webpack打包js的方法
2018/03/12 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Python 自动补全(vim)
2014/11/30 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
详解小白之KMP算法及python实现
2019/04/04 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
python离线安装外部依赖包的实现
2020/02/13 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python 穷举指定长度的密码例子
2020/04/02 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
行政人员工作职责
2013/12/05 职场文书
党员批评与自我批评
2014/02/12 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
企业文化理念标语
2014/06/10 职场文书
放飞理想演讲稿
2014/09/09 职场文书
公司授权委托书
2014/10/17 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python