vue中生命周期指的是什么

發(fā)布時(shí)間：2020-08-26 10:35:49 來源：億速云閱讀：261 作者：小新欄目：web開發(fā)

這篇文章主要介紹vue中生命周期指的是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

Vue生命周期（鉤子函數(shù)）表示的是一個(gè)實(shí)例從開始創(chuàng)建到消亡的過程。Vue的生命周期共分為三個(gè)階段分別是創(chuàng)建階段，運(yùn)行階段以及銷毀階段

vue中生命周期指的是什么

Vue的生命周期指的是什么？

Vue的生命周期通俗來講就是我們用Vue寫的網(wǎng)頁在瀏覽器運(yùn)行起來之后，我們寫的代碼要在內(nèi)存里執(zhí)行。例如我們都會(huì)寫的var vm = new Vue();，就是new出來了一個(gè)Vue 實(shí)例。這個(gè)實(shí)例從創(chuàng)建一直到我們關(guān)掉瀏覽器這個(gè)實(shí)例消亡，這一段時(shí)間里，Vue這個(gè)框架干了啥，Vue的實(shí)例做了啥，先做啥，后做啥，這一系列事情的關(guān)系是怎樣的，這就是Vue的生命周期。

Vue的生命周期分三個(gè)階段：創(chuàng)建階段，運(yùn)行階段，銷毀階段。

在圖中，我對(duì)生命周期各個(gè)部分進(jìn)行了標(biāo)注并做了一些必要的解釋。

vue中生命周期指的是什么

流程解釋（12步對(duì)應(yīng)圖中操作）：

1、生成一個(gè)Vue實(shí)例，執(zhí)行鉤子函數(shù)beforeCreate()?！緦?shí)例創(chuàng)建前】

2、對(duì)實(shí)例進(jìn)行初始化。

3、把實(shí)例成員掛載到view model身上,執(zhí)行鉤子函數(shù)created()。【實(shí)例創(chuàng)建后】

4、判斷有無el對(duì)象【el對(duì)象用來指明我們控制的視圖是那一區(qū)域】。

5、如果有el對(duì)象，判斷是否使用了模板。

6、如果使用了模板，則按照編譯模板的方法去做，如果沒有則把el控制的視圖區(qū)域當(dāng)做模板來渲染。執(zhí)行鉤子函數(shù)beforeMount()?！緦?shí)例掛載前】

7、把經(jīng)過更改的新的el視圖區(qū)域，替換掉原來的el視圖區(qū)域。執(zhí)行鉤子函數(shù)Mounted()【實(shí)例掛載后】。

8、進(jìn)入運(yùn)行階段，運(yùn)行階段就是進(jìn)行一些操作了，執(zhí)行鉤子函數(shù)beforeUpdate()?！緮?shù)據(jù)更新前】

9、操作完畢之后，把這些數(shù)據(jù)渲染到頁面上，執(zhí)行鉤子函數(shù)updated()。【數(shù)據(jù)更新后】

10、進(jìn)入銷毀階段，執(zhí)行鉤子函數(shù)beforeDestroy()【實(shí)例銷毀前】

11、進(jìn)行銷毀，拆卸監(jiān)視器、子組件和事件偵聽器。

12、銷毀完成，執(zhí)行鉤子函數(shù)destroyed()?！緦?shí)例銷毀后】

生命周期中的鉤子函數(shù)是Vue在它生命周期中必須要執(zhí)行到的事件，這些事件其實(shí)就是函數(shù)。
當(dāng)然這些事件是允許我們程序員來編寫代碼的，以此當(dāng)Vue的生命周期走到這里時(shí)，來進(jìn)行我們想要的操作。
一個(gè)實(shí)例在創(chuàng)建階段和銷毀階段的六個(gè)鉤子函數(shù)是永遠(yuǎn)執(zhí)行一次的。執(zhí)行過去了，就不會(huì)再次執(zhí)行了。

在圖中提到：在Vue的生命周期執(zhí)行完init Events之后我們才能訪問我們定義的實(shí)例成員，并且這個(gè)點(diǎn)也是最早可以訪問到實(shí)例成員的點(diǎn)，為了驗(yàn)證這個(gè)，我們看一段代碼。

<body>
    <div id="app"></div>
    //這里的路徑為本機(jī)上的vue.js路徑
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : '我是初始值'
            },
            methods : {
                show : function(){
                    console.log(this.msg);
                }
            },
            beforeCreate(){
                console.log(this.msg);
            },
            created(){
                console.log(this.msg);
            }
        });
    </script>
</body>

結(jié)果如圖：

vue中生命周期指的是什么

可以看到在beforeCreate()的時(shí)候，我們輸出的是undefined，而在 created()后就輸出了msg的值。

這說明在Vue的實(shí)例成員是在created之后，才掛載到了我們的vm身上,所以在created之后再訪問就能訪問到我們的實(shí)例成員了。

以上是vue中生命周期指的是什么的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue中生命周期指的是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽