Vue如何实现响应式系统

callHook(vm, 'beforeMount')
vm._watcher = new Watcher(vm, () => {
 vm._update(vm._render(), hydrating)
}, noop)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
 vm._isMounted = true
 callHook(vm, 'mounted')
}

var vm = new Vue({
 el: '#app',
 data: () => ({
  person: null
 })
})
vm.person = {name: 'zs'}
setTimeout(() => {
 // 更改name
 vm.person.name = 'finally zs'
}, 3000)

function reactiveSetter (newVal) {
 /* ...省略部分代码 */
 // 这里会再次对新的value做拦截
 childOb = observe(newVal)
 dep.notify()
}

var vm = new Vue({
 data: () => ({
  person: {name: '令狐洋葱'}
 }),
 watch: {
  'person.name'(val) {
   console.log('name updated', val)
  }
 }
})
vm.person = {}

() => {this.vm.person.name}

/**
* Evaluate the getter, and re-collect dependencies.
*/
get () {
  pushTarget(this)
  const value = this.getter.call(this.vm, this.vm)
  // "touch" every property so they are all tracked as
  // dependencies for deep watching
  if (this.deep) {
    traverse(value)
  }
  popTarget()
  this.cleanupDeps()
  return value
}

var vm = new Vue({
  data: () => ({
    person: {name: '令狐洋葱'}
  }),
  watch: {
    'person.name': (val) {
      console.log('name updated: ' + val)
    }
  }
})
vm.person = {name: 'zs'}
vm.person.name = '无敌'

class Observe {
  constructor(obj) {
    Object.keys(obj).forEach(prop => {
      reactive(obj, prop, obj[prop])
    })
  }
}
function reactive(obj, prop) {
  let value = obj[prop]
  // 闭包绑定依赖
  let dep = new Dep()
  Object.defineProperty(obj, prop, {
    configurable: true,
    enumerable: true,
    get() {
      //利用js单线程，在get时绑定订阅者
      if (Dep.target) {
        // 绑定订阅者
        dep.addSub(Dep.target)
      }
      return value
    },
    set(newVal) {
      value = newVal
      // 更新时，触发订阅者更新
      dep.notify()
    }
  })
  // 对象监听
  if (typeof value === 'object' && value !== null) {
    Object.keys(value).forEach(valueProp => {
      reactive(value, valueProp)
    })
  } 
}

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    if (this.subs.indexOf(sub) === -1) {
      this.subs.push(sub)
    }
  }
  notify() {
    this.subs.forEach(sub => {
      const oldVal = sub.value
      sub.cb && sub.cb(sub.get(), oldVal)
    })
  }
}

class Watcher {
  constructor(data, exp, cb) {
    this.data = data
    this.exp = exp
    this.cb = cb
    this.get()
  }
  get() {
    Dep.target = this
    this.value = (function calcValue(data, prop) {
      for (let i = 0, len = prop.length; i < len; i++ ) {
        data = data[prop[i]]
      }
      return data
    })(this.data, this.exp.split('.'))
    Dep.target = null
    return this.value
  }
}