Vue3 _ 11. Vue 生命周期 生命周期狗子
我們在學習 Servlet 的時候有說過 Servlet 的生命周期，其實 Vue 也是有生命周期的。伴隨著生命周期，還有很多的鉤子，鉤子就是在某個階段給你一個做某些處理的機會。
一、生命周期介紹
1. new Vue()
我們第一步是創建 Vue 實例，創建實例的同時，還會初始化事件 & 生命周期。
在這里我們會接觸到第一個鉤子：beforeCreate。
我們可以在這個鉤子里面做一些頁面攔截：當進一個路由的時候我們可以判斷是否有權限進去，是否安全進去，攜帶參數是否完整，參數是否安全。使用這個鉤子好函數的時候就避免了讓頁面去判斷，省掉了創建一個組建Vue實例。
除去攔截，還可以做自定義重定向。當路由還沒有進去時我們判斷是否正確進去，若不正確進去可以重定向到指定的頁面。
2. 初始化注入 & 響應性
執行完成上面的 beforeCreate 鉤子之后，就到了下一步，初始化注入 & 響應性，這個主要是加載組件（我們后面學 cli 的時候會說組件），還有就是響應（詳細可以看：https://cn.vuejs.org/v2/guide/reactivity.html）
之后，注入完成會執行 created 鉤子函數，我們可以在這個鉤子上初始化一些數據，可以通過 ajax 進行調用一些請求拿到數據進行綁定。
3. 編譯模板
Vue 會判斷是否有模板的存在，如果有，就進行編譯模板，然后進行模版和數據結合掛載，如果沒有，直接編輯 el 所綁定的 innerHTML，接著進行模板和數據結合掛載。（模版和數據結合掛載頁面沒有渲染）
之后，就會執行 beforeMount 鉤子函數。這個鉤子函數可以更改一些數據。
4. 掛載
?上面的模板和數據結合之后，我們接下來就是要將這個掛載到頁面上了。
在頁面掛載完成前，我們還有一個鉤子函數，就是 mounted 鉤子，而這個鉤子在一個 Vue 實例里，只會被調用一次。
執行完 mounted 之后，我們的整個 Vue 就掛載完成了。
接著每當數據發生變化的時候，先執行 beforeUpdate 鉤子，然后虛擬 DOM 從新渲染更新，更新之后，再執行 updated 鉤子，以此往復。
5. 銷毀
當我們這個 Vue 實例不用了之后，這個需要進行銷毀，組件銷毀我們需要調用 unmount() 方法，調用了之后，我們在調用 unmount() 之前還有一個鉤子函數，beforeUnmount 鉤子。
調用完 unmount() 函數后，還有一個鉤子函數，就是 unmounted 。
也就是說我們調用的過程是：beforeUnmount 鉤子執行后執行 unmount 方法，執行完成 unmount 方法之后，再執行 unmounted 鉤子。
unmount 方法做的事情，就是執行組件自身的一些清理邏輯、遞歸銷毀子組件，進而把組件下面所有的 DOM 也全部移除了。
因此，當我們執行的 beforeUnmount 的時候，還是可以訪問組件內部的 DOM 的，如果你的代碼邏輯依賴 DOM，那么就必須在 beforeUnmount 鉤子函數中執行。
此外，Vue.js 只能在 unmount 函數中做一些組件自身的內存清理，而對于用戶的一些自定義操作所占用的內存，是不會清理的。
?我們可以在 beforeUnmount 鉤子中可以清除定時器、全局注冊事件等。在 unmounted 鉤子中除去可以額清除定時器，全局注冊，還可以清理第三方庫的一些調用。
具體怎么用，用在那里，是需要看有沒有依賴 DOM。
二、生命周期鉤子使用
我們自己寫一個案例來感受一下生命周期鉤子。
<body><div id="app"><button @click="countNum += 1">點擊 + 1</button><span>{{countNum}}</span><button @click="destroyVue()">銷毀</button></div><script src="vuejs/vue2.js"></script> <script>let vm = new Vue({el: '#app',data: {countNum: 0},methods: {destroyVue(){vm.$destroy();}},beforeCreate() {console.log("beforeCreate 被調用");console.log("beforeCreate 中獲取 countNum " + this.countNum);},created() {console.log("create 被調用");console.log("create 中獲取 countNum " + this.countNum);},beforeMount() {console.log("beforeMount 被調用");console.log("beforeMount 中獲取 countNum " + this.countNum);},mounted() { // 調用一次console.log("mounted 被調用");console.log("mounted 中獲取 countNum " + this.countNum);},beforeDestroy(){ // 調用一次console.log("beforeUnmount 被調用");console.log("beforeUnmount 中獲取 countNum " + this.countNum);},destroyed(){console.log("unmounted 被調用");console.log("unmounted 中獲取 countNum " + this.countNum);},beforeUpdate(){console.log("beforeUpload 被調用");console.log("beforeUpload 中獲取 countNum " + this.countNum);},updated() {console.log("updated 被調用");console.log("updated 中獲取 countNum " + this.countNum);}}); </script> </body>運行圖：
可以看到，在調用 beforeCreate 是最先被調用的生命周期鉤子，這個鉤子還沒有辦法獲取 data 中的數據，而在后面 create 鉤子被調用的時候，data 中的數據就被加載出來了。
然后我們點擊 “點擊 + 1” 這個按鈕。點個兩三次
可以看到，每點擊一次的，我們就會觸發?beforeUpdate 和 updated 鉤子。
然后我們點擊銷毀。點擊完銷毀之后，我們再來點擊 “點擊 + 1” 按鈕。
可以發現，再也沒有辦法 +1 了，這里是因為整個 Vue 實例已經被銷毀了~~
?
這一篇東西不多，大家仔細理解一下~~
有問題可以聯系我：QQ 2100363119，歡迎大家訪問我的個人網站：https://www.lemon1234.com
最近網站已經做好，并且已經上線，歡迎各位留言~~~
總結
以上是生活随笔為你收集整理的Vue3 _ 11. Vue 生命周期 生命周期狗子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gis与计算机科学之间的联系,GIS与地
- 下一篇： Vue 删除列表项的淡出动画