Vue数组中出现__ob__:Observer无法取值问题的解决方法

当我们在使用Vue时，有时候会遇到一个问题：当我们打印Vue数据中的数组时，会出现一条类似“ob:Observer”的信息，而我们想要的数据并没有被打印出来，这是为什么呢？这是因为Vue对于数据的观测，会将其转换为响应式数据，并在数据上挂载一个Observer对象，这个__ob__属性就是用来标识Observer对象的。为了解决这个问题，我们需要使用Vue提供的一些API来访问数据。

解决方法：

1.使用Vue提供的$nextTick方法

$nextTick是Vue提供的一种异步更新界面的机制，其作用是将回调函数延迟到下一次DOM更新周期之后才执行。当我们在DOM更新后再去访问数据时，就可以避免出现__ob__属性了。

示例代码如下：

new Vue({
  el: '#app',
  data: {
    list: [1, 2, 3]
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.list)
    })
  }
})

2.使用JSON.stringify方法

由于JSON.stringify方法只能将对象、数组等序列化为字符串，它在序列化的时候会自动忽略掉__ob__等属性，从而避免了出现无法取值的问题。

示例代码如下：

new Vue({
  el: '#app',
  data: {
    list: [1, 2, 3]
  },
  mounted() {
    console.log(JSON.stringify(this.list))
  }
})

这两种方法都能很好地解决Vue数组中出现__ob__:Observer无法取值问题，具体使用哪种方法取决于具体的业务场景和需求。