摘要：接觸兩個(gè)月了，今天說一說里邊很重要的生命周期，記得最開始接觸的時(shí)候我問了一下周邊的同事，這些生命周期都有什么用，得到的答案是里邊可以操作屬性，你記住就完事了，于是乎。。。

接觸Vue兩個(gè)月了，今天說一說vue里邊很重要的生命周期，記得最開始接觸的時(shí)候我問了一下周邊的同事，
這些生命周期都有什么用，得到的答案是mounted里邊可以操作屬性，你記住mounted就完事了，于是乎。。。
數(shù)據(jù)請(qǐng)求，mounted（） 賦值 mounted（），執(zhí)行方法，mounted（），  監(jiān)聽更新數(shù)據(jù)？？？搞不動(dòng)了。。。
然后最近仔細(xì)的看了一遍Vue的生命周期，今天和大家分享一下我所了解的

Vue 實(shí)例從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom和渲染、更新和渲染、卸載等一系列過程，這是 Vue 的生命周期

vue的生命周期里邊有八個(gè)生命周期鉤子函數(shù)分別是

beforeCreat() 創(chuàng)建前

created（）創(chuàng)建

beforeMount()掛載前

mounted（）掛載

beforeupdate（）更改前

updated（）更改

beforeDestroy()銷毀前

destroyed（）銷毀

先來一張官方的生命周期圖鎮(zhèn)貼

這個(gè)生命周期如上圖所示 實(shí)例初始化在這個(gè)生命周期遍歷 data 對(duì)象下所有屬性將其轉(zhuǎn)化為 getter/setter

也就是說添加一個(gè)被觀察者，所以我們平時(shí)在項(xiàng)目中遇到在后來添加新的屬性視圖不更新就是這個(gè)原因

在后來被添加的屬性，沒有被放到觀察者對(duì)象中去 但是這個(gè)時(shí)候數(shù)據(jù)并沒有和模板建立鏈接 還不能操作屬性

說到這里你可能會(huì)反駁我，打印的全都是undefined，你怕是在逗我

but 你可以通過$options(實(shí)例自定義屬性，屬于數(shù)據(jù)訪問的一種和$date 平級(jí)) 看到data的值 注意data是個(gè)函數(shù) 他沒執(zhí)行 所以拿不到數(shù)據(jù)，用圖來說話

     
    
    data(){
            return{
                a:"1"
            }
        },
        beforeCreate(){
            console.log("beforeCreate",this.$el,this.a)
        },
    //beforeCreate undefined undefined

那么如果想在實(shí)例掛載完成后添加的屬性觸發(fā)視圖更新的話可以用 $set 這個(gè)方法 這個(gè)方法會(huì)向被觀察者對(duì)象里邊新增你的屬性

這時(shí)候我們打印一下組件里的屬性還是不存在的

到這個(gè)生命周期的時(shí)候 實(shí)例已經(jīng)被創(chuàng)建完畢 屬性已經(jīng)綁定 屬性是可以操作的

但是dom還不存在 $el屬性還不可以操作

這個(gè)生命周期可以進(jìn)行axios請(qǐng)求 但是這個(gè)時(shí)候頁(yè)面還沒有被渲染出來 如果請(qǐng)求時(shí)間過長(zhǎng)的話 會(huì)出現(xiàn)長(zhǎng)時(shí)間的白屏

加loading可能會(huì)用戶體驗(yàn)好一些

這個(gè)生命周期如上圖所示 他會(huì)把template模板編譯成html 還有執(zhí)行render函數(shù)，返回一個(gè)虛擬dom 同第一句話 就是說

dom還拿不到

    data(){
            return{
                a:"1"
            }
        },
        beforeCreate(){
            console.log("beforeCreate",this.$el,this.a)
        },
        created(){
            console.log("created",this.$el,this.a)
            this.a=2
            console.log(this.a)
        },
    //created undefined 1
    //2

這個(gè)虛擬Dom接觸的不是太多 簡(jiǎn)單來講就是通過js生成一個(gè)類似于dom樹的那么一個(gè)東西

來看一下這個(gè)虛擬dom

大概就是這么一大串 ，剛看到的時(shí)候我的第一感覺就是 真￥%…#…復(fù)雜 然后出于好奇 我打印了一下真實(shí)dom

更￥%……%復(fù)雜總而言之 一屏放不下 所以說大批量的操作dom 是很影響性能的一件事情 膜拜一下遠(yuǎn)方的各位大神

從圖上來講 這個(gè)聲明周期做的是模板編譯，看網(wǎng)上的帖子有人能把$el打印出來 不太理解怎么打印出來的 自己試了一下

打印不出任何東西

        beforeMount(){
            console.log("beforeMount",this.$el,this.pickerMark)
            debugger
        },
    //beforeMount undefined false

這個(gè)生命周期 el還未對(duì)數(shù)據(jù)進(jìn)行渲染 還是不能操作dom

這個(gè)生命周期 是我用的最多的 這個(gè)時(shí)候的虛擬dom已經(jīng)被渲染到了真實(shí)的dom上邊

這個(gè)生命周期里邊我們可以做的事情很多 比如數(shù)據(jù)請(qǐng)求或者賦值操作屬性等等

        mounted(){
            console.log("mounted",this.$el,this.pickerMark)
        },
    
    
    //mounted 
?
? false

以上四個(gè)生命周期 每個(gè)組件只執(zhí)行一次，過去了就不會(huì)在執(zhí)行了

我們?cè)趍ounted更新一個(gè)屬性的話 beforeUpdate 和 updated 生命周期函數(shù) 會(huì)被觸發(fā) 但是僅限于 被觀察的屬性做出的變化且被引用他們才會(huì)觸發(fā)

而且需要注意的是 不要再updated 函數(shù)里邊直接就修改屬性 會(huì)進(jìn)入死循環(huán) 比如說。。。。

瀏覽器崩潰了。。。。 如果你要用的話 一定要加判斷條件 確保能跳出去的那種，我個(gè)人是很喜歡用updated這個(gè)生命周期函數(shù)的

因?yàn)橹拔夷弥凳裁吹亩际怯玫膚atch 但是vue并不推薦用 原因說是很耗費(fèi)資源 不算計(jì)算屬性的話 這個(gè)updated 可以說是很方便了

但是如果變化的不是響應(yīng)式的值 他就不會(huì)觸發(fā)怎么辦 之前研究過一個(gè)方法分享一下 就是說再date里邊聲明一個(gè)變量當(dāng)作標(biāo)記

然后把這個(gè)變量放到頁(yè)面中 dispaly：none； 然后在你調(diào)用非相應(yīng)的變量的時(shí)候 你在后邊也調(diào)用一下這個(gè)標(biāo)記 updated生命周期函數(shù)

是會(huì)執(zhí)行的 這時(shí)候你可以加一些判斷在update去執(zhí)行一些東西 當(dāng)然 后來認(rèn)識(shí)了計(jì)算屬性 就放棄了這個(gè)做法 計(jì)算屬性是一種聲明式的屬性

他只會(huì)告訴你這個(gè)值是怎么構(gòu)成的 很方便

這兩個(gè)生命周期 用到的比較少 顧名思義 銷毀前這個(gè)生命周期 的時(shí)候 還是可以對(duì)元素進(jìn)行操作的

之前在項(xiàng)目中用到的就是 高級(jí)搜索在銷毀的時(shí)候判斷是否有值 然后返回相應(yīng)的狀態(tài)

銷毀這個(gè)生命周期執(zhí)行過后 實(shí)例的屬性和方法就不能再用了

上邊講了單個(gè)實(shí)例的生命周期，但是我們?cè)谄綍r(shí)用到的 肯定不會(huì)是一個(gè)組件， 那么父子組件 或者兄弟組件的生命周期又是什么樣的

直接來一張圖

上圖可以看到 如果有父子組件的話 會(huì)先從父組件開始 到beforeMount 開始走子組件 到beforeMount 然后是子組件的一堆mounted 最后父組件

還可以看出 兄弟組件的話 是依次到beforeMount 然后按照順序mounted

再來看一下update

有關(guān)聯(lián)的話 他的順序是 父beforeupdate 子beforeupdate 子updated 父updated

父組件沒有關(guān)聯(lián)的話 也不會(huì)觸發(fā)子組件的生命周期

銷毀也是這個(gè)順序 就不一一上圖了

大家 可以理解成遞歸 感覺就是遞歸 ，那么如果遞歸的話 就存在一個(gè)作用域的問題 混入的時(shí)候 又是什么樣的

大家都知道混入的時(shí)候組件里邊屬性和方法 會(huì)優(yōu)先使用 但是生命周期是都會(huì)走的 相比大家猜也都猜到了

既然組件里邊有方法的話會(huì)用組件的 那么混入必然是最外層的 剛才證實(shí)了一下想法 確實(shí)是這樣

混入的生命周期的話 會(huì)在每個(gè)聲明周期的最前邊 所有的生命周期 都會(huì)優(yōu)先執(zhí)行

以上是對(duì)vue生命周期的理解 可能有不足之處 希望大家批評(píng)指正