前言

今天繼續(xù)加油學(xué)習(xí)，今天整理一下VUE中生命周期那有些，平且依次說(shuō)明給個(gè)的使用場(chǎng)景以及作用。嘻嘻嘻，讓我們一起學(xué)起來(lái)好吧

生命周期

beforeCreate： 在創(chuàng)建組件之前使用；在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽(tīng)和事件/偵聽(tīng)器的配置之前同步調(diào)用。

beforeCreate:function(){
				//組件創(chuàng)建之前
				console.log(this)
			}

created：在創(chuàng)建之后使用；

使用該組件,就會(huì)調(diào)用created方法,在created這個(gè)方法中可以操作后端的數(shù)據(jù) 數(shù)據(jù)驅(qū)動(dòng)視圖；

應(yīng)用:發(fā)送ajax請(qǐng)求

  created:function(){
  			console.log(this.msg)
  		},

beforeMount：掛載數(shù)據(jù)到DOM之前會(huì)調(diào)用

在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

         beforeMount:function(){
 			console.log(document.getElementById('app'));
 		},

mounted：掛載數(shù)據(jù)到DOM之后會(huì)調(diào)用Vue作用之后的DOM 操作DOM

實(shí)例被掛載后調(diào)用，這時(shí) el 被新創(chuàng)建的 vm.$el 替換了。如果根實(shí)例掛載到了一個(gè)文檔內(nèi)的元素上，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。

mounted:function(){
		console.log(document.getElementById('app'));
		}, 

beforeUpdate：在更新DOM之前 調(diào)用該鉤子 應(yīng)用:可以獲取原始的DOM

在數(shù)據(jù)發(fā)生改變后，DOM 被更新之前被調(diào)用。這里適合在現(xiàn)有 DOM 將要被更新之前訪問(wèn)它，比如移除手動(dòng)添加的事件監(jiān)聽(tīng)器。

該鉤子在服務(wù)器端渲染期間不被調(diào)用，因?yàn)橹挥谐醮武秩緯?huì)在服務(wù)器端進(jìn)行。

beforeUpdate:function(){
			//在更新DOM之前 調(diào)用該鉤子 應(yīng)用:可以獲取原始的DOM
			 console.log(document.getElementById('app').innerHTML);
		},

updated：在更新DOM之后 調(diào)用該鉤子 應(yīng)用:可以獲取最新的DOM

在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和更新完畢之后被調(diào)用。

當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher取而代之。

     updated:function(){
  	 console.log(document.getElementById('app').innerHTML);
  		},  

beforeDestroy：

• 實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy:function(){
				console.log('beforeDestroy')
			},

destroyed：

• 實(shí)例銷毀后調(diào)用。該鉤子被調(diào)用后，對(duì)應(yīng) Vue 實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽(tīng)器被移除，所有的子實(shí)例也都被銷毀。

該鉤子在服務(wù)器端渲染期間不被調(diào)用。

destroyed:function(){
			   console.log('destroyed')
			},

activated： 用于組件激活的功能

	activated:function(){
			   console.log('組件被激活了')
			},

deactivated：用于組件被停用

deactivated:function(){
			   console.log('組件被停用了')
			}

到此這篇關(guān)于Vue 全部生命周期組件梳理整理的文章就介紹到這了,更多相關(guān)Vue 生命周期組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！