vue实例的生命周期

生命周期概念 :

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

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

生命周期分类

• 创建期间的钩子
  • beforeCreate : 初始化一个空的vue实例对象,只有一些内置事件和生命周期钩子
  • created : 执行的时候,data和 methods已经被创建出来了,可以使用了
  • beforeMount : 此时模板在内存中渲染成功了,只是还没有挂载到页面上
  • mounted : 表示实例已经完全被创建出来了 , mounted执行完,实例从创建阶段 -> 运行阶段
• 运行期间的钩子
  • beforeUpdate: 此时 data是最新的,但是页面还是旧的
  • updated: data 和 页面上的数据都完成了更新,界面重新渲染成功 updated执行完,表示实例运行阶段结束–> 销毁阶段
• 销毁期间的钩子
  • beforeDestroy: 实例还可以用,还没有开始销毁
  • destroyed: 实例销毁后调用,啥都没了

vue实例的完整生命周期图示

<div id="app">
    {{msg}}
    <input type="button" value="修改msg" @click='msg="修改啦"'>
</div>

//new Vue({})  创建一个空的vue实例对象,对象身上只有默认的事件和钩子函数
const vm = new Vue({
    el:'#app',
    data:{
        msg:'OK'
    },
    methods:{
        fn(){
            console.log( 'methods存在' )
        }
    },
    beforeCreate(){
	//执行的时候,data和methods还没有被创建,只有默认的事件和钩子函数
        console.log( '第一个钩子函数 beforeCreate' )
        console.log( '界面   '+document.getElementById('app').innerText ) //{{msg}}
        console.log( this.msg )  //undefined
        this.fn()//报错
    },
    created(){
       // //执行的时候,data和methods已经被创建好了,可以使用了
        console.log( '第二个钩子函数  created' )
        console.log( '界面   '+document.getElementById('app').innerText )//{{msg}}
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn() 
    },
    beforeMount(){
        // //执行的时候,模板在内存中已经渲染为了DOM树,但是还没有挂载到页面上
        console.log( '第三个钩子函数  beforeMount' )
        console.log( '界面   '+document.getElementById('app').innerText )//{{msg}}
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn()

    },
    mounted(){
        // //执行的时候,内存中渲染的DOM树,已经挂载到了页面,页面上就可以显示了 
        console.log( '第四个钩子函数  mounted' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //ok
        this.fn()
    },

    //实例创建完成 ---> 执行阶段
    beforeUpdate(){
        //只有数据发生改变,该事件才会被触发,data里的数据是最新的,但是页面上的数据是旧的
        console.log( '第五个钩子函数  beforeUpdate' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
        this.fn()
    },
    updated(){
        //页面上的数据已经最新的,和data里的数据保持一致
        console.log( '第六个钩子函数  updated' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
        this.fn()
    },

    //实例从执行阶段 --> 销毁阶段
    beforeDestroy(){
        console.log( '第七个钩子函数  beforeDestroy' )
        console.log( '界面   '+document.getElementById('app').innerText )//ok
        console.log( 'data的msg属性    ' + this.msg ) //修改啦
        this.fn()
    }
})