vue的生命週期學習筆記
阿新 • • 發佈:2018-12-15
Vue的生命週期函式有8個,分別是:beforeCreate, created, beforeMount, mounted, beforeUpdated, updated, beforeDestroy, destroyed. 下面是個人的一些總結。
- beforeCreate 在它之前剛初始化了一個空的vue例項物件,在這個階段,例項物件身上只有預設的一些生命 周期函式和預設的事件,其他的東西都未建立,在這個生命週期執行的 時候,data和methods中的資料都還沒有初始化
<div id="app"></div> <script> var vm = new Vue({ el: "#app", data: { msg: "hello" }, methods: { show() { console.log("我是show方法") } }, beforeCreate() { console.log(this.msg) this.show() } }) </script>
不知什麼原因,程式碼編輯器用不了,改為圖片
從控制檯輸出的結果看,h1中的內容原本是hello的,但在這個階段卻是 {{ msg }} ,由此說明在 beforeMount 階段模板還沒有被真正替換過來,只是之前寫的一些模板字串
- created 在created中,data和methods等都已經被初始化好了,所以如果要用到methods中的方法或者操作data中的資料,最早只能在created中操作
- beforeMount 接著下來,vue開始編輯模板,執行vue的程式碼,最終會在記憶體中生成一個編譯好的最終模板字串,緊接著渲染為記憶體中的DOM,也就是說,此函式在執行的時候,只是在記憶體中渲染好了模板,而沒有把模板掛載到真正的頁面中去
- mounted 這個時候已經將在記憶體中編譯好的模板,真正的替換到瀏覽器的頁面中去,如果要操作頁面上的DOM節點,最早要在mounted中進行。只要執行完了mounted,就表示整個vue例項已經初始化完畢了。此時,元件已經脫離了建立階段,進入到了執行階段
元件執行階段的生命週期函式只有兩個,beforeUpdate和updated,這兩個事件會根據data資料的改變,有選擇的觸發0次或者多次。
從控制檯輸出的結果看,這個階段資料已經被更新了,但是我們的介面還沒有被更新
- beforeUpdate 當執行beforeUpdate的時候,頁面中顯示的資料還是舊的,不過這個時候data中的資料是最新的,頁面尚未和最新的資料保持同步
- updated 到達這個時候,會先根據data中最新的資料, 在記憶體中重新渲染出一份最新的DOM樹,更新完後緊接著把這份最新的DOM樹重新渲染到真實的頁面中去,這樣就完成了data(model層)到view(檢視層)的更新。updated事件執行的時候,頁面和data中的資料已經保持同步了,都是最新的了
- beforeDestroy 當執行beforeDestroy的時候,vue例項就已經從執行階段,進入到了銷燬階段。這個時候例項身上的data和methods以及component等等都處於可用狀態,還沒有真正執行銷燬的過程
- destroyed 當執行到destroyed函式的時候,元件已經被完全銷燬了,此時元件中的data,methods等等都已經不可用了