vue在created鉤子函數請求異步數據,在mounted鉤子獲取不到?

1.created、mounted的定義

1.1 created

附一個官方對於created的定義 : 【created】

在示例創建完成後被立即調!

在這一步,實例已完成以下的配置:

  • 數據觀測 (data observer),
  • property 和方法的運算,
  • watch/event 事件回調。
  • 然而,掛載階段還沒開始,$el property 目前尚不可用。

注意:

在此生命週期內,data、methods、$el均不存在

1.2 mounted

附一個官方對於mounted的定義 :【mounted】

實例被掛載後調用!

此時的el被新創建的vm.$el替換了。此時可操作一切操作,包括DOM操作。

注意 :
mounted 不會保證所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢,可以在 mounted 內部使用 vm.$nextTick

mounted: function () {
this.$nextTick(function () {
	  // Code that will run only after the
	 // entire view has been rendered
  })
}

2.問題現象及解決辦法

使用vue時需要加載初始化數據

問題描述:
1.在created生命週期內進行異步數據的請求,且將獲取到的數據賦值給this.data
2.此時如果在mounted生命週期裏獲取this.data是獲取不到的。

問題分析:
因爲異步加載需要時間,如果延遲時間是可以獲取到數據的,但是問題是不知道需要延遲多久,況且這個方法也不是很好。

那麼有沒有一個比較優雅的辦法進行獲取這個異步加載的數據呢

解決辦法:
在data裏進行數據的定義

data(){
	dataList:''
}

使用watch方法的數據監聽

	watch:{
		dataList(){
			this.$nextTick(()=>{
				//此時就可以獲取到在created賦值後的dataList了
			})
		}
	}

至此,遇到的問題就以解決~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章