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了
})
}
}
至此,遇到的問題就以解決~~~