出現(xiàn)狀況
? 一開(kāi)始油啤，在vue-cli3中我通過(guò)axios獲取了后臺(tái)數(shù)據(jù)并推到了data里面的mapdata數(shù)據(jù)內(nèi)典徘。然后想通過(guò)調(diào)取高德的API進(jìn)行地圖的繪制，但是我發(fā)現(xiàn)無(wú)論如何取不到mapdata的數(shù)據(jù)益咬。以下我貼一下源代碼
export default {
name: 'map',
data () {
return {
mapdata: []
}
},
mounted(){
this.axios.get('url')
.then(response => {
// this.mapdata = response.data.data;
for(var i=0; i<response.data.data.length; i++)
{
this.mapdata.push({
'name': response.data.data[i].name,
'center': response.data.data[i].location
});
}
console.log(this.map);
})
.catch(function (error) {
console.log(error)
})
this.create();
},
methods: {
createmap()
{
var map = new AMap.Map('map', {
resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
mapStyle: 'amap://styles/grey',
zoom: 13,
features: ['bg', 'road', 'building', 'point'],
viewMode: '3D',
center: [106.515301,29.510008]
});
var layer = new Loca.PointLayer({
map: map,
eventSupport: true, // selectStyle 配置需要開(kāi)啟 eventSupport: true
});
var data = this.mapdata;
layer.setData(data, {
lnglat: 'center'
});
layer.render();
}
}
}
然后我分別打印了一下mouted和methods里面的mapdata數(shù)據(jù)逮诲，我發(fā)現(xiàn)在mouted中出現(xiàn)的是[ {}, {}, {},{} _ob_ observe] 數(shù)據(jù)特征，而在methods中打印的數(shù)據(jù)直接就為[ _ob_ observe] 幽告。
解決方法
一開(kāi)始我在官方文檔里面進(jìn)行查詢梅鹦，讓我發(fā)現(xiàn)貌似這樣可以。
然后在methods里面修改成了如下所示：
var data = JSON.parse(JSON.stringify(this.mapdata));
然而并沒(méi)有起什么作用冗锁，但是問(wèn)題的關(guān)鍵來(lái)了齐唆，在mouted里面我也這樣對(duì)mapdata進(jìn)行了處理。打印出來(lái)發(fā)現(xiàn)把后面的observe對(duì)象消除了冻河，此時(shí)我便想箍邮，會(huì)不會(huì)是位置不對(duì)茉帅。然后我修改了代碼
export default {
name: 'map',
data () {
return {
mapdata: []
}
},
mounted(){
this.axios.get('url')
.then(response => {
// this.mapdata = response.data.data;
for(var i=0; i<response.data.data.length; i++)
{
this.mapdata.push({
'name': response.data.data[i].name,
'center': response.data.data[i].location
});
}
var map = new AMap.Map('map', {
resizeEnable: true, //是否監(jiān)控地圖容器尺寸變化
mapStyle: 'amap://styles/grey',
zoom: 13,
features: ['bg', 'road', 'building', 'point'],
viewMode: '3D',
center: [106.515301,29.510008]
});
var layer = new Loca.PointLayer({
map: map,
eventSupport: true, // selectStyle 配置需要開(kāi)啟 eventSupport: true
});
var data = JSON.parse(JSON.stringify(this.mapdata));
layer.setData(data, {
lnglat: 'center'
});
layer.render();
})
.catch(function (error) {
console.log(error)
})
},
methods: {
}
}
最后發(fā)現(xiàn)這樣竟然成功了！６П住堪澎！
原因
在后面，我去查了下observe的具體詳情
observe是作為數(shù)據(jù)的的觀察者所擁有的味滞，同理還有如下兩個(gè)
- Observer: 數(shù)據(jù)的觀察者全封，讓數(shù)據(jù)對(duì)象的讀寫(xiě)操作都處于自己的監(jiān)管之下
- Watcher: 數(shù)據(jù)的訂閱者，數(shù)據(jù)的變化會(huì)通知到Watcher桃犬，然后由Watcher進(jìn)行相應(yīng)的操作刹悴，例如更新視圖
- Dep: Observer與Watcher的紐帶，當(dāng)數(shù)據(jù)變化時(shí)攒暇，會(huì)被Observer觀察到土匀，然后由Dep通知到Watcher
而observe則檢查對(duì)象上是否有_ob_d屬性，如果存在形用，則表明該對(duì)象已經(jīng)處于Observer的觀察中就轧，如果不存在，則new Observer來(lái)觀察對(duì)象田度。如果我們要寫(xiě)到methods里面的方法中妒御，再由mouted去調(diào)用它則進(jìn)行了兩次觀察。它會(huì)直接封閉這個(gè)數(shù)據(jù)導(dǎo)致我們只能看镇饺。因此乎莉，我們最好就是調(diào)用data里面數(shù)據(jù)后立即使用它，否則會(huì)出現(xiàn)意想不到的情況
