vue生命週期

時間 2019-12-08

標籤 vue 生命週期简体版

原文原文鏈接

接觸Vue兩個月了，今天說一說vue裏邊很重要的生命週期，記得最開始接觸的時候我問了一下週邊的同事，html

這些生命週期都有什麼用，獲得的答案是mounted裏邊能夠操做屬性，你記住mounted就完事了，因而乎。。。vue

數據請求，mounted（）賦值 mounted（），執行方法，mounted（），監聽更新數據？？？搞不動了。。。ios

而後最近仔細的看了一遍Vue的生命週期，今天和你們分享一下我所瞭解的 axios

首先什麼是Vue的生命週期瀏覽器

Vue 實例從開始建立、初始化數據、編譯模板、掛載Dom和渲染、更新和渲染、卸載等一系列過程，這是 Vue 的生命週期dom

vue的生命週期裏邊有八個生命週期鉤子函數分別是函數

beforeCreat() 建立前性能

created（）建立this

beforeMount()掛載前spa

mounted（）掛載

beforeupdate（）更改前

updated（）更改

beforeDestroy()銷燬前

destroyed（）銷燬

先來一張官方的生命週期圖鎮貼

beforeCreate 實例建立前

這個生命週期如上圖所示實例初始化在這個生命週期遍歷 data 對象下全部屬性將其轉化爲 getter/setter

也就是說添加一個被觀察者，因此咱們平時在項目中遇到在後來添加新的屬性視圖不更新就是這個緣由

在後來被添加的屬性，沒有被放到觀察者對象中去可是這個時候數據並無和模板創建連接還不能操做屬性

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

but 你能夠經過$options(實例自定義屬性，屬於數據訪問的一種和$date 平級) 看到data的值注意data是個函數他沒執行因此拿不到數據，用圖來講話

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

那麼若是想在實例掛載完成後添加的屬性觸發視圖更新的話能夠用 $set 這個方法這個方法會向被觀察者對象裏邊新增你的屬性

這時候咱們打印一下組件裏的屬性仍是不存在的

created 實例建立

到這個生命週期的時候實例已經被建立完畢屬性已經綁定屬性是能夠操做的

可是dom還不存在 $el屬性還不能夠操做

這個生命週期能夠進行axios請求可是這個時候頁面尚未被渲染出來若是請求時間過長的話會出現長時間的白屏

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

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

大概就是這麼一大串，剛看到的時候個人第一感受就是真￥%…#…複雜而後出於好奇我打印了一下真實dom

更￥%……%複雜總而言之一屏放不下因此說大批量的操做dom 是很影響性能的一件事情膜拜一下遠方的各位大神

beforeMount 掛載前

從圖上來說這個聲明週期作的是模板編譯，看網上的帖子有人能把$el打印出來不太理解怎麼打印出來的本身試了一下

打印不出任何東西

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

這個生命週期 el還未對數據進行渲染仍是不能操做dom

mounted掛載

這個生命週期是我用的最多的這個時候的虛擬dom已經被渲染到了真實的dom上邊

這個生命週期裏邊咱們能夠作的事情不少好比數據請求或者賦值操做屬性等等

    mounted(){
        console.log('mounted',this.$el,this.pickerMark)
    },


//mounted <div class="propaganda-form" arealistitem="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" style="display: none;"></div> false

以上四個生命週期每一個組件只執行一次，過去了就不會在執行了