資訊專(zhuān)欄INFORMATION COLUMN
摘要：實(shí)例化發(fā)生了什么詳解生命周期本文將對(duì)的生命周期進(jìn)行詳細(xì)的講解讓你了解一個(gè)實(shí)例的誕生都經(jīng)歷了什么我在上建立了一個(gè)存放筆記的倉(cāng)庫(kù)以后會(huì)陸續(xù)更新一些知識(shí)和項(xiàng)目中遇到的坑有興趣的同學(xué)可以去看看哈歡迎傳送門(mén)實(shí)例化一個(gè)這是一個(gè)方法觸發(fā)鉤子函數(shù)組件實(shí)例剛
實(shí)例化vue發(fā)生了什么?(詳解vue生命周期)
本文將對(duì)vue的生命周期進(jìn)行詳細(xì)的講解,讓你了解一個(gè)vue實(shí)例的誕生都經(jīng)歷了什么~
我在Github上建立了一個(gè)存放vue筆記的倉(cāng)庫(kù),以后會(huì)陸續(xù)更新一些知識(shí)和項(xiàng)目中遇到的坑,有興趣的同學(xué)可以去看看哈(歡迎star)!
傳送門(mén)
實(shí)例化一個(gè)Vueconst app = new Vue({
el:"#app",
data:{
message:"hello,lifePeriod"
},
methods:{
init(){
console.log("這是一個(gè)方法!")
}
}
})
1.觸發(fā) beforeCreate 鉤子函數(shù)
組件實(shí)例剛被創(chuàng)建,此時(shí)無(wú)法訪問(wèn)到 el 屬性和 data 屬性等..
beforeCreate(){
console.log(`元素:${this.$el}`) //undefined
console.log(`屬性message:${this.message}`) //undefined
console.log(`方法init:${this.init}`) //undefined
}
2.對(duì)data進(jìn)行雙向綁定,初始化方法(Observer Data && init events)
當(dāng)一個(gè) vue 實(shí)例被創(chuàng)建時(shí),他向 Vue 的響應(yīng)式系統(tǒng)中加入了其 data 對(duì)象中能找到的所有屬性.
利用 es5 特性 Object.defineProperty,遍歷 data 對(duì)象下所有屬性,將其轉(zhuǎn)化為 getter/setter,以便攔截對(duì)象賦值與取值操作,然后利用發(fā)布/訂閱者模式,從而實(shí)現(xiàn)數(shù)據(jù)的雙向綁定!
所以只有當(dāng)實(shí)例被創(chuàng)建時(shí) data 中存在的屬性才是響應(yīng)式的!!!!
將methods 下的所有方法進(jìn)行聲明.
將methods下的方法和data下的屬性通過(guò)遍歷和利用 es5 特性 Object.defineProperty代理到實(shí)例下.
this.a = this.$data.a = this.data.a; this.fn = this.$methods.fn = this.methods.fn;3.觸發(fā) created 鉤子函數(shù)
組件實(shí)例創(chuàng)建完成,屬性已綁定,但 DOM 還未生成,$el 屬性還不存在!
created(){
console.log(`元素:${this.$el}`) //undefined
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
4.將模板編譯成函數(shù) (compile template into render function)
將模板 template 編譯成 AST 樹(shù)、render 函數(shù)(new Watch 將模板與數(shù)據(jù)建立聯(lián)系)以及 staticRenderFns 函數(shù)(通過(guò) diff 算法優(yōu)化 dom 更新);
運(yùn)行 render 方法,返回一個(gè) vnode 對(duì)象(virtual dom)
模板編譯/掛載之前
beforeMount(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //{{message}} ,我們發(fā)現(xiàn)此時(shí)的el還未對(duì)數(shù)據(jù)進(jìn)行渲染.(虛擬dom的內(nèi)容)
}
6. 觸發(fā) mounted 鉤子函數(shù)
模板編譯/掛載之后
mounted(){
console.log(`元素:${(this.$el)}`)
console.log(this.$el) //{{hello,vue-lifePeriod!}} ,已將數(shù)據(jù)渲染到真實(shí)dom
}
我們這時(shí)將 app.message 改變?yōu)?hey,vue-lifePeriod";
7.觸發(fā) beforeUpdate 鉤子函數(shù)
組件更新之前
beforeUpdate(){
console.log(this.$el.innerHTML); //hello,vue-lifePeriod ,此時(shí),元素的真實(shí)dom內(nèi)容還未改變.
}
8.重新渲染虛擬 dom,并通過(guò) diff 算法對(duì)比 vnode 節(jié)點(diǎn)差異更新真實(shí) dom (virtual DOM re-render and patch)
9.觸發(fā) updated 鉤子函數(shù)
組件更新之后
updated(){
console.log(this.$el.innerHTML); //hey,vue-lifePeriod ,此時(shí),元素的真實(shí)dom內(nèi)容已經(jīng)改變.
}
我們這時(shí)調(diào)用 app.$destroy()函數(shù)對(duì)組件進(jìn)行銷(xiāo)毀
10.觸發(fā) beforeDestroy 鉤子函數(shù)
組件銷(xiāo)毀之前
beforeDestroy(){
console.log(this.$el) //{{hey,vue-lifePeriod!}}
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
11. 銷(xiāo)毀數(shù)據(jù)監(jiān)聽(tīng),子組件和解除事件監(jiān)聽(tīng)!
12. 觸發(fā) destroyed鉤子函數(shù)
組件銷(xiāo)毀之后
destroyed(){
console.log(this.$el) //{{hey,vue-lifePeriod!}}
console.log(`屬性message:${this.message}`) //message:hey,vue-lifePeriod!
console.log(`方法init:${this.init}`) //function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}
}
實(shí)例銷(xiāo)毀后雖然 dom 和屬性方法都還存在,但改變他們都將不再生效!
app.message = "hu,vue-lifePeriod";
console.log(app.message) //hey,vue-lifePeriod
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92484.html
摘要：實(shí)例在文檔中經(jīng)常會(huì)使用這個(gè)變量名表示實(shí)例，在實(shí)例化時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。通俗說(shuō)就是實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是生命周期。 Vue 實(shí)例中的生命周期鉤子 Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁(yè)面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程...
摘要：注意看下此時(shí)還是沒(méi)有選項(xiàng)鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。 首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程,這個(gè)過(guò)程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會(huì)很熟悉： showImg(https://segmentfau...
摘要：和下面手動(dòng)調(diào)用在控制臺(tái)中輸入在這個(gè)階段會(huì)銷(xiāo)毀實(shí)例，生命周期結(jié)束。外部實(shí)例中的函數(shù)顯示的效果參考鏈接組件的生命周期詳解生命周期 為什么要認(rèn)識(shí)Vue的生命周期 Vue的生命周期是一個(gè)非常重要的點(diǎn)，如果不懂Vue的生命周期，那么很多時(shí)候，就不知道Vue的實(shí)際渲染時(shí)機(jī)，程序中會(huì)出現(xiàn)各種bug。 因此，學(xué)習(xí)Vue的生命周期是非常用必要的。 showImg(https://segmentfault...
摘要：的鉤子函數(shù)會(huì)在組件停用時(shí)被調(diào)用。是在構(gòu)造函數(shù)中的聲明的變量執(zhí)行鉤子函數(shù)執(zhí)行執(zhí)行鉤子函數(shù)執(zhí)行鉤子函數(shù)刷新前根據(jù)對(duì)中的進(jìn)行排序。 Vue 生命周期詳解 Vue 生命周期流程 最開(kāi)始，用戶使用 new Vue() 創(chuàng)建根 Vue 實(shí)例，或者 Vue 實(shí)例化子組件都會(huì)調(diào)用_init方法（我們將這兩種實(shí)例都稱(chēng)為vm）： function Vue(options) { //Vue 構(gòu)...
閱讀 2475·2021-11-16 11:52
閱讀 2399·2021-11-11 16:55
閱讀 832·2021-09-02 15:41
閱讀 3055·2019-08-30 15:54
閱讀 3216·2019-08-30 15:54
閱讀 2321·2019-08-29 15:39
閱讀 1629·2019-08-29 15:18
閱讀 1050·2019-08-29 13:00
