Vue - 如何识别 [__ob__: Observer]？答案

【问题标题】：Vue - how to recognize [__ob__: Observer]?Vue - 如何识别 [__ob__: Observer]？
【发布时间】：2019-10-07 23:58:12
【问题描述】：

在我的组件中，我循环遍历作为对象的数据属性，以检查是否设置了任何值。其中一个值是一个数组，但是当它为空并且我通过控制台记录它的值时，它会返回

[__ob__: Observer].

如果我测试它是数组还是对象，它们都不会返回 true。只有添加了元素后，它才会被识别为数组。

我还尝试测试它是否是一个函数 (entry[1] === "function") - 不正确。

那么[__ob__: Observer] 是什么，我如何进行检查以识别这个特定的东西？我需要为它破例。

【问题讨论】：

【解决方案1】：

如果您的目标是检查数组是否为空，为什么不检查arrayVariable.length === 0？ [__ob__: Observer] 是一个具有 Vue 注入反应性的对象。你可以查看typeof arrayVariable，你应该得到object。

【讨论】：

【解决方案2】：

VueJS 具有“反应性”，这意味着它们会为您观察对象。因此，在您的基本数据选项中，Vue 会为您监视属性。

new Vue({
  data() {
    return {
      myArray: []
    }
  }
})

在这种情况下 myArray 将是一个可观察对象，这只是一个包装器，您仍然可以使用所有标准数组操作。

这意味着你仍然可以这样做：

if (this.myArray && this.myArray.length > 0) {
 Do something with they array
}

更多关于 VueJS 如何处理数据选项。 https://vuejs.org/v2/guide/reactivity.html

【讨论】：

【解决方案3】：

引用自this thread:

{obv:Observer} 表示你的 vuex 对象为空

和：

这是 Vue 添加的一个特殊属性，它是 Reactivity 系统的一部分，它允许 Vue 跟踪数据更改并对其做出反应：

所以基本上，它没什么。

在您的情况下，它只是一个空数组，由 Vue 监控以对更改做出反应。

【讨论】：

【解决方案4】：

如果您的目标是调试 Observer Vue 实例中包含的内容，这是我的解决方案：

打印出template 块中属于你的组件的变量

之后，您可以重新格式化输出的结构以观察细节。

例如：

<template>
  <div>
    {{ your_variable }}
  <div>
</template>

希望这有帮助。

【讨论】：