五十七、Vue中的八大生命周期函数
@Author：Runsen
@Date：2020/10/15
什么是vue生命周期
Vue 實例從創建到銷毀的過程，就是生命周期。也就是從開始創建、初始化數據、編譯模板、掛載DOM-渲染、更新-渲染、卸載等一系列的過程，我們稱這是 Vue 的生命周期。
第一次頁面加載會觸發拿幾個生命周期
第一次頁面加載會觸發beforeCreate ， created， beforeMount，mounted 這四個鉤子.
具體案例
下面是vue生命周期具體案例
<body><div id="app">Hello World </div><script>// vue生命周期函數就是vue實例在某一個時間點會自動執行的函數var vm = new Vue({el: "#app",template : "<div>{{value}}</div>",data:{value : "test"},// 當Vue對象創建之前觸發的函數beforeCreate:function(){console.log("beforeCreate")},// Vue對象創建完成觸發的函數created:function(){console.log("created")},// 當Vue對象開始掛載數據的時候觸發的函數beforeMount:function() {console.log(this.$el) //<div id="app">Hello World</div>console.log("beforeMount")},// 當Vue對象掛載數據的完成的時候觸發的函數mounted:function() {console.log(this.$el) //<div>{{test}}</div>console.log("mounted")},// Vue對象銷毀之前觸發的函數// 當在控制臺執行vm.$destroy()即可觸發beforeDestroy:function() {console.log("beforeDestroy")},// Vue對象銷毀完成觸發的函數destroyed:function() {console.log("destroyed")},// Vue對象中的data數據發生改變之前觸發的函數// 當在控制臺執行vm.$data.value 改變value即可觸發beforeUpdate() {console.log("beforeUpdate") },// Vue對象中的data數據發生改變完成觸發的函數updated() {console.log("updated")},})</script> </body>vue生命周期的作用是什么
Vue 所有的功能的實現都是圍繞其生命周期進行的，在生命周期的不同階段調用對應的鉤子函數可以實現組件數據管理和DOM渲染兩大重要功能。
每個生命周期具體適合哪些場景
beforeCreate
beforeCreate：創建前，此階段為實例初始化之后，this指向創建的實例，此時的數據觀察事件機制都未形成，不能獲得DOM節點。data，computed，watch，methods 上的方法和數據均不能訪問。
可以在這加個loading事件。
created
created：創建后，此階段為實例已經創建，完成數據（data、props、computed）的初始化導入依賴項。
可訪問 data computed watch methods 上的方法和數據。
初始化完成時的事件寫在這里，異步請求也適宜在這里調用（請求不宜過多，避免白屏時間太長）。
可以在這里結束loading事件，還做一些初始化，實現函數自執行。
未掛載DOM，若在此階段進行DOM操作一定要放在Vue.nextTick()的回調函數中。
beforeMount
beforeMount：掛載前，雖然得不到具體的DOM元素，但vue掛載的根節點已經創建，下面vue對DOM的操作將圍繞這個根元素繼續進行。
beforeMount這個階段是過渡性的，一般一個項目只能用到一兩次。
mounted
mounted：掛載，完成創建vm.$el，和雙向綁定
完成掛載DOM和渲染，可在mounted鉤子函數中對掛載的DOM進行操作。
可在這發起后端請求，拿回數據，配合路由鉤子做一些事情。
beforeUpdate
beforeUpdate：數據更新前，數據驅動DOM。
在數據更新后雖然沒有立即更新數據，但是DOM中的數據會改變，這是vue雙向數據綁定的作用。
可在更新前訪問現有的DOM，如手動移出添加的事件監聽器。
updated
updated：數據更新后，完成虛擬DOM的重新渲染和打補丁。
組件DOM已完成更新，可執行依賴的DOM操作。
注意：不要在此函數中操作數據（修改屬性），會陷入死循環。
activated
activated：在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態，這個時候created鉤子就不會被重復調用了。
如果我們的子組件需要在每次加載的時候進行某些操作，可以使用activated鉤子觸發。
deactivated
deactivated：<keep-alive></keep-alive>組件被移除時使用。
beforeDestroy
beforeDestroy：銷毀前，
可做一些刪除提示，如：您確定刪除xx嗎？
destroyed
destroyed：銷毀后，當前組件已被刪除，銷毀監聽事件，組件、事件、子實例也被銷毀。
這時組件已經沒有了，無法操作里面的任何東西了。
最后補充下Vue官方的生命周期函數的圖。
目前Vue3.0更新了八大生命周期函數
| beforeCreate | setup | 組件創建之前 |
| created | setup | 組件創建完成 |
| beforeMount | onBeforeMount | 組件掛載之前 |
| mounted | onMounted | 組件掛載完成 |
| beforeUpdate | onBeforeUpdate | 數據更新，虛擬 DOM 補丁之前 |
| updated | onUpdated | 數據更新，虛擬 DOM 渲染完成 |
| beforeDestroy | onBeforeUnmount | 組件銷毀之前 |
| destroyed | onUnmounted | 組件銷毀后 |
參考：https://mp.weixin.qq.com/s/2dd7jR1dnk2FmKG-2_YR3g
總結
以上是生活随笔為你收集整理的五十七、Vue中的八大生命周期函数的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在杭州报考军队文职靠谱吗
- 下一篇： 五十八、Vue中的计算属性，方法和侦听器