如何理解vue中的生命周期（鉤子函數(shù)）

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 19:26:41

如何理解vue中的生命周期（鉤子函數(shù)）

如何理解vue中的生命周期（鉤子函數(shù)）:Vue生命周期（鉤子函數(shù)）表示的是一個實例從開始創(chuàng)建到消亡的過程。Vue的生命周期共分為三個階段分別是創(chuàng)建階段，運行階段以及銷毀階段【推薦課程：Vue教程】Vue的生命周期指的是什么？Vue的生命周期通俗來講就是我們用Vue寫的網(wǎng)頁在瀏覽器運行起來之后，我們

推薦度：

點擊下載本文 文檔為doc格式

導讀如何理解vue中的生命周期（鉤子函數(shù)）:Vue生命周期（鉤子函數(shù)）表示的是一個實例從開始創(chuàng)建到消亡的過程。Vue的生命周期共分為三個階段分別是創(chuàng)建階段，運行階段以及銷毀階段【推薦課程：Vue教程】Vue的生命周期指的是什么？Vue的生命周期通俗來講就是我們用Vue寫的網(wǎng)頁在瀏覽器運行起來之后，我們

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

【推薦課程：Vue教程】

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

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

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

在圖中，我對生命周期各個部分進行了標注并做了一些必要的解釋。

流程解釋（12步對應圖中操作）：

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

2、對實例進行初始化。

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

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

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

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

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

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

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

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

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

12、銷毀完成，執(zhí)行鉤子函數(shù)destroyed()。【實例銷毀后】

生命周期中的鉤子函數(shù)是Vue在它生命周期中必須要執(zhí)行到的事件，這些事件其實就是函數(shù)。

當然這些事件是允許我們程序員來編寫代碼的，以此當Vue的生命周期走到這里時，來進行我們想要的操作。

一個實例在創(chuàng)建階段和銷毀階段的六個鉤子函數(shù)是永遠執(zhí)行一次的。執(zhí)行過去了，就不會再次執(zhí)行了。

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

<body>
 <div id="app"></div>
 //這里的路徑為本機上的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>

結果如圖：