实例生命周期钩子函数的学习

实例生命周期钩子

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件

流程图说明：

1556595104902.png

流程步骤：

new Vue(): 开始创建一个实例对象。此时这个实例对象什么都没有，就是个空对象。
init Event&Lifecycle:初始化这个实例对象的事件和生命周期，此时这个实例对象会有Vue默认的一些生命周期函数和默认的事件，如：beforeCreate、created...等。
beforeCreate:表示实例将要被创建，当初始化对象完成后，就会自动触发beforeCreate这个生命周期函数，需要注意的是，在这个阶段，只是初始化了一些生命周期函数和默认事件，其它的都还未被初始化，比如el、data和methods这几个对象，就都还没有被初始化的，因此在这个函数里是获取不到他们的数据的，这个函数通常适用来开启加载一个动画.
```
var app = new Vue({
    el: '#app',
    data: {
     message: "beforeCreate访问不到当前数据"
    },
    beforeCreate: function () {
        console.group('beforeCreate 创建前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el); 
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "message: " + this.message);
    },
});
```
运行结果：

1556609663037.png

init injection & reactivity：表示初始化数据和方法，在这个阶段，data和methods这些对象都被初始化好了。

created:实例创建成功（data methods computed watch这些都被初始化了）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测（data observer）、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "Create可以访问当前数据"
        },
        methods: {
            show: function () {
                console.log("Create可以访问当前这个方法");
            }
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log("%c%s", "color:red", "message   : " + this.message);
            this.show();
        }
   });
</script>

运行结果：

1556612278400.png

Has "el"option?: 这一阶段是分支判断阶段，判断是否存在“el”这个属性，如果有，执行步骤7，如果没有，则可以调用vm.$mount(el)这个方法来手动挂载。
Has "template"option?:这一阶段也是分支判断阶段，判断是否存在template属性，如果存在，就编译模板，如果不存在，则把“el”绑定html当作编译模板。

beforeMount:表示在挂载开始之前被调用，此时模板已经在内存中编译成功，但是还没有把模板挂载（渲染）到页面中，因此获取不到页面中的内容。

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

<script>
    var app = new Vue({
     el: '#app',
     data: {
             message: "beforeMount执行时，此数据能否被渲染到页面中"
     },
     beforeMount() {
         console.log(document.getElementById('h3').innerHTML);
     }
    });
</script>

运行结果：

1556618615154.png

可以看出，在此函数中获取到id为h3的innerHtml是{{message}},而不是"beforeMount执行时，此数据能否被渲染到页面中"。说明在beforeMount函数执行的时候，编译模板还未挂载（渲染）到页面中，此时页面还是原来旧的页面。

Create vm.$el and replace "el" with it:执行到这一步，表示将内存中的模板挂载到页面中。

mounted:表示挂载完成的函数，这一步可以获取到页面中的内容了,同时也可以操作dom对页面进行修改

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "mounted执行时，此数据能否被渲染到页面中"
        },
        mounted () {
            console.log(document.getElementById('h3').innerHTML);
        }
    });
</script>

运行结果：

1556619701642.png

Mounted = when data changes ? beforeUpdata:mounted : 这个阶段的意思是如果数据从来没有改变过，就一直处在mounted阶段，如果有数据发生改变，则会触发beforeUpdata这个函数.此时数据被更新了，但是页面中的数据还没有被更新。

<div id="app">
    <h3 id="h3">{{message}}</h3>
    <input type="button" value="修改message" @click="message = 'beforeUpdata执行时，此     数据不能被渲染到页面中====='">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "beforeUpdata执行时，此数据能否被渲染到页面中"
        },
        beforeUpdate () {
            console.log("界面上的内容是：" + document.getElementById('h3').innerHTML);
            console.log("data中的数据是：" + this.message);
        }
    });
</script>

运行结果：

1556621691088.png

Vitual DOM re-render and patch:将更新到的新数据在内存中重新渲染到内存的DOM树中来更新内存中DOM树，然后再通过内存中更新好的DOM树重新挂载（渲染）到页面中去，这时候就完成了数据从data（Model层）->view(视图层)的更新

updata:完成步骤12后此函数就会被调用，表示更新完毕后执行的函数，此时页面中的数据和内存中的数据和数据库中的数据都是最新的了。
```
  <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "updata执行时，此数据能否被渲染到页面中"
            },
            updated () {
                console.log("界面上的内容是：" + document.getElementById('h3').innerHTML);
                console.log("data中的数据是：" + this.message);
            }
        });
    </script>
```

运行结果：

1556774367831.png

beforeDestroy:调用实例的$destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。，此时实例的所有对象都是可用的，还没有真正的执行销毁。

这里我不知道该怎么去用代码来解释。
destroy:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在.

总结：根据上图流程图，可以将生命周期钩子函数分为三个期间，创建期间，运行期间和销毁期间，

创建期间的生命周期函数：

beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

运行期间的生命周期函数：

beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

销毁期间的生命周期函数：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。