Vue 数组中出现[__ob__: Observer]无法取值遍历

在Vue中，当我们使用Object.defineProperty()或Proxy来监视对象属性的变化时，Vue会为这个对象添加一个名为“__ob__”的属性，其值为一个Observer对象，用于监听对象属性的变化。但是，这个属性并不是我们自己定义的，所以在遍历数组时会出现这个属性，导致无法取值遍历。

解决方法：

1. 使用Vue提供的数组方法进行遍历，如forEach、map、filter等。

2. 使用ES6的展开运算符（...）将数组转换为普通数组，再进行遍历。

例如：

const arr = [1, 2, 3, {a: 1, b: 2, __ob__: Observer}];
const newArr = [...arr];
newArr.forEach(item => {
  console.log(item);
});

输出结果为：

1
2
3
{a: 1, b: 2, __ob__: Observer}

相关问题

将[0 : {__ob__: Observer} 1 : {__ob__: Observer} 2 : {__ob__: Observer}] 处理成一个数组对象

这个数据看起来像是 Vue.js 的响应式数组对象。如果想将其处理成一个普通的数组对象，可以使用 `Array.from()` 方法或者展开运算符 `...`，示例如下：

const originalArr = [
  {__ob__: Observer},
  {__ob__: Observer},
  {__ob__: Observer}
];

// 使用 Array.from() 方法
const newArray1 = Array.from(originalArr);
console.log(newArray1); // [{__ob__: Observer}, {__ob__: Observer}, {__ob__: Observer}]

// 使用展开运算符 ...
const newArray2 = [...originalArr];
console.log(newArray2); // [{__ob__: Observer}, {__ob__: Observer}, {__ob__: Observer}]

以上两种方法都可以将响应式数组对象转换成普通的数组对象。

数组后面__ob__: Observer

数组后面的__ob__: Observer 是由 Vue.js 框架添加的属性。它是用于观察数组变化的一个特殊对象。当使用 Vue.js 的双向数据绑定功能时，Vue.js 会将数组转换为可以观察的数组，并在数组后面添加一个名为__ob__的属性，该属性包含了一些用于监听和响应数组变化的方法和属性。通过__ob__.observer属性，Vue.js 可以追踪数组的变化并触发相应的更新。这样，在修改数组时，Vue.js 可以及时地进行响应，更新相关的视图。