Vue学习系列(四)——理解生命周期和钩子

时间 2019-11-10

标签 vue 学习系列理解生命周期钩子繁體版

原文原文链接

前言

在上一篇中，咱们对平时进行vue开发中遇到的经常使用指令进行归类说明讲解，大概已经学会了怎么去实现数据绑定，以及实现动态的实现数据展现功能，运用指令，能够更好更快的进行开发。而在这一篇中，咱们将经过实例，探究vue的生命周期。javascript

万物皆有灵，世间万物都拥有灵魂，小到山河湖海，花草树木，蚂蚁到人类，以及全部的动植物，大到地球星空和宇宙，都拥有灵魂，能够说他们都是有生命的，只是他们的生命形态是咱们人类所不能理解的存在。在生产中，生命周期通俗来说，就是从天然中来回到天然中去的全过程，也就是从采集材料设计，到加工生产后流通使用的过程，以及产品报废，进而回归大天然的过程，这整个过程就是一个完整的生命周期。所以，在开发应用项目的中，从启动页面的加载，页面渲染到销毁，也算是生命周期。Vue把整个生命周期划分为建立、挂载、更新、销毁等阶段，每一个阶段都会给一些“钩子”让咱们来作一些咱们想实现的动做。这里的“钩子”能够这么理解，就是在每个阶段用钩子钩住，并进行响应的操做。 html

学习生命周期，可使咱们更好的理解Vue的生命机制，经过了解每一个阶段的钩子，能够更好的实现咱们的业务代码，处理更加复杂的业务逻辑。vue

内容

Vue每个组件都有属于本身的生命周期，从开始建立、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等这就是一个组件的生命周期。java

在整个生命周期内，总共分为8个阶段建立前/后，载入前/后，更新前/后，销毁前/后。node

执行顺序

*图片来自官网，只要你理解了这张图，也就对Vue的生命周期有了一个大体的了解。app

在谈到Vue的生命周期的时候，咱们首先须要建立一个实例：dom

开始

1、建立前/后：

1.beforeCreate-建立前：实例建立前：这个阶段实例的data、methods是读不到的（el 和 data 并未初始化）ide

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 组件刚刚被建立,组件属性计算前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  //undefined
        },
})

2.created-建立完成：实例建立后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并无在DOM元素上进行渲染（完成了data数据的初始化，el没有）函数

 var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        created: function () {
            console.group('created 组件建立完毕,属性已经绑定但dom还未生成的状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
})

2、载入前/后

1.beforeMount ：准备载入——在挂载开始以前被调用：相关的 render 函数首次被调用。程序运行，控制台看输出（完成了虚拟el和data初始化）学习

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      }, 
        beforeMount: function () {
            console.group('beforeMount 模板挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
})

2.mounted ：挂载完成——el选项的DOM节点被新建立的 vm.$el 替换，并挂载到实例上去以后调用今生命周期函数。此时实例的数据在DOM节点上进行渲染（完成了真实el和data初始化）

var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        mounted: function () {
            console.group('mounted 模板挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
})

这个时候，页面渲染的四个阶段已经完成了，咱们看看流程：（刚开始的时候beforeCreate阶段，数据和页面都没有渲染，可是页面的静态数据已经被加载出来，而后一步一步，先vue实例，而后挂载，到最后页面渲染完成）

3、更新前/后

1.beforeUpdate ：更新Data以前——数据更新时调用，但不进行DOM从新渲染，在数据更新时DOM没渲染前能够在这个生命函数里进行状态处理

当修改vue实例的data时，vue就会自动帮咱们更新渲染视图，在这个过程当中，vue提供了beforeUpdate的钩子给咱们，在检测到咱们要修改数据的时候，更新渲染视图以前就会触发钩子beforeUpdate。

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
})

控制台输入 app.message = '艾三元'

由图看来，咱们的 Data 数据已经更新了，可是页面里尚未更新

2.update ：这个状态下数据更新而且DOM从新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，因此你如今能够执行依赖于 DOM 的操做。当实例每次进行数据更新时updated都会执行

 var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      }, 
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message);
        },
})

4、销毁前/后

1.beforeDestroy ：页面销毁前——实例销毁以前调用。调用实例的destroy( )方法能够销毁当前的组件，在销毁前，会触发beforeDestroy钩子。

  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
})

控制台输入 app.$destroy()

2.destroyed ：销毁完成——Vue 实例销毁后调用。调用后，Vue 实例指示的全部东西都会解绑定，全部的事件监听器会被移除，全部的子实例也会被销毁。

var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
})

这个时候咱们能够看到，vue 实例被销毁后，再修改 Data 页面也已经不能修改页面 DOM 了。

源码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "这是艾三元的主页" 
      },
        beforeCreate: function () {
           console.group('beforeCreate 组件刚刚被建立,组件属性计算前状态===============》');
           console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
           console.log("%c%s", "color:red","message: " + this.message)  //undefined
        },
        created: function () {
           console.group('created 组件建立完毕,属性已经绑定但dom还未生成的状态===============》');
           console.log("%c%s", "color:red","el     : " + this.$el); //undefined
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
           console.group('beforeMount 模板挂载前状态===============》');
           console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
           console.log(this.$el);
           console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
           console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 模板挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

View Code

附加说明

1.说说钩子是何时触发的？

Vue文档源码：在实例化的时候

function Vue(opt){    

    this._init(opt)

}
Vue.prototype._init(opt){
    ... 合并选项
    ... 设置初始值 ，事件 等数据
    initLifecycle(vm)
    callHook(vm, 'beforeCreate');
    ... 初始化选项等数据
    callHook(vm, 'created');
    ...获取挂载的DOM 父节点
    callHook(vm, 'beforeMount');
    ...解析模板成渲染函数，并执行渲染函数，生成DOM插入页面
    vm._isMounted = true;
    callHook(vm, 'mounted');
}
// 组件更新时会调用这个函数
Vue.prototype._update = function(

    vnode, hydrating

) {    

    if (vm._isMounted) {

        callHook(vm, 'beforeUpdate');
    }
    ...从新调用渲染函数，对比旧节点和新节点，获得最小差别，而后只更新这部分页面
    callHook(vm, 'updated');
}
// 节点被移除时会调用这个函数
Vue.prototype.$destroy = function() {
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    ...实例被消除，移除全部 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, 'destroyed');
}

在执行钩子的时候，会触发这个函数，遍历执行，绑定上下文

function callHook(vm, hook) {    

    // 是本身传入的 created 等回调

    var handlers = vm.$options[hook];    

    if (handlers) {        

    for (var i = 0,j = handlers.length; i < j; i++) {

            handlers[i].call(vm);
        }
    }
}

总结

1.经过简单了解 Vue 生命周期的八个阶段，能够应用在以后的开发中，针对不一样的阶段的钩子采起不一样的操做，更好的实现咱们的业务代码，处理更加复杂的业务逻辑。

2.参考资料Vue官网

3.下一篇开始建立项目应用