VUE中的資料雙向繫結是通過資料劫持的方式實現的，核心的便是object.defineProperty()，它內部分為三個部分：

observer 可以遞迴地監聽物件上的所有屬性，當屬性改變時觸發相應的watcher。

watcher 觀察者，當監聽的資料值修改時，執行相應的回撥函式，更新模板內容。

dep 連線observer watcher，每一個observer對應一個dep，內部維護一個數組，儲存與該observer相關的watcher。

由初始化資料進入到observe（value）方法，為給定的資料繫結observer例項，在observe方法中的核心就是

ob = new Observer(value)
 

在getter方法中，把watcher新增到dep中，在setter方法中，觸發watcher執行回撥（生成render函式，生成虛擬dom，對映在頁面上）。

1.observer class中屬性dep定義為new Dep()，對陣列和物件型別分別處理。對陣列呼叫observeArray方法，對物件呼叫walk方法。

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
 

1.1walk方法：遍歷所有例項屬性，將之呼叫defineReactive方法。

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

1.2observeArray方法，對陣列中的每個元素呼叫observe方法。

 observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
 

1.11 深入檢視defineReactive方法。

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  if (!getter && arguments.length === 2) {
    val = obj[key]
  }
  const setter = property && property.set

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

傳入方法中的引數為 obj key ，分別表示物件本身和 例項屬性名。

（1）在此方法中首先建立dep例項，之後獲取對於例項屬性的描述，通過Object.getOwnPropertyDescriptor,獲取例項屬性是否可以修改，若configurable為false，那麼從方法中返回。

（2）獲取屬性的get方法，若屬性為資料屬性而不為訪問器屬性，則get值為undefined，並將結果賦值為getter，如果此屬性為資料屬性，並且傳入了兩個引數，則把物件對應的例項屬性值賦值為val。

（3）獲取屬性的set方法值。若為資料屬性則為undefined，並將其賦值為setter。

（4）若引數中未包含true false，則呼叫observe(val)方法，並將其賦值為childOb  這裡涉及到observe方法。會建立observer例項，並返回。

（5）利用Object defineProperty定義obj的key例項屬性描述為可遍歷，可修改，設定其get，set方法。

get方法：a.若此屬性已包含get方法，則在obj作用域下呼叫get方法。若無get方法，則獲取其例項屬性值val。將get方法返回值或者obj[key]賦值為value。b.如果Dep.target有值時，也就是目前存在唯一的watcher正在起作用時，通過dep例項呼叫depend方法，來為watcher和此dep例項新增依賴。此處的depend方法接下來細談。

    b.1 depend方法：若當前存在watcher，則呼叫Watcher 型別的addDep方法。

export default class Dep {
  static target: ?Watcher;

depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

/**
 * Add a dependency to this directive.
 */
Watcher.prototype.addDep = function addDep (dep) {
  var id = dep.id;
  if (!this.newDepIds.has(id)) {
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if (!this.depIds.has(id)) {
      dep.addSub(this);
    }
  }
};

      b.111呼叫addSub方法。為dep例項的subs陣列中新增watcher。

Dep.prototype.addSub = function addSub (sub) {
  this.subs.push(sub);
};

if (childOb) {
  childOb.dep.depend()
  if (Array.isArray(value)) {
    dependArray(value)
  }

此處在研究observe後進行補充。

set方法

（1）首先判斷此屬性是否包含get方法，如果包含則獲取get方法在obj物件的作用域下呼叫的返回值，如果沒有get方法，則獲取例項屬性的值，並將其賦值為value。

（2）判斷為例項屬性新賦的值是否全等於value值，也就是例項屬性已有的值和新賦值是否全等，或者value自身與自身就不全等或者新值與自身不全等的情況下，從set方法中返回。

（3）如果已有set方法，則在obj作用域下呼叫set方法，否則將val定義為新賦的值

（4）根據是否傳入true false 呼叫observe（newval）方法，將返回值賦值為childOb

（5）呼叫dep例項的notify方法。對dep例項的subs陣列中的watcher呼叫update方法，此處延伸下去。

 notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }

a.watcher的update方法會呼叫run方法。

 run () {
    if (this.active) {
      const value = this.get();
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value;
        this.value = value;
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue);
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`);
          }
        } else {
          this.cb.call(this.vm, value, oldValue);
        }
      }
    }

 get方法：先將目前正在執行工作的watcher新增到Dep的targetStack中，設定全域性變數Dep.target,之後touch Watcher初始化時傳入的引數expOrFn中

涉及到的每一項資料，然後觸發該資料項的getter函式；設定dep.target是依賴收集過程中的重要一步，getter函式中就是通過判斷Dep.target的

有無來判斷是Watcher初始化時呼叫的還是普通資料讀取，如果有則進行依賴收集。

get () {
  pushTarget(this);//設定全域性變數Dep.target,將watcher儲存在這個全域性變數中。
let value;
const vm = this.vm;
try {
    value = this.getter.call(vm, vm); 
} catch (e) {
    if (this.user) {
      handleError(e, vm, `getter for watcher "${this.expression}"`);
} else {
      throw e
    }
  } finally {
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
if (this.deep) {
      traverse(value);
}
    popTarget();
this.cleanupDeps();
}
  return value
}

Dep.target = null;
const targetStack = [];

function pushTarget (_target) {
  if (Dep.target) targetStack.push(Dep.target);
  Dep.target = _target;
}

watcher物件的run方法中會呼叫cb方法，而該方法會進而呼叫patch方法，進行diff，比較新舊值差距，進而渲染頁面