【vue生命週期】- 詳解

時間 2019-12-06

標籤 vue生命週期詳解简体版

原文原文鏈接

這篇文章通俗易懂，寫的不錯，本文轉載至：https://www.cnblogs.com/happ0/p/8075562.htmlhtml

詳解Vue Lifecycle

先來看看vue官網對vue生命週期的介紹vue

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

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

實例、組件經過new Vue() 建立出來以後會初始化事件和生命週期，而後就會執行beforeCreate鉤子函數，這個時候，數據尚未掛載呢，只是一個空殼，沒法訪問到數據和真實的dom，通常不作操做dom
掛載數據，綁定事件等等，而後執行created函數，這個時候已經可使用到數據，也能夠更改數據,在這裏更改數據不會觸發updated函數，在這裏能夠在渲染前倒數第二次更改數據的機會，不會觸發其餘的鉤子函數，通常能夠在這裏作初始數據的獲取函數
接下來開始找實例或者組件對應的模板，編譯模板爲虛擬dom放入到render函數中準備渲染，而後執行beforeMount鉤子函數，在這個函數中虛擬dom已經建立完成，立刻就要渲染,在這裏也能夠更改數據，不會觸發updated，在這裏能夠在渲染前最後一次更改數據的機會，不會觸發其餘的鉤子函數，通常能夠在這裏作初始數據的獲取ui
接下來開始render，渲染出真實dom，而後執行mounted鉤子函數，此時，組件已經出如今頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，能夠在這裏操做真實dom等事情...this
當組件或實例的數據更改以後，會當即執行beforeUpdate，而後vue的虛擬dom機制會從新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比以後從新渲染，通常不作什麼事兒spa
當更新完成後，執行updated，數據已經更改完成，dom也從新render完成，能夠操做更新後的虛擬domcode
當通過某種途徑調用$destroy方法後，當即執行beforeDestroy，通常在這裏作一些善後工做，例如清除計時器、清除非指令綁定的事件等等
組件的數據綁定、監聽...去掉後只剩下dom空殼，這個時候，執行destroyed，在這裏作善後工做也能夠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <aaa></aaa>
    </div>

    
    <template id="aaa">
        <div>
            <p class="myp">A組件</p>
            <button @click="destroy">destroy</button>
            <input type="text" v-model="msg">
            <p>msg:{{msg}}</p>
        </div>
    </template>



</body>
<script src="./vue.js"></script>

<script>
    //生命週期：初始化階段 運行中階段 銷燬階段
    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空殼，這裏也能夠善後')
        }
    })


    
    new Vue({
    }).$mount('#app')


</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。