Vue生命周期和詳細的執行過程

1、beforeCreate

　　在實例初始化之后，數據觀測和event/watcher時間配置之前被調用。 
　　 
2、created

　　實例已經創建完成之后被調用。在這一步，實例已經完成以下的配置：數據觀測，屬性和方法的運算，watch/event事件回調。然而，掛載階段還沒開始，$el屬性目前不可見。 
　　 
3、beforeMount

　　在掛載開始之前被調用：相關的render函數首次被調用。 
　　該鈎子在服務器端渲染期間不被調用。 
　　 
4、mounted

el被新創建的 vm.$el替換，並掛在到實例上去之后調用該鈎子函數。如果root實例掛載了一個文檔內元素，當mounted被調用時vm.$el也在文檔內。該鈎子在服務端渲染期間不被調用。 
　　 
5、beforeUpdate

　　數據更新時調用，發生在虛擬DOM重新渲染和打補丁之前。 
　　你可以在這個鈎子中進一步第更改狀態，這不會觸發附加的重渲染過程。 
　　該鈎子在服務端渲染期間不被調用。 
　　 
6、updated

　　由於數據更改導致的虛擬DOM重新渲染和打補丁，在這之后會調用該鈎子。 
　　當這個鈎子被調用時，組件DOM已經更新，所以你現在可以執行依賴於DOM的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。 
　　該鈎子在服務端渲染期間不被調用。 
　　 
7、activated

　　keep-alive組件激活時調用。 
　　該鈎子在服務器端渲染期間不被調用。 
　　 
8、deactivated

　　keep-alive組件停用時調用。 
　　該鈎子在服務端渲染期間不被調用。 
　　 
9、beforeDestroy 【類似於React生命周期的componentWillUnmount】

　　實例銷毀之間調用。在這一步，實例仍然完全可用。 
　　該鈎子在服務端渲染期間不被調用。 
　　 
10、destroyed

　　Vue實例銷毀后調用。調用后，Vue實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
 

 

將路由導航、keep-alive、和組件生命周期鈎子結合起來的，觸發順序，假設是從a組件離開，第一次進入b組件：

1- beforeRouteLeave:路由組件的組件離開路由前鈎子，可取消路由離開。

2- beforeEach: 路由全局前置守衛，可用於登錄驗證、全局路由loading等。

3- beforeEnter: 路由獨享守衛

4- beforeRouteEnter: 路由組件的組件進入路由前鈎子。

5- beforeResolve:路由全局解析守衛

6- afterEach:路由全局后置鈎子

7- beforeCreate:組件生命周期，不能訪問this。

8- created:組件生命周期，可以訪問this，不能訪問dom。

9- beforeMount:組件生命周期

10- deactivated: 離開緩存組件a，或者觸發a的beforeDestroy和destroyed組件銷毀鈎子。

11- mounted:訪問/操作dom。

12- activated:進入緩存組件，進入a的嵌套子組件(如果有的話)。

13- 執行beforeRouteEnter回調函數next。
 

 

 

Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。

每一個組件或者實例都會經歷一個完整的生命周期，總共分為三個階段：初始化、運行中、銷毀。

1. 實例、組件通過new Vue() 創建出來之后會初始化事件和生命周期，然后就會執行beforeCreate鈎子函數，這個時候，數據還沒有掛載呢，只是一個空殼，無法訪問到數據和真實的dom，一般不做操作

2. 掛載數據，綁定事件等等，然后執行created函數，這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數，在這里可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鈎子函數，一般可以在這里做初始數據的獲取

3. 接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數中准備渲染，然后執行beforeMount鈎子函數，在這個函數中虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated，在這里可以在渲染前最后一次更改數據的機會，不會觸發其他的鈎子函數，一般可以在這里做初始數據的獲取

4. 接下來開始render，渲染出真實dom，然后執行mounted鈎子函數，此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，可以在這里操作真實dom等事情...

5. 當組件或實例的數據更改之后，會立即執行beforeUpdate，然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染，一般不做什么事兒

6. 當更新完成后，執行updated，數據已經更改完成，dom也重新render完成，可以操作更新后的虛擬dom

7. 當經過某種途徑調用$destroy方法后，立即執行beforeDestroy，一般在這里做一些善后工作，例如清除計時器、清除非指令綁定的事件等等

8. 組件的數據綁定、監聽...去掉后只剩下dom空殼，這個時候，執行destroyed，在這里做善后工作也可以。

 

//生命周期：初始化階段 運行中階段 銷毀階段
    Vue.component("aaa",{
        template:"#aaa",
        data:function(){
            return {msg:'hello'}
        },
        timer:null,
        methods:{
            destroy:function(){
                this.$destroy()//
            }
        },
        beforeCreate:function(){
            console.log('beforeCreate:剛剛new Vue()之后，這個時候，數據還沒有掛載呢，只是一個空殼')           
            console.log(this.msg)//undefined
            console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created:function(){
            console.log('created:這個時候已經可以使用到數據，也可以更改數據,在這里更改數據不會觸發updated函數')
            this.msg+='!!!'
            console.log('在這里可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鈎子函數，一般可以在這里做初始數據的獲取')
            console.log('接下來開始找實例或者組件對應的模板，編譯模板為虛擬dom放入到render函數中准備渲染')
        },
        beforeMount:function(){
            console.log('beforeMount：虛擬dom已經創建完成，馬上就要渲染,在這里也可以更改數據，不會觸發updated')
            this.msg+='@@@@'
            console.log('在這里可以在渲染前最后一次更改數據的機會，不會觸發其他的鈎子函數，一般可以在這里做初始數據的獲取')
            console.log(document.getElementsByClassName("myp")[0])//undefined
            console.log('接下來開始render，渲染出真實dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted:function(){ 
            console.log('mounted：此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了')
            console.log(document.getElementsByClassName("myp")[0])
            console.log('可以在這里操作真實dom等事情...')
 
        //    this.$options.timer = setInterval(function () {
        //        console.log('setInterval')
        //         this.msg+='!'  
        //    }.bind(this),500)
        },
        beforeUpdate:function(){
            //這里不能更改數據，否則會陷入死循環
            console.log('beforeUpdate:重新渲染之前觸發')
            console.log('然后vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染')         
        },
        updated:function(){
            //這里不能更改數據，否則會陷入死循環
            console.log('updated:數據已經更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            console.log('beforeDestory:銷毀前執行（$destroy方法被調用的時候就會執行）,一般在這里善后:清除計時器、清除非指令綁定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            console.log('destroyed:組件的數據綁定、監聽...都去掉了,只剩下dom空殼，這里也可以善后')
        }
    })

 

來源：https://blog.csdn.net/qq_38021852/article/details/88640807