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

实例生命周期钩子

• 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！

• 生命周期钩子：就是生命周期事件的别名而已；

• 生命周期钩子 = 生命周期函数 = 生命周期事件

  流程图说明：

1556595104902.png

流程步骤：

1. new Vue(): 开始创建一个实例对象。此时这个实例对象什么都没有，就是个空对象。

2. init Event&Lifecycle:初始化这个实例对象的事件和生命周期，此时这个实例对象会有Vue默认的一些生命周期函数和默认的事件，如：beforeCreate、created...等。

3. 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

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

5. 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

6. Has "el"option?: 这一阶段是分支判断阶段，判断是否存在“el”这个属性，如果有，执行步骤7，如果没有，则可以调用vm.$mount(el)这个方法来手动挂载。

7. Has "template"option?:这一阶段也是分支判断阶段，判断是否存在template属性，如果存在，就编译模板，如果不存在，则把“el”绑定html当作编译模板。

8. 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函数执行的时候，编译模板还未挂载（渲染）到页面中，此时页面还是原来旧的页面。

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

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

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

    运行结果： 1556619701642.png

11. 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

12. 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

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

    这里我不知道该怎么去用代码来解释。

14. 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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。