Vue核心技术-14,Vue的生命周期

一,前言

终于要开始介绍Vue的生命周期了,虽然很多书和教程开篇就会讲生命周期
但我们之前介绍Vue使用时基本没有涉及到生命周期的知识
所以我选择等到对Vue的使用有了大概了解时,再介绍Vue,这样更有针对性

这篇Vue生命周期暂时只介绍Vue2.0相关的生命周期内容
关于Vue1.0中已经废弃的钩子,日后有时间再补充进来,主要加强对生命周期的理解

废话不多说,开始Vue生命周期吧

---

二,什么是生命周期,什么是钩子?

每个 Vue 实例在被创建时都要经过一系列的初始化过程
例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

在整个实例的创建过程中,也会运行一些叫做生命周期钩子的函数
Vue在特定的一些阶段允许我们"介入"创建流程
这些允许我们介入的时机点,以回调函数的形式供我们插入自己的逻辑
这些回调函数就是钩子,也叫HOOK

---

三,Vue生命周期提供了哪些钩子及其作用

官网Vue生命周期的流程图:

图中可以看到在vue整个生命周期中,有哪些钩子函数
它们分别在Vue整个初始化阶段的哪个时机点给了我们介入生命周期进行操作的机会

全部钩子函数:

beforeCreate:

    在Vue实例化开始时被调用,
    此时数据监听,事件等尚未初始化

created:

    在Vue实例创建完成后被调用,
    此时已完成数据绑定,事件方法,
    但尚未开始DOM编译,即未挂载到document中

beforeMount:

    在mounted前被调用

mounted:

    在编译结束时调用
    此时,所有指令已生效,数据变化已可以出发DOM更新,但不保证#el已插入文档

beforeUpdate:

    实例挂载后,再次更新实例时被调用,
    此时还未对DOM进行更新

updated:

    实例挂载后,再次更新实例且更新DOM完成时被调用

beforeDestroy:

    开始销毁实例时被调用,
    此时实例仍处于可用状态

destroyed:

    实例销毁后被调用,
    此时所有绑定和实例指令已经解绑完成,子实例已被销毁

---

四,Vue生命周期的分析

通过以上各个生命周期的作用和注意事项,已经对作用有了大概了解
对比在不同的钩子中主要涉及以下几个焦点问题:

    数据监听是否可用
    是否已挂载,DOM是否编译完成


下面通过一个Demo验证,在不同阶段的回调函数中,Vue实例的各种数据状态

<script>
  // 用于在各个钩子中输出各选项状态
  function output(vm){
    if (typeof(vm.$el) == "undefined"){
      console.log("el == 'undefined'");
    }else{
      console.log("el != 'undefined' 对el进行打印:");
      console.log(vm.$el);
    }
    console.log("data: " + JSON.stringify(vm.$data));
    console.log("message: " + vm.message)
  }

  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue生命周期Demo'
    },
    beforeCreate: function() {
      console.group('------ beforeCreate:Vue实例开始创建 ------');
      console.log("此时数据监听,事件等尚未初始化");
      output(this);
    },
    created: function() {
      console.group('------ created:Vue实例创建完成 ------');
      console.log("已完成数据绑定,事件的初始化,但DOM未编译");
      output(this);
    },
    beforeMount: function() {
      console.group('------ beforeMount:挂载前 ------');
      output(this);
    },
    mounted: function() {
      console.group('------ mounted:挂载完成 -------');
      console.log("所有指令已生效,数据变化已可以出发DOM更新");
      output(this);
    },
    beforeUpdate: function () {
      console.group('------ beforeUpdate:更新前 ------');
      console.log("此时还未对DOM进行更新");
      output(this);
    },
    updated: function () {
      console.group('------ updated:更新完成 ------');
      console.log("DOM已完成更新");
      output(this);
    },
    beforeDestroy: function () {
      console.group('------beforeDestroy:Vue实例销毁前------');
      console.log("实例开始销毁,但仍处于可用状态");
      output(this);
    },
    destroyed: function () {
      console.group('------destroyed:Vue实例销毁完成------');
      console.log("实例销毁完成,所有绑定和实例指令已经解绑完成,子实例已被销毁");
      output(this);
    }
  })
</script>

Vue生命周期Demo-初始化:

通过控制台或使用devTools修改message值,触发更新,查看更新对生命周期的影响:

分析:

beforeCreate:

此时尚未开始初始化Vue实例

created:

此时数据绑定,事件已完成初始化,data和message已经可以取值

beforeMount:

这时可以拿到el值,但还是通过{{message}}进行占位的,
此时是以在JavaScript中虚拟DOM形式存在,还未挂载到页面上

mounted:

此时的{{message}}已经完成了替换,但并不保证#el已插入文档

beforeUpdate:

通过改变message值吃法更新,先执行beforeUpdate钩子
发现此时虽然data和message都已更新,但el中的文字显示仍为之前显示
此时DOM尚未进行更新

updated:

此时DOM完成更新

beforeDestroy:

开始销毁Vue实例,此时实例仍处于可用状态

destroyed:

Vue实例销毁完成,所有绑定和实例指令已解绑,子实例已销毁

---

五,结尾

本篇对Vue生命周期做了简单介绍
包括全部生命周期钩子函数的作用和注意事项
通过Demo打印了在各个生命周期钩子中的数据状态

其实生命周期这部分知识还有很多没有说到,例如图中查找el和template这部分,
但是就目前这些基本也够用的,关于未介绍的部分后续会继续补充进来