元件從建立到銷毀的一系列過程叫做元件的宣告週期。
vue在整個生命週期裡面提供了一些函式，可以在內部實現一些業務邏輯，並且這些函式會在一些特定的場合下去執行。（在生命週期的某乙個時刻進行觸發）。
元件的生命週期鉤子函式大致可以分為三個階段：初始化 、進行中 、 銷毀。
1、初始化：beforecreate – create – beforemount - mounted
// 乙個元件或者例項的生命週期都是通過new開始的
// 例項化之後，內部會做一些初始化事件與生命週期相關的配置
vue.
component
("my-component",}
,// 這個鉤子函式初始化的時候立馬執行,此鉤子函式裡面是獲取不到資料的
// 同時頁面中的真實dom節點也沒有掛載出來，null
beforecreate()
,// created鉤子函式內部的資料已經被掛載了，但是真實dom節點還是沒有渲染出來
// 在這個鉤子函式裡面，如果同步的去更改資料的話，執行中鉤子函式是不會執行的。
// 通常會在此鉤子函式裡面進入ajax的非同步操作，另外還可以做一些初始化事件的繫結
created()
,// 接下來的過程，就是元件或者例項去查詢各自的模板，讓後將其編譯成虛擬dom，即將放入render函式中做初始化渲染的操作。
// beforemount代表dom馬上就要被渲染出來了，但是還沒有真正的在頁面中渲染出來
// 此鉤子函式與created鉤子函式基本一致，可以做ajax與初始化事件的繫結操作
beforemount()
,// 生成好了虛擬dom，然後在render函式裡面替換對應的el，渲染成真實dom節點
// 相當於在render函式裡面做了乙個初始化渲染的操作
// 相當於把元件內部的render函式覆蓋了。自己的render是將虛擬dom渲染成真實dom的操作
render()
,// mounted鉤子函式是初始化階段的最後乙個鉤子函式
// 資料已經掛載完畢了，真實的dom也已經渲染出來了
// 這個鉤子函式可以用來做一些例項化的相關操作 ===> 拖拽
mounted()
,})// 繫結摸板元件
new vue()
.$mount()
;
// 乙個元件或者例項的生命週期都是通過new開始的
// 例項化之後，內部會做一些初始化事件與生命週期相關的配置
vue.
component
("my-component",}
,// 執行時鉤子函式初始化階段是不會主動執行的
// 只有dom掛載完畢了，然後再去當資料發生變化的時候，beforeupdate這個鉤子函式才會執行
beforeupdate()
,// 這個鉤子函式是可行的
// 當資料發生改變的時候，引發虛擬dom的對比，虛擬dom對比完成後，再去渲染真實的dom結構
// 當真實的dom結構渲染完成後，內部才會執行updated鉤子函式
// 資料改變了，然後swiper-slide這幾個真實dom生成好了之後，才會進入到updated這個鉤子函式裡面去
updated()
)},}
)// 繫結摸板元件
new vue()
.$mount()
;
// 乙個元件或者例項的生命週期都是通過new開始的
// 例項化之後，內部會做一些初始化事件與生命週期相關的配置
vue.
component
("my-component",}
,// 當元件銷毀時，就會觸發，vm.$destroy()的時候，元件就會被銷毀
// 這個鉤子函式代表銷毀之前，可以做一些善後操作
// 例如可以做一些清除事件繫結，清除計時器繫結
beforedestroy()
,// 元件一旦被銷毀了，元件的dom結構還是存在的
// 只是元件的雙向繫結
destroyed()
})// 繫結摸板元件
new vue()
.$mount()
;
vue生命週期 鉤子理解
在vue文件中，對生命週期部分有如下檢視 建立vue例項 init events lifecycle 開始初始化 beforecreate 元件剛被建立，組建屬性計算之前，如data屬性等 init injections reactivity 通過依賴注入匯入依賴項 created 元件例項建立完成...
理解vue生命週期鉤子
先上一副官網的生命週期圖，稍微補充了點說明。在不同的生命週期函式中執行 const vm newvue data watch immediate true,computed 生命週期 beforecreate created beforemount mounted beforeupdate upda...
vue生命週期鉤子
el 表示dom元素，data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化，el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成，並且掛載在頁面上了 注意 以下勾子只能在 k...