看Vue文档总结之路（三）

Vue的生命周期（以下的所有链接均为转载）

Vue的生命周期：

Vue的生命周期：

每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期，Vue实例从创建到销毁的过程

Vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作

1. 创建（Create ) beforeCreate created

2. 载入 (Mount) beforeMount mounted

3. 更新 (Update) beforeUpdate updated

4. 销毁 (Destroy) beforeDestroy destroyed

这些生命周期钩子函数都是写在与data同级的。

实例：

let app = new Vue({
    el: "#box",
    data: {
        msg: "测试"
    },
    beforeCreate() {   //创建vue实例前
        console.log("------------beforeCreate-------------");
        console.group(this.$el, this.$data, this.msg)    //分组输出
        //输出        undefined  undefined  undefined
    },
    created() {   //创建vue实例后
        console.log("------------created-------------");
        console.group(this.$el, this.$data, this.msg)
        //输出        undefined     obj      测试
    },
    beforeMount() {   //vue实例挂载前（绑定元素前）
        console.log("------------beforeMount-------------");
        console.group(this.$el, this.$data, this.msg)
        //输出        虚拟DOM      obj         测试
        //注意：这里是虚拟DOM，只是获取而已，但是页面上的插值表达式还没有把数据渲染出来
    },
    mounted() {   //vue实例挂载后（绑定元素后）
        console.log("------------mounted-------------");
        console.group(this.$el, this.$data, this.msg)
        //输出        虚拟DOM      obj         测试
        //注意：页面的插值表达式开始渲染
    },
    beforeUpdate() {    //数据修改前（只有在数据发生变化的时候才会触发这个周期）
        console.log("------------beforeUpdate-------------");
        console.group(this.$el, this.$data, this.msg)
    },
    updated() {    //数据修改后（只有在数据发生变化的时候才会触发这个周期）
        console.log("------------updated-------------");
        console.group(this.$el, this.$data, this.msg)
    },
    beforeDestory() {    //示例销毁前（只有在示例被销毁的时候才会触发这个周期）
        console.log("------------beforeDestory-------------");
        console.group(this.$el, this.$data, this.msg)
    },
    destoryed() {     //示例销毁后（只有在示例被销毁的时候才会触发这个周期）
        console.log("------------destoryed-------------");
        console.group(this.$el, this.$data, this.msg)
    }
    //可以用 app.$destory(); 这个方法把实例销毁
    //注意：示例销毁后，dom不再被vue进行管理，双向绑定被取消，页面的数据不会更新
})

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

1、beforeCreate：（创建实例之前）

实例刚在内存中被创建出来，但是这时候还没有初始化好 data 和 methods 属性，都是undefined

2、created：（创建实例之后）

实例已经在内存中创建OK，这时候 data 和 methods 都已经创建好了，此时还没有开始编译模板，也就是挂载还没有关联

3、beforeMount：（实例挂载前）

此时已经完成了模板的编译（加载完HTML），挂载点也和页面关联了，但是页面的模板还没有把 Vue 的数据渲染，只是显示插值表达式而已

4、mounted：（实例挂载后）

页面的插值表达式开始渲染

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

1、beforeUpdate：（修改数据前）

状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

2、updated：（修改数据后）

实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

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

1、beforeDestroy：（实例销毁前）

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

2、destroyed：（示例销毁后）

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 dom不再被vue进行管理，双向绑定被取消，页面的数据不会更新