Vue2.0生命周期钩子

给大家分享一下我对Vue2.0的生命周期钩子的理解与用法

一、生命周期图示

image.png

二、生命周期分解

1、beforeCreate

el 和 data 都未初始化，可以在这里做loading

2、created

完成了 data 数据的初始化，el没有，可以在这里结束loading，当然也可以通过监听数据变化来结束

3、beforeMount

在挂载开始之前被调用，el还没有加载

4、mounted

完成挂载，此时el和data都已初始化。在这发起后端数据请求，拿回数据处理业务逻辑。
注意：子组件不一定已经被挂载。如果要等到整个视图都渲染完毕，请使用vm.$nextTick

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

5、beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。此时您可以在这儿处理特殊要求的数据，比如一个数据字段变了，您可以通过这个字段的值来判断您要进行的特殊操作。

6、updated

此时虚拟 DOM 已经渲染完毕，组件 DOM 也已经更新，您可以在这儿执行依赖于 DOM 的操作。不过，一般我个人处理数据都是在computed和watch完成，因为在计算属性和watch对每个数据的处理更有针对性。

7、beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
注意：如果您使用了setInterval之类的任务，实例虽然销毁了，但是这个任务仍然会继续执行。所以您可以在destroyed钩子这里clearInterval。

三、实战演示

我比较懒，借用一个哥们儿的代码......

<!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 : "xuxiao is boy" 
      },
       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)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            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)); //undefined
            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>

请注意这个例子的注解，配合上面的分解，应该比较容易理解。谢谢您的阅读。