每個 Vue 實例在被創建時都要經過一系列的初始化過程 ：創建實例，裝載模板，渲染模板、銷毀等。Vue為生命周期中的每個狀態都設置了鉤子函數（監聽函數）。當Vue實例處于不同的生命周期時，對應的函數就會被觸發調用。

生命周期圖示

下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

鉤子函數

每個 Vue 實例在被創建時都要經過一系列的初始化過程。同時在這個過程中也會運行一些叫做生命周期鉤子的函數，這些函數在生命周期的不同階段自動觸發執行，這給了用戶在不同階段添加自己的代碼的機會。

生命周期鉤子含義

beforeCreate（vue對象創建前）	組件實例剛被創建，組件屬性計算之前，此時不能訪問屬性
created（創建后）	組件實例創建完，屬性可以訪問，但是還不能通過 $el 訪問DOM
beforeMount(加載前)	模板編譯、掛載之前，可以通過 $el 訪問渲染前的DOM
mounted（載入后）	模板編譯、掛載之后，可以通過 $el訪問渲染前的DOM
beforeUpdate（更新前）	組件更新之前，可以獲取組件更新前的DOM
updated（更新后）	組件更新之后，可以獲取組件更新后的DOM
beforeDestroy（銷毀前）	組件銷毀前調用
destroyed（銷毀后）	組件銷毀后調用

通過以下案例，演示下各個鉤子函數的使用：

<div id="app"><h1>{{msg}}</h1><button @click="changeMsg">點我修改msg</button> </div><script>const vm = new Vue({el:"#app",data:{msg:"hell vue"},methods:{changeMsg(){this.msg = "hello baizhi";}},beforeCreate:function(){// alert("beforeCreate...");console.log("beforeCreate...");console.log(this.$el);//undefinedconsole.log(this.msg);//undefined},created:function(){// alert("created...");console.log("created...");console.log(this.$el);//undefinedconsole.log(this.msg);//hello vue},beforeMount:function(){// alert("beforeMount...");console.log("beforeMount...");console.log(this.$el);//加載前的標簽，就是原始代碼,插值表達式、事件綁定都還沒解析console.log(this.msg);//hello vue},mounted:function(){// alert("mounted...");console.log("mounted...");console.log(this.$el);//加載后的標簽，插值表達式、事件綁定均已解析console.log(this.msg);//hello vue},beforeUpdate:function(){// alert("beforeUpdated...");console.log("beforeUpdated...");console.log(this.$el.innerHTML);//更新前的DOMconsole.log(this.msg);//hello baizhi},updated:function(){// alert("updated...");console.log("updated...");console.log(this.$el.innerHTML);//更新后的DOMconsole.log(this.msg);//hello baizhi},beforeDestroy:function(){//在console中執行vm.$destroy()觸發，開發時很少關注// alert("destroyed...");console.log("beforeDestroy...");console.log(this.$el);console.log(this.msg);},destroyed:function(){// alert("destroyed...");console.log("destroyed...");console.log(this.$el);console.log(this.msg);}}) </script>

說明：一般地，我們會在 created 鉤子函數中，從服務端獲取數據，并對數據進行初始化。

總結

以上是生活随笔為你收集整理的Vue第一部分(6)：Vue的生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。