梳理一下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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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将gd生成的图片缓存到memcache的小例子
2013/06/05 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
python3抓取中文网页的方法
2015/07/28 Python
Python3.6实现连接mysql或mariadb的方法分析
2018/05/18 Python
详解爬虫被封的问题
2019/04/23 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
安全协议书范本
2014/04/21 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
负责人任命书范本
2014/06/04 职场文书
企业理念标语
2014/06/09 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis