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

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

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

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

beforeCreat() 創(chuàng)建前

created（）創(chuàng)建

beforeMount()掛載前

mounted（）掛載

beforeupdate（）更改前

updated（）更改

beforeDestroy()銷毀前

destroyed（）銷毀

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

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

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

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

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

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

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

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

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

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

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

這個生命周期可以進行axios請求 但是這個時候頁面還沒有被渲染出來 如果請求時間過長的話 會出現(xiàn)長時間的白屏

加loading可能會用戶體驗好一些

這個生命周期如上圖所示 他會把template模板編譯成html 還有執(zhí)行render函數(shù)，返回一個虛擬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

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

來看一下這個虛擬dom

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

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

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

打印不出任何東西

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

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

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

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

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

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

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

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

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

因為之前我拿值什么的都是用的watch 但是vue并不推薦用 原因說是很耗費資源 不算計算屬性的話 這個updated 可以說是很方便了

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

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

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

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

這兩個生命周期 用到的比較少 顧名思義 銷毀前這個生命周期 的時候 還是可以對元素進行操作的

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

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

上邊講了單個實例的生命周期，但是我們在平時用到的 肯定不會是一個組件， 那么父子組件 或者兄弟組件的生命周期又是什么樣的

直接來一張圖

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

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

再來看一下update

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

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

銷毀也是這個順序 就不一一上圖了

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

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

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

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

以上是對vue生命周期的理解 可能有不足之處 希望大家批評指正