Vue入門指南-05 Vue實例的生命週期(快速上手vue)

生命週期鉤子 = 生命週期函數 = 生命週期事件

實例建立期間的生命週期函數

// 剛初始化了一個空的實例對象, 這時候只有默認的一些生命週期函數和默認事件, 其餘都未建立。
// 若是要調用 methods 中的方法, 或者操做 data 中的數據, 最先只能在 created 生命週期函數中操做
new Vue({
    el: "#app",
    // 在這個生命週期函數執行的時候,data和methods中的數據都尚未初始化
    beforeCreate () {}, // 表示實例徹底被建立以前, 會執行這個函數
    // 在這個生命週期函數執行的時候,data和methods中的數據都已經初始化好了
    created () {} // 表示實例被建立以後, 會執行這個函數
})
複製代碼

查看Vue生命週期圖例, 這裏表示Vue開始編譯模板, 把Vue代碼中的那些指令進行執行, 最終在內存中生成一個編譯好的最終模板字符串, 而後把這個字符串渲染爲內存中的DOM,此時, 只是在內存中渲染好了模板, 並無把模板掛載到真正的頁面中。

運行期間的生命週期函數

new Vue({
    el: "#app",
    // 在這個生命週期函數執行的時候,頁面中的元素尚未被真正的替換過來,只是以前寫的一些模板字符串
    beforeMounted () {}, // 表示模板已經編譯完成,可是尚未把模板渲染到頁面中
    
    // 表示模板已經編譯完成,內存中的模板已經真實的渲染到了頁面中去,已經能夠看到渲染好的頁面了
    // 注意: mounted是實例建立期間的最後一個生命週期函數,當執行完mounted生命週期函數就表示,
    // 實例已經被徹底建立好了,此時若是沒有其餘操做的話,這個實例就在內存中一動不動
    // 注意: 若是要經過某些插件操做頁面上的DOM節點,最先要在mounted生命週期中操做
    mounted () {} 
    
    // 上面的是組件的建立階段,接下來進入組件的運行階段
    // 在這個生命週期函數執行的時候,頁面中顯示的數據仍是舊的,可是data中的數據是最新的,
    // 頁面還沒有和最新的數據保持同步
    beforeUpdate () {} // 表示當前界面尚未被更新,數據確定被更新了
    // 查看Vue生命週期圖例,這裏表示先根據data中最新的數據在內存中從新渲染出一份最新的內存DOM樹當最新的
    // 內存DOM樹更新以後會把最新的內存DOM樹從新渲染到真實的頁面中去這時候就完成了數據從data(model層)
    // 到view(視圖層)的更新
    updated () {} // 表示當前頁面和數據保持同步了,都是最新的
})
複製代碼

銷燬期間的生命週期函數

走到這裏已經進入組件的銷燬階段了

new Vue({
    el: "#app",
    // 在這個生命週期函數執行的時候.實例身上全部的data和methods以及過濾器、指令等等都是可用狀態,尚未
    真正的執行銷燬的過程
    beforeDestroy () {}, // 表示Vue實例已經從運行階段進入到銷燬階段
    // 在這個生命週期函執行的時候,組件中的data和methods以及過濾器、指令等等都已經不可用了
    destroyed(){} // 表示組件已經徹底被銷燬了
})
複製代碼

關於Vue中的生命週期函數, 這裏我儘量的把我本身的理解和認知寫了出來, 若是有不對或者不完善的地方請留言告知我。

Vue入門指南(快速上手vue)