Vue.js2 - 数组包含 __ob__ ：观察者答案

【问题标题】：Vue.js2 - Array contains __ob__ : ObserverVue.js2 - 数组包含 __ob__ ：观察者
【发布时间】：2018-05-09 14:42:17
【问题描述】：

（可能）关于 vue.js 的初学者问题。我正在尝试使用通过 websocket 接收的 CanvasJS 库来显示数据。在我开始使用 vue 组件之前，使用数据工作正常。为了让自己更清楚：

export default {
  data() {
    return {
      cartesian: null,
      ws: null
    }
  },

  methods: {

    fillData(res) {
     var data = JSON.parse(res.data)

     var buffer = data.mdi
     console.log(buffer)

     this.cartesian = data.mdi
     console.log(this.cartesian)
    }

  },

  mounted() {
    this.ws = new WebSocket('ws://localhost:1111')
    this.ws.onmessage = this.fillData
  }
}

console.log(data.mdi) 行输出{0: Array(256), 1: Array(256), 2: Array(256), 3: Array(256)}。这正是我所期望的，并且适用于 CanvasJS。
console.log(this.cartesian) 行输出 {__ob__: Observer}。据我了解，这与 vue.js 的反应性有关。不幸的是，我不能将 this.cartesian 的内容与 CanvasJS 一起使用，因为它不显示任何数据。
因为除了使用this.cartesian 之外，我没有看到任何其他方式来显示我的数据，我希望能就我在这里可能做错的事情或如何访问this.cartesian 中的数据获得帮助，因为我可以在那里看到它在我的浏览器中检查它。

【问题讨论】：

{__ob__: Observer} 只是表明cartesian 是 Vue 观察到的属性。它旁边应该有一个克拉，您可以展开它来查看值。没有理由这会干扰您的库代码。我预计还有其他事情发生。
你是对的。我没有找到用我的数据动态填充图表的正确方法。 {__ob__: Observer} 似乎没有干扰。谢谢！

标签： javascript vue.js vuejs2

【解决方案1】：

因为cartesian 是您的组件数据的一部分，它通过添加getter 和setter 变为反应式。

您可以使用一些技巧来绕过这个预期的功能，但如果您使用 ES6 的 object spread destructuring 功能，通常不需要这样做。

let cartesianObject = {...this.cartesian};
console.log(cartesianObject);

【讨论】：

感谢您的建议。问题出在其他地方。现在已经修复了。

【解决方案2】：

对于遇到类似问题的任何人：{__ob__: Observer} 不会干扰 CanvasJS 库。我可以毫无问题地使用this.cartesian。我只是没有找到用数据填充图表的正确方法。
console.log 在这里可能会产生误导，但无论{__ob__: Observer} 如何，您都应该能够以与普通 js 相同的方式使用您的数据。

【讨论】：