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

在 Vue 中，当一个数据属性被观察时，它会被转换成一个 Observer 对象。这个 Observer 对象会将数组转换成一个拥有特殊行为的数组，以便能够检测到数组的变化。这个 Observer 对象会被添加到数组中，所以当你遍历数组时，你会看到这个 [ob: Observer]。

如果你想要遍历一个被观察的数组，你需要使用 Vue 提供的一些数组方法，如 push、pop、shift、unshift、splice、sort、reverse。这些方法会触发数组的变化，从而让 Observer 对象能够检测到数组的变化并更新视图。

例如，你可以使用 Vue 的 v-for 指令来遍历一个数组：

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'cherry']
    };
  }
};
</script>

在这个例子中，我们使用 v-for 指令来遍历 list 数组，并将每个元素渲染成一个 li 标签。由于我们使用了 Vue 提供的数组方法来修改 list 数组，所以 Observer 对象能够检测到数组的变化并更新视图。

相关问题

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}

Vue 数组中出现__ob__: Observer无法取值

在 Vue 中，每个响应式对象都会被添加一个名为 `__ob__` 的属性，它是 Observer 类的实例，负责监听该对象的变化并触发响应式更新。当你尝试访问一个包含 `__ob__` 属性的数组时，由于 `__ob__` 是一个 Observer 实例，它无法直接被访问，因此会出现无法取值的情况。

如果你需要访问数组中的值，可以使用数组的索引来访问，例如 `myArray[0]`。如果你需要对数组进行响应式更新，可以使用 Vue 提供的数组变异方法，例如 `push()`、`pop()`、`shift()`、`unshift()` 等。这些方法会触发响应式更新，并确保 `__ob__` 属性正常工作。