Vue中关于ob:observer的处理方式是什么

在Vue.js中，_ob_是一个内部属性，用于表示一个对象是否已经被Vue的响应式系统所观察（即被转换为响应式对象）。这个属性是Vue在实现响应式数据时自动添加的，开发者通常不需要直接与它打交道。然而，了解它的存在及其处理方式对于深入理解Vue的响应式机制是非常有帮助的。

1. _ob_属性的作用

_ob_是Vue内部用来标记一个对象是否已经被观察的属性。当一个对象被Vue的响应式系统观察时，Vue会为这个对象添加一个__ob__属性，该属性是一个Observer实例。Observer实例负责管理该对象的依赖收集和派发更新。

const data = { name: 'Vue' };
const vm = new Vue({
  data: data
});

console.log(data.__ob__); // 输出一个Observer实例

在上面的代码中，data对象被Vue实例化后，Vue会自动为其添加__ob__属性，并将其转换为响应式对象。

2. _ob_属性的结构

__ob__属性是一个Observer实例，它包含以下几个重要的属性和方法：

• value: 指向被观察的对象本身。
• dep: 一个Dep实例，用于管理依赖。
• vmCount: 表示有多少个Vue实例使用了这个对象作为根数据。

{
  value: { name: 'Vue' },
  dep: Dep { id: 2, subs: [] },
  vmCount: 1
}

Dep实例是Vue依赖收集的核心，它负责存储所有依赖于该对象的Watcher实例。当对象发生变化时，Dep会通知所有相关的Watcher进行更新。

3. _ob_属性的处理方式

3.1 对象的响应式处理

当一个对象被Vue的响应式系统处理时，Vue会递归地遍历该对象的所有属性，并为每个属性添加getter和setter。在这个过程中，Vue会为对象添加__ob__属性，并将其标记为已观察。

function observe(value) {
  if (!value || typeof value !== 'object') {
    return;
  }
  let ob;
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__;
  } else {
    ob = new Observer(value);
  }
  return ob;
}

在上面的代码中，observe函数会检查对象是否已经被观察，如果没有，则创建一个新的Observer实例并将其赋值给__ob__属性。

3.2 数组的响应式处理

对于数组，Vue的处理方式略有不同。Vue会重写数组的push、pop、shift、unshift、splice、sort和reverse方法，以便在这些方法被调用时能够触发视图更新。

const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);

['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(function(method) {
  const original = arrayProto[method];
  def(arrayMethods, method, function mutator(...args) {
    const result = original.apply(this, args);
    const ob = this.__ob__;
    ob.dep.notify();
    return result;
  });
});

在上面的代码中，Vue重写了数组的变异方法，并在这些方法被调用时通过__ob__属性通知依赖进行更新。

3.3 _ob_属性的不可枚举性

__ob__属性被定义为不可枚举的，这意味着在使用Object.keys()或JSON.stringify()时，__ob__属性不会被包含在结果中。

Object.defineProperty(obj, '__ob__', {
  value: ob,
  enumerable: false,
  writable: true,
  configurable: true
});

这种设计避免了在序列化或遍历对象时意外暴露内部实现细节。

4. 总结

__ob__属性是Vue响应式系统的核心之一，它用于标记对象是否已经被观察，并管理依赖的收集和更新。虽然开发者通常不需要直接与__ob__打交道，但了解它的存在及其处理方式有助于更好地理解Vue的响应式机制。

在实际开发中，如果你在调试时看到__ob__属性，不必担心，这是Vue正常工作的一部分。理解它的作用可以帮助你更好地调试和优化Vue应用。