梳理一下vue中的生命周期


Posted in Vue.js onDecember 30, 2020

什么是生命周期?

生命周期,以个人之浅见,即一个事物从诞生到消亡的一个过程!

以人的一生来做类比,其实就可以简单粗暴的将生命周期看作人的一生,人这一出生就开始了一段美好(艰难)的旅程,一生中每个成长的阶段都会对应的去做每个阶段该做的事,比如,上幼儿园,小学,中学,高中,大学,工作(比如我就在辛苦的码字),结婚等等直到百年以后,尘归尘,土归土,这就是人的生命周期!

vue也有这样的一个生命周期,也会在执行到每个阶段做一些事情,不同的是vue在每个对应的阶段是通过生命周期函数去做的,此刻再去看一下vue官网对生命周期的描述就好理解多了!

vue官网的描述:

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

简单来说就是: 在 Vue 从创建实例到最终完全消亡的过程中,会执行一系列的方法,用于对应当前 Vue 的状态,这些方法我们叫它:生命周期钩子!

来看我给大家找的一张图,可以保存起来,等待后学学习使用的深入,再看这张图:

梳理一下vue中的生命周期

根据上图可知,vue的生命周期一共有8个钩子函数,这8个函数描绘了一个vue的一生,下来我们详细来看看这8个生命周期函数,以便更好的理解Vue的生命周期!

vue的8个生命周期函数

配合上图观看

1.beforeCreate:在实例初始化之后,数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用。

2.created:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer)、属性和方法的运算,watch/event 事件回调;然而,挂载阶段还没开始,$el 属性目前不可见。

3.beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。

4.mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内(PS:注意 mounted 不会承诺所有的子组件也都一起被挂载。

如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted:, vm.$nextTick会在后面的篇幅详细讲解,这里大家需要知道有这个东西。

5.beforeUpdate:数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
6.updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以现在可以执行依赖于 DOM 的操作,然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之(PS:计算属性与 watcher 会在后面的篇幅中进行介绍)。
7.beforeDestroy:实例销毁之前调用,在这一步,实例仍然完全可用。
8.destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

代码验证:

下面的例子我故意将生命周期钩子函数的顺序打乱,并编号,但它还是会自动按照执行顺序输出,就可以验证其上图中的流程,你也手动试试吧!

<div id="app">
 <button @click="clickCounter()">点击</button>
 <p>{{ count }}</p>
</div>
 
 <script type="text/javascript">
  var app = new Vue({
  el: '#app',
  data:{
   count: 1
  },
  methods:{
   clickCounter(){
   this.count += 1
   }
  },
  created: function(){
   console.log('2. 实例已经创建')
  },
  beforeCreate: function(){
   console.log('1. 实例初始化')
  },
  mounted:function(){
   console.log('4. 挂载到实例')
  },
  beforeMount:function(){
   console.log('3. 挂载开始之前')
  },
  beforeUpdate: () => {
   console.log('数据更新时调用')
  },
  updated:function(){
   console.log('更新数据重新渲染DOM')
  },
  beforeDestroy:function(){
   console.log('实例销毁之前调用')
  },
  destroyed:function(){
   console.log('实例销毁之后调用')
  }
  })
  
  /*点击页面销毁vue对象, 销毁之后实例将会释放*/
  // 销毁之后,再次点击就不起作用了
  document.onclick=function(){
   app.$destroy();
  };
 </script>

注意: 最后我手动将这个实例销毁了,点击之后执行一次,后边再点击就不起作用了,测试的时候先把销毁代码端注释掉,然后再放开,进行测试!

3个关于vue组件的生命周期钩子

  1. activated:keep-alive 组件激活时调用(PS:与组件相关,关于 keep-alive 会在讲解组件时介绍)。
  2. deactivated:keep-alive 组件停用时调用(PS:与组件相关,关于 keep-alive 会在讲解组件时介绍)。
  3. errorCaptured :当捕获一个来自子孙组件的错误时被调用,此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串,此钩子可以返回 false 以阻止该错误继续向上传播。

写在最后

生命周期这块知识点,在这一块我们只需要有所了解,对其大概使用有个基本的掌握,等待学习的深入以及理解的深入,在回过头来看着一块的内容,结合Vue的源码去看会收获良多!

以上就是梳理一下vue中的生命周期的详细内容,更多关于vue 生命周期的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue实现简易购物车页面
Dec 30 #Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 #Vue.js
vue+element UI实现树形表格
Dec 29 #Vue.js
vue实现树状表格效果
Dec 29 #Vue.js
vue实现图书管理系统
Dec 29 #Vue.js
Vue实现随机验证码功能
Dec 29 #Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 #Vue.js
You might like
PHP常用正则表达式集锦
2014/08/17 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
JavaScript高级程序设计
2006/12/29 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
移动web开发之touch事件实例详解
2018/01/17 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
借款担保书范文
2014/05/13 职场文书
企业承诺书怎么写
2014/05/24 职场文书
森林防火宣传标语
2014/06/27 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Vue2.0搭建脚手架
2022/03/13 Vue.js
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers