Vue 实例的生命周期

• 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

初始化阶段生命周期钩子函数

• beforeCreate : 在实例初始化之前执行，此时是一个空的实例对象，只有一些默认的生命周期函数和默认的事件， data 和 methods 都没有初始化

let vm = new Vue({
        el : '#zz', 
        data : { 
            message : 'Hello world !',
            tip : '数据驱动视图'
        },
        methods : {
            say () {
                console.log(this.message);
            }
        },
        beforeCreate : function () {
            console.log(this.message);
            this.say();
        },
    });

输出

beforeCreate.png

• created : data 和 methods 都已经初始化好了，如果要操作 data 和 methods ，最早只能在 created中

let vm = new Vue({
        el : '#zz', 
        data : { 
            message : '数据驱动视图'
        },
        methods : {
            say () {
                console.log('调用了say方法');
            }
        },
        created : function () {
            console.log(this.message);
            this.say();
        },
    });

结果

created.png

• beforeMount ： 在模板编译完成后，在页面上挂载之前执行。也就是说内存中已经有了一个编译好的最终的模板字符串，并且渲染为内存中的 DOM ，当时并没有挂载到页面上去，页面上并没有将插值表达式中的字符串替换过来。

 let vm = new Vue({
        el : '#zz', 
        data : { 
            message : '数据驱动视图'
        },
        methods : {
            say () {
                console.log('调用了say方法');
            }
        },
        beforeMount : function () {
            var oP = document.getElementsByTagName('p')[0];
            console.log(oP.innerHTML);
        }
    });

结果

beforeMount.png

• mounted ： 内存中的模板已经挂载到页面中，用户可以看到已经渲染好的页面。这是实例创建期间的最后一个生命周期函数，执行完 mounted 后实例就初始化完成，驻存在内存中等待调用进入到运行阶段，如果要操作 DOM 最早只能在 mounted 中做。

 let vm = new Vue({
        el : '#zz', 
        data : { 
            message : '数据驱动视图'
        },
        methods : {
            say () {
                console.log('调用了say方法');
            }
        },
        mounted : function () {
            var oP = document.getElementsByTagName('p')[0];
            console.log(oP.innerHTML);
        }
    });

结果

mounted.png

运行阶段生命周期钩子函数

• beforeUpdate ： 当数据发生改变时执行，但是此时页面还没有被更新，页面和数据不同步

 let vm = new Vue({
        el : '#zz', 
        data : { 
            message : '数据驱动视图'
        },
        methods : {
            say () {
                console.log('调用了say方法');
            }
        },
        beforeUpdate : function () {
            var oP = document.getElementsByTagName('p')[0];
            console.log(oP.innerHTML);
            console.log(this.message);
        }
    });

结果 : 我们可以看到，当我改变数据 message 时，执行了这个生命周期函数，页面内容并没有改变，但是实例中的数据已经更新了

beforeUpdate.png

• updated：数据更新后，内存中的 DOM 重新渲染并挂载到页面上，已经完成了 数据(Model) 到 视图(view) 的更新然后执行这个生命周期函数。

    let vm = new Vue({
        el : '#zz', 
        data : { 
            message : '数据驱动视图'
        },
        methods : {
            say () {
                console.log('调用了say方法');
            }
        },
        updated : function () {
            var oP = document.getElementsByTagName('p')[0];
            console.log(oP.innerHTML);
            console.log(this.message);
        }
    });

结果

updated.png

销毁阶段生命周期钩子函数

• beforeDestroy : 当执行 beforeDestroy 钩子函数的时候，实例就已经从运行阶段进入到销毁阶段，实例身上所有的 data 和 methods 以及 filters ，directives ... 都可以使用，还没有真正执行销毁阶段。
• destroyed ： 实例已经完全被销毁了，实例身上所有的 data 和 methods 以及 filters ，directives ... 都不可以使用了。