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()
    }
})