梳理一下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-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
ant design vue的form表单取值方法
Jun 01 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP求小于1000的所有水仙花数的代码
2012/01/10 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
python内存管理分析
2015/04/08 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
详解python3百度指数抓取实例
2016/12/12 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
九年级体育教学反思
2014/01/23 职场文书
会议邀请书范文
2014/02/02 职场文书
药店主任岗位责任制
2014/02/10 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
入党自荐书范文
2014/03/09 职场文书
学前教育专业求职信
2014/09/02 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
vue实现拖拽交换位置
2022/04/07 Vue.js
如何优化vue打包文件过大
2022/04/13 Vue.js