vue 如何实现数据劫持

Vue 实现数据劫持的方式是使用了 ES5 中的 Object.defineProperty() 方法，通过该方法给对象的属性添加 getter 和 setter 方法，从而实现对数据的监测和控制。

具体实现步骤如下：

1. 创建一个 Observer 对象，用于对数据进行监听和劫持。
2. 在 Observer 中使用 Object.defineProperty() 方法，给数据对象的每个属性添加 getter 和 setter 方法。
3. 在 getter 方法中，收集依赖并返回属性值。
4. 在 setter 方法中，更新属性的值，并通知所有依赖进行更新。

下面是一个简单的实现示例：

function Observer(data) {
  this.data = data;
  this.walk(data);
}

Observer.prototype = {
  walk: function(data) {
    var self = this;
    Object.keys(data).forEach(function(key) {
      self.defineReactive(data, key, data[key]);
    });
  },
  defineReactive: function(data, key, val) {
    var dep = new Dep();
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get: function() {
        if (Dep.target) {
          dep.depend();
        }
        return val;
      },
      set: function(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        dep.notify();
      }
    });
  }
};

function Dep() {
  this.subs = [];
}

Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub);
  },
  depend: function() {
    if (Dep.target) {
      this.addSub(Dep.target);
    }
  },
  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update();
    });
  }
};

Dep.target = null;

在上述代码中，Observer 对象用于对数据对象进行监听和劫持，defineReactive() 方法使用 Object.defineProperty() 方法给数据对象的每个属性添加 getter 和 setter 方法，Dep 对象用于收集依赖和通知更新，而 Dep.target 用于存储当前的 Watcher 对象（用于收集依赖）。

这样，当数据对象的属性值发生变化时，就会自动触发 setter 方法，从而通知所有依赖进行更新。而当 Watcher 对象读取属性值时，就会触发 getter 方法，从而将 Watcher 对象收集到依赖列表中。这样，就实现了数据劫持的功能。