一、生命周期概念

通俗地講，生命周期即Vue實(shí)例或組件從創(chuàng)建到被消滅的一系列過(guò)程，中間的各個(gè)節(jié)點(diǎn)被稱為鉤子. vue.js中created方法是一個(gè)生命周期鉤子函數(shù)，一個(gè)vue實(shí)例被生成后會(huì)調(diào)用這個(gè)函數(shù)。

一個(gè)vue實(shí)例被生成后還要綁定到某個(gè)html元素上，之后還要進(jìn)行編譯，然后再插入到document中。

每一個(gè)階段都會(huì)有一個(gè)鉤子函數(shù)，方便開發(fā)者在不同階段處理不同邏輯。

一般可以在created函數(shù)中調(diào)用ajax獲取頁(yè)面初始化所需的數(shù)據(jù)。

二、瀏覽器渲染過(guò)程

要深刻理解生命周期的各個(gè)節(jié)點(diǎn)，就必須了解瀏覽器的渲染過(guò)程

• 構(gòu)建DOM樹
• 構(gòu)建css規(guī)則樹,根據(jù)執(zhí)行順序解析js文件。
• 構(gòu)建渲染樹Render Tree
• 渲染樹布局layout
• 渲染樹繪制

三、生命周期中的瀏覽器渲染

• created：已創(chuàng)建，在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
• mounted：已掛載，在模板渲染成html后調(diào)用，通常是初始化頁(yè)面完成后，再對(duì)html的dom節(jié)點(diǎn)進(jìn)行一些操作。

通常created使用的次數(shù)多，而mounted是在一些插件或組件的使用中進(jìn)行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會(huì)有這一步，而如果你寫入組件中，你會(huì)發(fā)現(xiàn)在created中無(wú)法對(duì)chart進(jìn)行一些初始化配置，一定要等這個(gè)html渲染完后才可以進(jìn)行，那么mounted就是不二之選。

beforeCreate階段

對(duì)瀏覽器來(lái)說(shuō)，整個(gè)渲染流程尚未開始或者說(shuō)準(zhǔn)備開始，對(duì)vue來(lái)說(shuō)，實(shí)例尚未被初始化，data observer和 event/watcher也還未被調(diào)用，在此階段，對(duì)data、methods或文檔節(jié)點(diǎn)的調(diào)用現(xiàn)在無(wú)法得到正確的數(shù)據(jù)。

created階段

對(duì)瀏覽器來(lái)說(shuō)，渲染整個(gè)HTML文檔時(shí),dom節(jié)點(diǎn)、css規(guī)則樹與js文件被解析后，但是沒(méi)有進(jìn)入被瀏覽器render過(guò)程，上述資源是尚未掛載在頁(yè)面上，也就是在vue生命周期中對(duì)應(yīng)的created階段，實(shí)例已經(jīng)被初始化，但是還沒(méi)有掛載至 $el上，所以我們無(wú)法獲取到對(duì)應(yīng)的節(jié)點(diǎn)，但是此時(shí)我們是可以獲取到vue中data與methods中的數(shù)據(jù)的

beforeMount階段

實(shí)際上與created階段類似，節(jié)點(diǎn)尚未掛載，但是依舊可以獲取到data與methods中的數(shù)據(jù)。

mounted階段

對(duì)瀏覽器來(lái)說(shuō)，已經(jīng)完成了dom與css規(guī)則樹的render，并完成對(duì)render tree進(jìn)行了布局，而瀏覽器收到這一指令，調(diào)用渲染器的paint（）在屏幕上顯示，而對(duì)于vue來(lái)說(shuō)，在mounted階段，vue的template成功掛載在$el中，此時(shí)一個(gè)完整的頁(yè)面已經(jīng)能夠顯示在瀏覽器中，所以在這個(gè)階段，即可以調(diào)用節(jié)點(diǎn)了（關(guān)于這一點(diǎn)，在筆者測(cè)試中，在mounted方法中打斷點(diǎn)然后run，依舊能夠在瀏覽器中看到整體的頁(yè)面）。

四、使用場(chǎng)景

通過(guò)瀏覽器的渲染過(guò)程，可以總結(jié)出created和mounted的使用場(chǎng)景

• created：通常用于初始化某些屬性值，例如data中的數(shù)據(jù)，然后再渲染成視圖。
• mounted：通常在初始化頁(yè)面完成后，對(duì)html的dom節(jié)點(diǎn)進(jìn)行需要的操作。

因此，在created中，是無(wú)法進(jìn)行DOM操作的，而mounted可以獲取渲染出來(lái)的所有屬性值。

五、常見相關(guān)問(wèn)題

一些頁(yè)面跳轉(zhuǎn)后, 一些基礎(chǔ)數(shù)據(jù)接口沒(méi)有重新請(qǐng)求

舉個(gè)簡(jiǎn)單的例子：

created(){     
	this.init();  },   mounted() {    this.init();  },  methods: {    init() {        
	this.getList();        
	this.getdetailById();        
	this.getFicts();      
}    },}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論