Vue2.x 源码学习：对象单层劫持**

欢迎来到 Vue2.x 源码学习之旅的第三站！在本篇文章中，我们将深入探究 Vue 的对象单层劫持机制，了解 Vue 如何对数据对象进行劫持和观测。

对象单层劫持

Vue 的数据劫持机制可以分为单层劫持和深度劫持。单层劫持是指 Vue 只对对象的第一层属性进行劫持，即只对对象本身的属性进行观测，而不会深入劫持对象内部的嵌套对象。

单层劫持的原理

Vue 使用 Object.defineProperty() 方法对数据对象的属性进行劫持。该方法可以定义一个对象的属性并指定其符（descriptor），其中包含属性的可枚举性、可写性和值。

当 Vue 对一个对象进行单层劫持时，它会遍历对象的属性，并对每个属性调用 Object.defineProperty() 方法。这样，当访问对象的属性时，Vue 就可以通过监听器的回调函数来侦听属性值的变化。

单层劫持的实现

Vue 的单层劫持是在 Observer 类中实现的。Observer 类是一个用于对数据对象进行观测的类。当创建一个 Observer 实例时，它会遍历数据对象，并对每个属性调用 Object.defineProperty() 方法进行劫持。

Observer.prototype.walk = function walk(obj) {
  for (var key in obj) {
    defineReactive(obj, key, obj[key]);
  }
};

data 为函数和对象的处理

当 data 选项是一个函数时，Vue 会在初始化时调用该函数，并劫持返回的对象。

当 data 选项是一个对象时，Vue 会直接劫持该对象。

data 函数的 this 指向

在 data 函数中，this 指向当前 Vue 实例，因此可以在函数中访问 Vue 实例上的属性和方法。

实例

const vm = new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

vm.message; // "Hello Vue!"

在上面的实例中，data 选项是一个函数，Vue 会在初始化时调用该函数，并劫持返回的对象。在 data 函数中，this 指向当前 Vue 实例，因此 message 属性被正确地劫持。

总结

Vue 的单层劫持机制是一个强大的工具，它允许 Vue 对数据对象进行观测和响应。通过劫持对象的第一层属性，Vue 可以有效地侦听属性值的变化，从而触发更新视图。

---