Vue 去掉数组中的 __ob__ : Observer在 Vue 项目中处理接口返回的数据时，踩了一些坑。出现这种

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 28 天，点击查看活动详情

__ob__: Observer 是 Vue 对数据监控添加的属性。当数据中包含这个属性时，数据是不可枚举、不可遍历的。

在 Vue 项目中处理接口返回的数据时，踩了一些坑。

首先从本地接收到接口获返回的数据，直接打印出来是如下的形式：

当对带有 __ob__: Observer 数据进行遍历处理的时候，是无法获取到正确结果的。

对数据执行如下操作，运行结果中，定义在函数内部的数组 arr 可以获取正确的结果，而赋值给 this.data 的数据又携带了 __ob__: Observer：

let arr = []
data.forEach(item => {
  arr.push(item.date)
})
console.log(arr,'arr')
this.data = arr
console.log(this.data,'data')

出现这种情况的原因是 Vue 获取数据是异步的，还没有取到值就开始用了，对数据进行 push 操作会出现 __ob__: Observer。

对数据进行深拷贝，拷贝之后的结果没有 __ob__

JSON.parse(JSON.stringify(this.data))

但需要注意的是，这里深拷贝的数据应该是我们最终用于赋值的数据，而不是接收到接口的返回值（如果只是对接口返回值进行深拷贝，在遍历数据后得到的数组可能依旧会携带 ob）

循环操作数据时，使用 for 循环，不使用 forEach 或是 map

for(let i=0;i<res.length;i++) {
  this.data.push(res[i].date)
}

Object.assign 方法用于对象的合并，一个或多个将源对象的所有可枚举属性，合并到目标对象（第一个参数是目标对象，后面的参数是源对象）这种方法是浅拷贝

使用 Object.assign 可以将数组转换为普通数组，同时再对数组中的对象进行转换

let newArr = Object.assign([],data).map(item => {
    return Object.assign({},item)
})

设置定时器 SetTimeout 来获取数据

Vue 去掉数组中的 ob : Observer