問題：筆者做項(xiàng)目的時(shí)候發(fā)現(xiàn)有時(shí)候會(huì)發(fā)現(xiàn)帶有__ob__: Observer 數(shù)組后綴的就是沒有辦法取到值，但是 console.log 卻能看得到值
項(xiàng)目片段中的打印
console.log('============');
console.log('arr', arr, arr.length);
console.log('=============');
打印效果如下
那么首先先解釋一下vue取值的方式是Ajax異步的，換句人話就是說臭脓，你還沒有從數(shù)據(jù)庫中取到值放到對(duì)應(yīng)的數(shù)組中去你那邊就開始取值，那肯定是取不到的岸裙，所以我們可以有兩種方法，第一種把這個(gè)換成同步的形式等你加載完之后再進(jìn)行取值速缆，或者說采用第二種方式就是設(shè)一個(gè)延遲等去取完之后呢你在進(jìn)行賦值即可降允！那么你就可以看到這個(gè)值了,這也是最簡單的方法（弊端在于不知道數(shù)據(jù)什么時(shí)候處理好），完美的方法請(qǐng)看方案二
方案一
mounted() {
setTimeout(()=>{
//代碼
},800)
}
那么再什么時(shí)候數(shù)組后面會(huì)出現(xiàn)ob: Observer 艺糜，這個(gè)后綴其實(shí)是Vue監(jiān)控變量產(chǎn)生的剧董，如果你是使用 push添加的對(duì)象信息就會(huì)出現(xiàn)ob: Observer幢尚，引用了一個(gè)對(duì)象的時(shí)候引用值也會(huì)產(chǎn)生ob，例如this.datalist = arr翅楼，父組件傳給子組件等引用了一個(gè)對(duì)象尉剩，均會(huì)出現(xiàn)ob ,但是取不到值只有異步出現(xiàn)的ob會(huì)取不到值。
方案二思考:
什么時(shí)候數(shù)據(jù)回來毅臊，那么把所有異步操作都變?yōu)橥嚼砭ィ湍鼙ＷC數(shù)據(jù)能準(zhǔn)時(shí)拿到了，但是我們處理數(shù)據(jù)往往會(huì)用到循環(huán)管嬉，那么就選用同步循環(huán)了皂林，接口數(shù)據(jù)就用aswnc 與 await了
for循環(huán)是異步的，說明如下：
控制臺(tái)實(shí)驗(yàn)一番即可驗(yàn)證結(jié)果
let arr = [1,2,3]
function A() {
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(4)
},10)
})
}
arr.forEach(async item=>{
console.log(item)
if(item===2){
console.log(await A())
}
})//1234
forEach是同步的蚯撩，說明如下：
控制臺(tái)實(shí)驗(yàn)一番即可驗(yàn)證結(jié)果：
let arr = [1,2,3]
function A() {
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve(4)
},10)
})
}
async function B() {
for(let i=0;i<arr.length;i++){
let item = arr[i];
console.log(item)
if(item===2){
console.log(await A())
}
}
}
B()//1243
方案二：
所以我們把操作全部轉(zhuǎn)為同步代碼即可保證經(jīng)過一段代碼數(shù)據(jù)處理完了式撼，forEach循環(huán)改為同步循環(huán)for，就會(huì)避免異步監(jiān)聽產(chǎn)生的__ob__了求厕，而涉及計(jì)到引用產(chǎn)生__ob__，有如下方案：
1.對(duì)象可以使用Object.assign({},obj)去掉復(fù)雜類型的引用產(chǎn)生的__ob__
2.數(shù)組嵌套對(duì)象可以使用：JSON.parse(JSON.stringify(arr))去掉引用產(chǎn)生的__ob__
3.復(fù)雜嵌套可以使用如下功能函數(shù)深拷貝
function clone(target, map = new Map()) {
if (typeof target === 'object') {
let cloneTarget = Array.isArray(target) ? [] : {};
if (map.get(target)) {
return map.get(target);
}
map.set(target, cloneTarget);
for (const key in target) {
cloneTarget[key] = clone(target[key], map);
}
return cloneTarget;
} else {
return target;
}
};
到此為止就完美的解決問題了扰楼，nice呀癣，只要保證處理數(shù)據(jù)是同步就沒有任何問題了
附上解決前的跟解決后的對(duì)比
解決后：
參考文獻(xiàn)：https://blog.csdn.net/wanshuai12138/article/details/124809122
https://blog.csdn.net/wanshuai12138/article/details/124809122
