深入理解Vue父子组件生命周期执行顺序及钩子函数


Posted in Javascript onAugust 12, 2018

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

1、vue的生命周期图

深入理解Vue父子组件生命周期执行顺序及钩子函数

在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。

生命周期钩子

生命周期钩子     详细
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
activated keep-alive 组件激活时调用。
deactivated keep-alive 组件停用时调用。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也

实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

2、实际操作

下面我们在实际的代码执行过程中理解父子组件生命周期创建过程以及钩子函数执行的实时状态变化。

测试基于下面的代码,引入vue.js文件后即可执行。(打开页面后,再按一次刷新会自动进入debugger状态)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    
  </style>
</head>  
<body>
<div id="app">
  <p>{{message}}</p>
  <keep-alive>
    <my-components :msg="msg1" v-if="show"></my-components>
  </keep-alive>
</div>
</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  var child = {
    template: '<div>from child: {{childMsg}}</div>',
    props: ['msg'],
    data: function() {
      return {
        childMsg: 'child'
      }  
    },
    beforeCreate: function () {
      debugger;
    },
    created: function () {
      debugger;
    },
    beforeMount: function () {
      debugger;
    },
    mounted: function () {
      debugger;
    },
    deactivated: function(){
      alert("keepAlive停用");
    },
    activated: function () {
      console.log('component activated');
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
  };
  var vm = new Vue({
    el: '#app',
    data: {
        message: 'father',
        msg1: "hello",
        show: true
      },
    beforeCreate: function () {
      debugger;
    },
    created: function () {
      debugger;
    },
    beforeMount: function () {
      debugger;
    },
    mounted: function () {
      debugger;  
    },
    beforeUpdate: function () {
      alert("页面视图更新前");
      
    },
    updated: function () {
      alert("页面视图更新后");
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      var state = {
        'el': this.$el,
        'data': this.$data,
        'message': this.message
      }
      console.log(this.$el);
      console.log(state);
    },
    components: {
      'my-components': child
    }
  });
</script>
</html>

3.1、生命周期调试

首先我们创建了一个Vue实例vm,将其挂载到页面中id为“app”的元素上。

3.1.1、根组件的beforeCreate阶段

深入理解Vue父子组件生命周期执行顺序及钩子函数

可以看出,在调用beforeCreate()函数时,只进行了一些必要的初始化操作(例如一些全局的配置和根实例的一些属性初始化),此时data属性为undefined,没有可供操作的数据。

3.1.2、根组件的Created阶段

深入理解Vue父子组件生命周期执行顺序及钩子函数

调用Created()函数,在这一步,实例已完成以下的配置:数据代理和动态数据绑定(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

3.1.3、根组件的beforeMount阶段

深入理解Vue父子组件生命周期执行顺序及钩子函数

深入理解Vue父子组件生命周期执行顺序及钩子函数

在调用boforeMount()函数前首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)

在这个例子中,我们有el元素,因此会调用boforeMount()函数,此时已经开始执行模板解析函数,但还没有将$el元素挂载页面,页面视图因此也未更新。在标红处,还是 {{message}},这里就是应用的Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

3.1.4、子组件的beforeCreate、Created、beforeMount、Mounted阶段

在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段,这些阶段和父组件类似,按下不表。beforeMount阶段后,执行的是Mounted阶段,该阶段时子组件已经挂载到父组件上,并且父组件随之挂载到页面中。

由下图可以知道,在beforeMount阶段之后、Mounted阶段之前,数据已经被加载到视图上了,即$el元素被挂载到页面时触发了视图的更新。

深入理解Vue父子组件生命周期执行顺序及钩子函数

3.1.5、子组件的activated阶段

我们发现在子父组件全部挂载到页面之后被触发。这是因为子组件my-components被<keep-alive> 包裹,随$el的挂载被触发。如果子组件没有被<keep-alive>包裹,那么该阶段将不会被触发。

深入理解Vue父子组件生命周期执行顺序及钩子函数

3.1.6、父组件的mounted阶段

mounted执行时:此时el已经渲染完成并挂载到实例上。

至此,从Vue实例的初始化到将新的模板挂载到页面上的阶段已经完成,退出debugger。下面我们来看一下deactivated、beforeUpdate、updated、beforeDestroy、destroyed钩子函数。

3.2、deactivated、beforeUpdate、updated阶段

由生命周期函数可知:当数据变化后、虚拟DOM渲染重新渲染页面前会触发beforeUpdate()函数,此时视图还未改变。当虚拟DOM渲染页面视图更新后会触发updated()函数。

深入理解Vue父子组件生命周期执行顺序及钩子函数

我们不妨改变vm.show = false,当修改这个属性时,不仅会触发beforeUpdate、updated函数,还会触发deactivated函数(因为keep-alive 组件停用时调用)。我们不妨想一下deactivated函数会在beforeUpdate后还是updated后调用。

我们在控制台输入vm.show = false。得到三者的调用顺序分别为beforeUpdate、deactivated、updated。我们可以知道的是deactivated函数的触发时间是在视图更新时触发。因为当视图更新时才能知道keep-alive组件被停用了。

深入理解Vue父子组件生命周期执行顺序及钩子函数

深入理解Vue父子组件生命周期执行顺序及钩子函数

深入理解Vue父子组件生命周期执行顺序及钩子函数

3.3、beforeDestroy和destroyed钩子函数间的生命周期

现在我们对Vue实例进行销毁,调用app.$destroy()方法即可将其销毁,控制台测试如下:

深入理解Vue父子组件生命周期执行顺序及钩子函数

我们发现实例依然存在,但是此时变化已经发生在了其他地方。

beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁(也就是说子组件也会触发相应的函数)。这里的销毁并不指代'抹去',而是表示'解绑'。

销毁时beforeDestory函数的传递顺序为由父到子,destory的传递顺序为由子到父。

4、一些应用钩子函数的想法在created钩子中可以对data数据进行操作,这个时候可以进行ajax请求将返回的数据赋给data。

虽然updated函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用computed或match函数来监听属性的变化,并做一些其他的操作。在mounted钩子对挂载的dom进行操作,此时,DOM已经被渲染到页面上。在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载或切换状态的时候进行某些操作,可以使用activated钩子触发。所有的生命周期钩子自动绑定this上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos())。这是导致this指向父级。

5、 小结

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

总结

以上所述是小编给大家介绍的Vue父子组件生命周期执行顺序及钩子函数,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 #Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 #Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 #Javascript
axios向后台传递数组作为参数的方法
Aug 11 #Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 #Javascript
axios的拦截请求与响应方法
Aug 11 #Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 #Javascript
You might like
写一个用户在线显示的程序
2006/10/09 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
javascript call方法使用说明
2010/01/11 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python读取并写入mat文件的方法
2019/07/12 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
生物技术研究生自荐信
2013/11/12 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
年会搞笑主持词
2014/03/27 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL