响应式对象，核心是利用 Object.defineProperty 给数据添加了 getter 和 setter，目的是为了在我们访问数据和写数据时自动执行一些逻辑：getter 用来依赖收集，setter 来派发更新。

The Object.defineProperty

  1. // obj 要在其上定义属性的对象
  2. // prop 定义或修改属性的名称
  3. // descriptor 将被定义或修改的属性描述符
  4. Object.defineProperty(obj, prop, descriptor);

descriptor是比较核心的，有很多可选值。其中get、set是我们最关心的，
get是给obj一个属性提供的getter方法，当我们访问属性时就会触发getter方法，
set是給obj一个属性提供的setter方法，当我们对该属性做修改的时候就会触发setter方法。

一个对象拥有了 getter、setter 后，我们可以简单地把这个对象称为响应式对象。

initState

对 props、methdos、data、computed 和 watcher 等属性做初始化操作。

  • initProps，遍历 props 配置，做两件事：调用 defineReactive 方法，把每个 prop 对应的值变成响应式，可以通过 vm._props.xxx 访问到定义在 props 中的属性。另一个是通过 proxy 把 vm._props.xxx 的访问代理到 vm.xxx 上。
  • initdata，data 的初始化也是做两件事，对定义 data 函数返回对象的遍历，通过 proxy 把每个 vm._data.xxx 都代理到 vm.xxx 上；另一个是调用 observe 方法观测整个 data 的变化，把 data 也变为响应式，可以用过 vm._data.xxx 访问到定义在 data 返回函数中对应的属性。

    proxy

    代理，将 props 和 data 上的属性代理到 vm 实例上，下面这个例子
    1. let comP = {
    2. props: {
    3.   msg: 'hello'
    4. },
    5. methods: {
    6.   say() {
    7.     console.log(this.msg)
    8.   }
    9. }
    10. }
    为什么我们可以直接使用定义在 props 中的 msg 呢，因为如下 prox 方法做了一些事： ```javascript const sharedPropertyDefinition = { enumerable: true, configurable: true, get: noop, set: noop }

// proxy(vm, _data, key) 使用方式 export function proxy (target: Object, sourceKey: string, key: string) { sharedPropertyDefinition.get = function proxyGetter () { return this[sourceKey][key] } sharedPropertyDefinition.set = function proxySetter (val) { this[sourceKey][key] = val } Object.defineProperty(target, key, sharedPropertyDefinition) }

  1. 通过 `Object.defineProperty` 将对于 `target[sourceKey][key]` 的读写变成为 `target[key]` 的读写。所以对于 `vm._props.xxx` 的读写变为 `vm.xxx` 读写，`vm._data.xxx` 同理。
  3. <a name="sNxUU"></a>
  4. ## observe
  5. `observe` 的功能是来检测数据变化
  6. ```javascript
  7. export function observe (value: any, asRootData: ?boolean): Observer | void {
  8.   if (!isObject(value) || value instanceof VNode) {
  9.     return
  10.   }
  11.   let ob: Observer | void
  12.   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  13.     ob = value.__ob__
  14.   } else if (
  15.     shouldObserve &&
  16.     !isServerRendering() &&
  17.     (Array.isArray(value) || isPlainObject(value)) &&
  18.     Object.isExtensible(value) &&
  19.     !value._isVue
  20.   ) {
  21.     ob = new Observer(value)
  22.   }
  23.   if (asRootData && ob) {
  24.     ob.vmCount++
  25.   }
  26.   return ob
  27. }

该方法的作用是给非 VNode 的对象类型数据添加一个 Observer，即实例化一个 Observer 对象实例。

Observer

注意写法上就差一个 r，Observer 对象是一个类，作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新：

  1. export class Observer {
  2.   value: any;
  3.   dep: Dep;
  4.   vmCount: number; // number of vms that has this object as root $data
  6.   constructor (value: any) {
  7.     this.value = value
  8.     this.dep = new Dep()
  9.     this.vmCount = 0
  10.     def(value, '__ob__', this)
  11.     if (Array.isArray(value)) {
  12.       const augment = hasProto
  13.         ? protoAugment
  14.         : copyAugment
  15.       augment(value, arrayMethods, arrayKeys)
  16.       this.observeArray(value)
  17.     } else {
  18.       this.walk(value)
  19.     }
  20.   }
  22.   /**
  23.    * Walk through each property and convert them into
  24.    * getter/setters. This method should only be called when
  25.    * value type is Object.
  26.    */
  27.   walk (obj: Object) {
  28.     const keys = Object.keys(obj)
  29.     for (let i = 0; i < keys.length; i++) {
  30.       defineReactive(obj, keys[i])
  31.     }
  32.   }
  34.   /**
  35.    * Observe a list of Array items.
  36.    */
  37.   observeArray (items: Array<any>) {
  38.     for (let i = 0, l = items.length; i < l; i++) {
  39.       observe(items[i])
  40.     }
  41.   }
  42. }

defineReactive

  1. /**
  2.  * Define a reactive property on an Object.
  3.  */
  4. export function defineReactive (
  5.   obj: Object,
  6.   key: string,
  7.   val: any,
  8.   customSetter?: ?Function,
  9.   shallow?: boolean
  10. ) {
  11.   const dep = new Dep()
  13.   const property = Object.getOwnPropertyDescriptor(obj, key)
  14.   if (property && property.configurable === false) {
  15.     return
  16.   }
  18.   // cater for pre-defined getter/setters
  19.   const getter = property && property.get
  20.   const setter = property && property.set
  21.   if ((!getter || setter) && arguments.length === 2) {
  22.     val = obj[key]
  23.   }
  25.   let childOb = !shallow && observe(val)
  26.   Object.defineProperty(obj, key, {
  27.     enumerable: true,
  28.     configurable: true,
  29.     get: function reactiveGetter () {
  30.       const value = getter ? getter.call(obj) : val
  31.       if (Dep.target) {
  32.         dep.depend()
  33.         if (childOb) {
  34.           childOb.dep.depend()
  35.           if (Array.isArray(value)) {
  36.             dependArray(value)
  37.           }
  38.         }
  39.       }
  40.       return value
  41.     },
  42.     set: function reactiveSetter (newVal) {
  43.       const value = getter ? getter.call(obj) : val
  44.       /* eslint-disable no-self-compare */
  45.       if (newVal === value || (newVal !== newVal && value !== value)) {
  46.         return
  47.       }
  48.       /* eslint-enable no-self-compare */
  49.       if (process.env.NODE_ENV !== 'production' && customSetter) {
  50.         customSetter()
  51.       }
  52.       if (setter) {
  53.         setter.call(obj, newVal)
  54.       } else {
  55.         val = newVal
  56.       }
  57.       childOb = !shallow && observe(newVal)
  58.       dep.notify()
  59.     }
  60.   })
  61. }

Data、Observer、Dep 和 watcher 之间的关系。
响应式对象 - 图1