每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程 ：創(chuàng)建實(shí)例，裝載模板，渲染模板、銷(xiāo)毀等。Vue為生命周期中的每個(gè)狀態(tài)都設(shè)置了鉤子函數(shù)（監(jiān)聽(tīng)函數(shù)）。當(dāng)Vue實(shí)例處于不同的生命周期時(shí)，對(duì)應(yīng)的函數(shù)就會(huì)被觸發(fā)調(diào)用。

生命周期圖示

下圖展示了實(shí)例的生命周期。你不需要立馬弄明白所有的東西，不過(guò)隨著你的不斷學(xué)習(xí)和使用，它的參考價(jià)值會(huì)越來(lái)越高。

鉤子函數(shù)

每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這些函數(shù)在生命周期的不同階段自動(dòng)觸發(fā)執(zhí)行，這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。

生命周期鉤子含義

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

通過(guò)以下案例，演示下各個(gè)鉤子函數(shù)的使用：

<div id="app"><h1>{{msg}}</h1><button @click="changeMsg">點(diǎn)我修改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);//加載前的標(biāo)簽，就是原始代碼,插值表達(dá)式、事件綁定都還沒(méi)解析console.log(this.msg);//hello vue},mounted:function(){// alert("mounted...");console.log("mounted...");console.log(this.$el);//加載后的標(biāo)簽，插值表達(dá)式、事件綁定均已解析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中執(zhí)行vm.$destroy()觸發(fā)，開(kāi)發(fā)時(shí)很少關(guān)注// 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>

說(shuō)明：一般地，我們會(huì)在 created 鉤子函數(shù)中，從服務(wù)端獲取數(shù)據(jù)，并對(duì)數(shù)據(jù)進(jìn)行初始化。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。