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

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

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

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

推薦度：

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

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

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

【推薦課程：Vue教程】

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

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

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

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

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

1、生成一個Vue實例，執行鉤子函數beforeCreate()。【實例創建前】

2、對實例進行初始化。

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

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

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

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

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

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

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

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

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

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

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

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

一個實例在創建階段和銷毀階段的六個鉤子函數是永遠執行一次的。執行過去了，就不會再次執行了。

在圖中提到：在Vue的生命周期執行完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>

結果如圖：