Vue.prototype.$watch = function (expOrFn, cb, options) {  const vm = this  options = options || {}  const watcher = new Watcher(vm, expOrFn, cb, options)   if(options.immediate) {    cb.call(vm, watcher,.value)  }  return function unwatchFn() {    watcher.teardown()  }}

class Watcher {  constructor (vm, expOrFn, cb) {    this.vm = vm    this.deps = []    this.depIds = new Set()    if(typeof expOrFn === 'function') {      this.getter = expOrFn    }else {      this.getter = parsePath(expOrFn)    }    this.cb = cb    this.value = this.get()  }  ....  addDep (dep) {    const id = dep.id       //參數dep是Dep實例對象    if(!this.depIds.has(id)) {  //判斷是否存在避免重復添加      this.depIds.add(id)          this.deps.push(dep)      dep.addSub(this)     //this 是依賴    }  }  teardown () {    let i = this.deps.length    while (i--) {      this.deps[i].removeSub(this)    }  }}let uid = 0class Dep {  constructor () {    this.id = uid++    ...  }  ...  depend () {    if(window.target) {      window.target.addDep(this)  //將this即當前dep對象加入到watcher對象上    }  }  removeSub (sub) {    const index = this.subs.indexOf(sub)    if(index > -1) {      return this.subs.splice(index, 1)    }  }}

class Watcher {  constructor (vm, expOrFn, cb, options) {    this.vm = vm    this.deps = []    this.depIds = new Set()    if(typeof expOrFn === 'function') {      this.getter = expOrFn    }else {      this.getter = parsePath(expOrFn)    }    if(options) {          //取值      this.deep = !!options.deep    }else {      this.deep = false    }    this.cb = cb    this.value = this.get()  }  get () {    window.target = this    let value = this.getter.call(vm, vm)    if(this.deep) {      traverse(value)    }    window.target = undefined    return value  }  ...}const seenObjects = new Set()function traverse (val) {  _traverse(val, seenObjects)  seenObjects.clear()}function _traverse(val, seen) {  let i, keys  const isA = Array.isArray(val)  if((!isA && isObject(val)) || Object.isFrozen(val)) { //判斷val是否是對象或者數組以及是否被凍結    return  }  if(val._ob_) {    const depId = val._ob_.dep.id   //可以看前面一篇我們對Observer類添加了this.dep = new Dep()，所以能訪問其dep.id    if(seen.has(depId)) {      return    }    seen.add(depId)  }  if(isA) {    i = val.length    while (i--) _traverse(val[i], seen)  } else {    keys = Object.keys(val)    i = keys.length    while (i--) _traverse(val[i], seen)  }}

Vue.prototype.$set = function (target, key, val) {  if(Array.isArray(target) && isValidArrayIndex(key)) {  //是數組并且key有效    target.length = Math.max(target.length, key)  //處理key > target.length    target.splice(key, 1, val)  //添加新元素，并輸出依賴更新同時新元素也會進行`Obsever`處理    return val  }  if(key in targert && !(key in Object.prototype) { //能遍歷并且是自身key    target[key] = val  //觸發set，執行依賴更新    return val  }  const ob = target._ob_  if(target.isVue || (ob && ob.vm.Count) { //不是vue實例也不是vue實例的根對象(即不是this.$data跟對象)    //觸發警告    return  }  if(!ob) {  //只添加    target[key] = val    return val  }  defineReactive(ob.value, key, val) //進行響應式處理  ob.dep.notify() //觸發依賴更新  returnv val}

Vue.prototype.$delete = function (target, key) {  if(Array.isArray(target) && isValidArrayIndex(key)) {    target.splice(key, 1)    return  }  const ob = target._ob_  if(target.isVue || (ob && ob.vm.Count) { //不是vue實例也不是vue實例的根對象(即不是this.$data跟對象)    //觸發警告    return  }  if(!hasOwn(target, key)) {    return  }  delete target[key]  if(!ob) {    return  }  ob.dep.notify()}