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

实例生命周期钩子

  • 什么是生命周期:从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
  1. init injection & reactivity:表示初始化数据和方法,在这个阶段,data和methods这些对象都被初始化好了。

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

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

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

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

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

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

    运行结果:
    1556619701642.png
  1. 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
  1. 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
  1. beforeDestroy:调用实例的$destroy( )方法可以销毁当前的组件,在销毁前,会触发beforeDestroy钩子。,此时实例的所有对象都是可用的,还没有真正的执行销毁。

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

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