beforeCreate? (組件創(chuàng)建前)
// 實例被創(chuàng)建前執(zhí)行
?// 執(zhí)行函數(shù)時 data 和 methods 還沒有被初始化
當前實例主要做了vm實例一些屬性的定義和createElement()方法的封裝(創(chuàng)建前卵牍,訪問不到data當中的屬性以及methods當中的屬性和方法释牺,可以在當前生命周期創(chuàng)建一個loading祭刚,在頁面加載完成之后將loading移除)喜滨。其實在日常開發(fā)中并不常用,描述并不貼切和形象,這篇文章描述的挺詳細的推薦--->>?beforeCreate()前做了什么
created? (組件創(chuàng)建完成)
// 實例被創(chuàng)建之后執(zhí)行
?// 執(zhí)行函數(shù)時data 和 methods 初始化完成。但是模板還未開始編輯
?// 運用場景:1) Ajax 異步數(shù)據(jù)請求 2) 初始化操作
Init (初始化) injections (依賴注入) & reactivity (開始響應(yīng))保檐,一般通過ajax請求初始化數(shù)據(jù)扔亥。? ? ? ? ? ? ? ? ? ? ? ? ? ? ?當前生命周期執(zhí)行的時候會遍歷data中所有的屬性伞鲫,給每一個屬性都添加一個getter、setter方法,將data中的屬性變成一個響應(yīng)式屬性? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當前生命周期執(zhí)行的時候會遍歷data&&methods身上所有的屬性和方法,將這些屬性和方法代理到vue的實例身上 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?在當前生命周期中我們可以進行前后端數(shù)據(jù)的交互(ajax請求)诵肛。推薦--->>vue.js中created方法的使用詳解
beforeMount? (組件掛載之前)
// 實例掛載前執(zhí)行
?// 此時模板已經(jīng)編輯完成到內(nèi)存中薛训。但是還未渲染到 DOM,固頁面未展示
載入前(完成了data和el數(shù)據(jù)初始化),但是頁面中的內(nèi)容還是vue中的占位符,data中的message信息沒有被掛在到Dom節(jié)點中秋麸,在這里可以在渲染前最后一次更改數(shù)據(jù)的機會次乓,不會觸發(fā)其他的鉤子函數(shù),一般可以在這里做初始數(shù)據(jù)的獲取。? ? **注意此時還沒有掛載html到頁面上。
mounted? (組件掛載完成)
// 實例掛載后執(zhí)行
?// 此時已經(jīng)渲染了DOM,可以調(diào)用插件操作 DOM
?// 運用場景:掛載元素內(nèi)dom節(jié)點的獲取。可以配合$.nextTick 使用進行單一事件對數(shù)據(jù)的更新后更新dom
在el 被新創(chuàng)建的 vm.$el 替換工碾,并掛載到實例上去之后調(diào)用端圈。實例已完成以下的配置:用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate? (數(shù)據(jù)更新之前,虛擬 DOM 打補丁之前)
// 數(shù)據(jù)更新前執(zhí)行
?// data 數(shù)據(jù)有更新時,內(nèi)存中重新編譯了最新模板字符串,但還未重新渲染DOM
狀態(tài)更新之前調(diào)用。當內(nèi)存中實例的?data?數(shù)據(jù)更新時觸發(fā)。此時內(nèi)存中?data?是最新的,但是還未重新渲染DOM節(jié)點。
updated (數(shù)據(jù)更新之后上荡,虛擬 DOM 渲染完成)
// 數(shù)據(jù)更新后執(zhí)行
?// 已經(jīng)重新渲染 DOM
?// 運用場景:對數(shù)據(jù)更新作統(tǒng)一邏輯業(yè)務(wù)處理
在由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時,組件DOM已經(jīng)更新,所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下,應(yīng)該避免在此期間更改狀態(tài)赶促,因為這可能會導致更新無限循環(huán)婿滓。該鉤子在服務(wù)器端渲染期間不被調(diào)用卿吐。
待續(xù)