VUE学习笔记：实例的生命周期

VUE生命周期

VUE实例从创建，运行到销毁这整个过程被称为VUE的生命周期，在生命周期中会经历生命周期事件，又可以称为生命周期钩子或者生命周期函数，这些函数是在VUE生命周期的特定时间触发的方法，使得使用者可以在生命周期中特定的阶段完成对应需求

生命周期函数

先放一张VUE官方的生命周期函数图，然后咱慢慢解释

创建

实例创建期间包含两个生命周期函数beforeCreate和created

beforeCreate函数表示实例还未创建阶段，methods和data都没有初始化，无法被调用，created函数表示实例已在内存中创建，但是还没有开始编译模板，没有绑定到dom

export default{
    data: function(){
        return{
            msg:"helloworld"
        }
    },
    beforeCreat(){
        console.log("beforeCreat")
        // 数据还未初始化
        console.log(this._data)
        console.log(this.msg)
        console.log(this.$el)
    },
    created(){
        console.log("created")
        console.log(this._data)
        console.log(this.msg)
        // 还未绑定到dom
        console.log(this.$el)
    }
}

挂载

挂载期间包含两个生命周期函数，beforeMount和mounted

beforeMount函数表示实例还未挂载，此时已经完成了模板的编译，但还未从内存挂载到页面，页面上模板中的表达式之类的还是字符串的形式 (能得到this.$el，但是this.$el.innerHTML还是原始值)

mounted函数表示实例已挂载到了页面指定的容器上

export default{
    data: function(){
        return{
            msg:"helloworld"
        }
    },
    beforeMount() {
        console.log("beforeMount");
        // $el.innerHTML为原始值，直接输出会报错
        console.log(this.$el.innerHTML);
    },
    mounted() {
        console.log("mount");
        // 可以获取$el.innerHTML
        console.log(this.$el.innerHTML);
    }
}

更新

当数据data发生变化有两个生命周期函数beforeUpdate和updated

beforeUpdate函数表示数据更新但是还没有渲染到页面的时候，这时候调用data中的数据都是更新后的数据，但是页面中的dom还没有刷新 (this.$el.innerHTML还是更新前的值)，beforeUpdate方法自带两个参数，可以获取更新前后的数据

updated则意味着页面上的数据和更新后的数据同步了

export default{
    data: function(){
        return{
            msg:"helloworld"
        }
    },
    beforeUpdate(oldVal, newVal) {        
        console.log("beforeUpdated")  
        // 更新之前的值      
        console.log(this.$el.innerHTML)                
        console.log(oldVal, newVal)
    },      
    updated() {        
        console.log("updated")   
        // 更新之后的值       
        console.log(this.$el.innerHTML)       
    }
}

销毁

销毁阶段也包含了两个生命周期函数：beforeDestroy以及destroyed

beforeDestroy函数在Vue实例销毁前调用，所有data和methods都还可以正常使用，destroyed函数则在Vue实例完全销毁后调用，完全销毁指实例中所有内容解绑，事件监听移除，以及所有子实例销毁

export default{
    data: function(){
        return{
            msg:"helloworld"
        }
    },
    beforeDestroy() {
        console.log("beforeDestory");
        console.log(this.$el.innerHTML);
        console.log(this.msg);
    },
    destroyed() {
        console.log("destoryed");
        console.log(this.$el.innerHTML);
        console.log(this.msg);
    }
}