小編給大家分享一下Vue生命周期函數(shù)有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為延平企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計，延平網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

1.BeforeCreate（）

Vue實例已經(jīng)創(chuàng)建，但是data，和methods中的數(shù)據(jù)和方法都未被初始化。就是說你可以在beforeCreated（）{}中獲取到this，this指的是當(dāng)前的Vue實例或者組件，但是this.data，this.method都是獲取不到的。

2.Created（）

Vue中data和method都已經(jīng)初始化好。一般在此鉤子函數(shù)中進(jìn)行數(shù)據(jù)的初始化。

在此階段后和BeforeMounte之前執(zhí)行了render函數(shù)。Vue將代碼渲染成內(nèi)存中的DOM，也就是虛擬DOM。尚未掛載到頁面中。

在此之后在beforeMount之前，Vue構(gòu)造函數(shù)會檢查配置項中有無el屬性。如果有則替換html文檔中的節(jié)點。再判斷是否指定了template選項，如果有則將template替換節(jié)點，如果沒有則依然是用el替換節(jié)點。

3.BeforeMount（）

函數(shù)中，頁面中是沒有被虛擬dom替換之前的dom

打個栗子

let vm = new Vue({
        el: '#app',
        data: {
            message: 'wxs',
            arr:[1,2,3],
            obj:{
                name:'wxs',
                age:21
            }
        },
        beforeMount(){
            console.log(document.querySelector("#app"))
        },
        mounted(){
            console.log(document.querySelector("#app"))
        },
        methods:{
        },
        watch:{
        },
        template: `<p id="app"><p>{{message}}</p><p>{{arr[0]}}</p><p>{{obj.name}}</p><button>改變!</button></p>`,
    })

再看打印結(jié)果

4.Mounted（）

頁面顯示的是已經(jīng)被替換之后的元素。

以上是Vue組件創(chuàng)建期間的鉤子函數(shù)

以下是組件運行期間的鉤子函數(shù)。

5.beforeUpdate()

觸發(fā)此鉤子函數(shù)的方法就是data中的值發(fā)生改變。在此鉤子函數(shù)中還能拿到更新之前的值。

在此鉤子函數(shù)中，界面還沒有被更新，但是data值已經(jīng)更新。（總結(jié)：舊頁面，新數(shù)據(jù)）

在beforeupdate之后和update之前Vue在內(nèi)存中偷偷執(zhí)行了Virtual Dom的重新渲染和掛載。

6.update（）

在此鉤子中能拿到新界面的值，和新的數(shù)據(jù)值。（總結(jié)：新界面，新數(shù)據(jù)）

測試代碼及截圖

let comp = {
        template: "<p><p>{{msg}}</p>  <button ref='btn' @click='change'>改變了</button></p>",
        data() {
            return {
                msg: '初始文字'
            }
        },
        methods: {
            change: function () {
                this.msg = '改變了'
            }
        },
        beforeUpdate() {
            console.log(document.getElementById('app').innerHTML)
            
        },
        updated(){
            console.log(document.getElementById('app').innerHTML)
        }
    }
    let vm = new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            comp
        },
    })

接下來就是銷毀階段

7.beforedestroy（）

進(jìn)入到實例銷毀階段。實例中的所有數(shù)據(jù)和方法依舊可用。

8.destroyed（）

函數(shù)實例已經(jīng)銷毀，所有數(shù)據(jù)和方法均不可用。

看完了這篇文章，相信你對“Vue生命周期函數(shù)有哪些”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：Vue生命周期函數(shù)有哪些
轉(zhuǎn)載注明：http://www.aaarwkj.com/article22/gppejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、定制網(wǎng)站、虛擬主機(jī)、靜態(tài)網(wǎng)站、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)