生命週期鉤子 = 生命週期函式 = 生命週期事件
例項建立期間的生命週期函式
// 剛初始化了一個空的例項物件, 這時候只有預設的一些生命週期函式和預設事件, 其他都未建立。
// 如果要呼叫 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中的生命週期函式, 這裡我儘可能的把我自己的理解和認知寫了出來, 如果有不對或者不完善的地方請留言告知我。