生命周期圖示

lifecycle.png

生命周期鉤子 = 生命周期函數(shù) = 生命周期事件

var vm = new Vue({}) 表示開(kāi)始創(chuàng)建一個(gè)Vue的實(shí)例對(duì)象

表示，剛初始化了一個(gè)Vue的空的實(shí)例對(duì)象，這個(gè)時(shí)候，這個(gè)對(duì)象身上，只有默認(rèn)的一些生命周期函數(shù)和默認(rèn)時(shí)間，其他的東西都未創(chuàng)建

注意：在beforeCreate生命周期函數(shù)執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒(méi)有被初始化

在created中，data和methods都已經(jīng)被初始化好了

如果要調(diào)用 methods 中的方法，或者要操作data中的數(shù)據(jù)，最早只能在created中操作

在beforeMount執(zhí)行的時(shí)候，頁(yè)面中的元素還沒(méi)有被真正替換過(guò)來(lái)，只是之前寫(xiě)的一些模板字符串

beforeMount執(zhí)行的時(shí)候，模板已經(jīng)在內(nèi)存中掛載好了，但是尚未掛載到頁(yè)面中去，此時(shí)頁(yè)面還是舊的

mounted是實(shí)例創(chuàng)建期間的最好一個(gè)生命周期，當(dāng)執(zhí)行完mounted就表示實(shí)例已經(jīng)被完全創(chuàng)建好了。此時(shí)，如果沒(méi)有其他操作的話，這個(gè)實(shí)例就被保存到內(nèi)存中了

如果要通過(guò)某些插件操作頁(yè)面上操作Dom節(jié)點(diǎn)，最早要在mounted中進(jìn)行

只要執(zhí)行玩了mounted，就表示整個(gè)vue實(shí)例已經(jīng)初始化完畢了，此時(shí)，組件已經(jīng)脫離了創(chuàng)建階段，進(jìn)入了運(yùn)行階段。

在組件運(yùn)行階段的生命周期函數(shù)只有兩個(gè)：beforeUpdated 和 updated，這兩個(gè)事件，會(huì)根據(jù)data數(shù)據(jù)的改變，有選擇性的觸發(fā)0次到多次

beforeUpdated執(zhí)行的時(shí)候，表示我們的界面中顯示的數(shù)據(jù)還沒(méi)有被更新，而data中的數(shù)據(jù)已經(jīng)更新，data和頁(yè)面還未被同步

updated執(zhí)行的時(shí)候，頁(yè)面和data數(shù)據(jù)已經(jīng)保持同步了。都是最新的數(shù)據(jù)。

當(dāng)執(zhí)行beforeDestroy鉤子函數(shù)的時(shí)候，vue實(shí)例就已經(jīng)從運(yùn)行階段進(jìn)入到了銷毀階段。當(dāng)執(zhí)行了beforeDestroy的時(shí)候，實(shí)例身上的所有data和所有methods，以及過(guò)濾器，指令等等，都處于可用狀態(tài)，此時(shí)，還沒(méi)有真正執(zhí)行銷毀過(guò)程。

當(dāng)執(zhí)行到了destroyed函數(shù)的時(shí)候，組件已經(jīng)被完全銷毀了。此時(shí)組件中所有的數(shù)據(jù)方法，指令，過(guò)濾器等等都已經(jīng)不可用了。