如何理解vue中的生命周期（钩子函数）
【推薦課程：Vue教程】
Vue的生命周期指的是什么？
Vue的生命周期通俗來講就是我們用Vue寫的網頁在瀏覽器運行起來之后，我們寫的代碼要在內存里執(zhí)行。例如我們都會寫的var vm = new Vue();，就是new出來了一個Vue 實例。這個實例從創(chuàng)建一直到我們關掉瀏覽器這個實例消亡，這一段時間里，Vue這個框架干了啥，Vue的實例做了啥，先做啥，后做啥，這一系列事情的關系是怎樣的，這就是Vue的生命周期。
Vue的生命周期分三個階段：創(chuàng)建階段，運行階段，銷毀階段。
在圖中，我對生命周期各個部分進行了標注并做了一些必要的解釋。
流程解釋（12步對應圖中操作）：
1、生成一個Vue實例，執(zhí)行鉤子函數beforeCreate()。【實例創(chuàng)建前】
2、對實例進行初始化。
3、把實例成員掛載到view model身上,執(zhí)行鉤子函數created()。【實例創(chuàng)建后】
4、判斷有無el對象【el對象用來指明我們控制的視圖是那一區(qū)域】。
5、如果有el對象，判斷是否使用了模板。
6、如果使用了模板，則按照編譯模板的方法去做，如果沒有則把el控制的視圖區(qū)域當做模板來渲染。執(zhí)行鉤子函數beforeMount()。【實例掛載前】
7、把經過更改的新的el視圖區(qū)域，替換掉原來的el視圖區(qū)域。執(zhí)行鉤子函數Mounted()【實例掛載后】。
8、進入運行階段，運行階段就是進行一些操作了，執(zhí)行鉤子函數beforeUpdate()。【數據更新前】
9、操作完畢之后，把這些數據渲染到頁面上，執(zhí)行鉤子函數updated()。【數據更新后】
10、進入銷毀階段，執(zhí)行鉤子函數beforeDestroy()【實例銷毀前】
11、進行銷毀，拆卸監(jiān)視器、子組件和事件偵聽器。
12、銷毀完成，執(zhí)行鉤子函數destroyed()。【實例銷毀后】
-
生命周期中的鉤子函數是Vue在它生命周期中必須要執(zhí)行到的事件，這些事件其實就是函數。
-
當然這些事件是允許我們程序員來編寫代碼的，以此當Vue的生命周期走到這里時，來進行我們想要的操作。
-
一個實例在創(chuàng)建階段和銷毀階段的六個鉤子函數是永遠執(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>
登錄后復制
結果如圖：
可以看到在beforeCreate()的時候，我們輸出的是undefined，而在 created()后就輸出了msg的值。
這說明在Vue的實例成員是在created之后，才掛載到了我們的vm身上,所以在created之后再訪問就能訪問到我們的實例成員了。
以上就是如何理解vue中的生命周期（鉤子函數）的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的如何理解vue中的生命周期（钩子函数）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： magic是什么系统(Magic的博客)
- 下一篇： 小米手机回收站恢复的照片在哪里(小米科技