vue中关于_ob_:observer的处理方式

在 Vue 中，ob 是一个内部属性，用于标记一个对象是否已被 Vue 的观察者系统观察。当把一个对象传递给 Vue 实例后，Vue 会通过响应式的方式将这个对象转化成 getter/setter 对象，并在 ob 属性中添加一个标记，以便后续的处理。

如果一个数据对象被多个 Vue 实例中的 JSON.stringify 或 $watch 观察，那么就会引入多个 ob 属性，这可能会导致一些内存泄漏问题。因此，Vue 中对于 ob 属性的处理方式包括以下两种：

1. 在开发环境中，Vue 会对所观察的对象进行一个副本，以避免多个 ob 属性的问题。这种方式对性能有一定的损失，但可以避免潜在的内存泄漏问题。

2. 在生产环境中，Vue 会直接使用 ob 属性，在对对象进行处理时，会先检查该对象是否已经存在 ob 属性，如果已经存在，则直接使用该属性，否则会通过 Vue.Observable 重新创建一个观察者对象。

以下是两个关于 ob 属性的示例：

示例一：对象被 Vue 观察后，会在 ob 属性中添加一个标记

import Vue from 'vue'

const data = {
  name: '张三',
  age: 20
}

new Vue({
  el: '#app',
  data
})

console.log(data._ob_)
// 输出结果如下：
// {
//   dep: Dep {...},
//   value: {name: "张三", age: 20},
//   vmCount: 0
// }

示例二：使用 ob 属性可以获取到对象的观察者实例

import Vue from 'vue'

const data = {
  name: '张三',
  age: 20
}

const vm = new Vue({
  data
})

console.log(data._ob_.vmCount) // 输出结果：1
console.log(vm._data._ob_.vmCount) // 输出结果：1
console.log(data._ob_.dep.subs.length) // 输出结果：1
console.log(vm._data._ob_.dep.subs.length) // 输出结果：1

上述示例中，使用 ob 属性可以访问到观察者对象的信息，包括 dep、value 和 vmCount。其中，dep 表示该对象的依赖管理器；value 表示该对象的原始值；vmCount 表示该对象目前被多少个 Vue 实例观察。同时，通过访问 dep.subs 也可以获取到该对象所有的观察者列表。