export function initMixin (Vue: Class<Component>) {
  // 在原型上添加 _init 方法
  Vue.prototype._init = function (options?: Object) {
    ...
    vm._self = vm
    initLifecycle(vm) // 初始化實例的屬性、數(shù)據(jù)：$parent, $children, $refs, $root, _watcher...等
    initEvents(vm) // 初始化事件：$on, $off, $emit, $once
    initRender(vm) // 初始化渲染： render, mixin
    callHook(vm, 'beforeCreate') // 調(diào)用生命周期鉤子函數(shù)
    initInjections(vm) // 初始化 inject
    initState(vm) // 初始化組件數(shù)據(jù)：props, data, methods, watch, computed
    initProvide(vm) // 初始化 provide
    callHook(vm, 'created') // 調(diào)用生命周期鉤子函數(shù)
    ...
  }
}

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  // 初始化 props
  if (opts.props) initProps(vm, opts.props)
  // 初始化 methods
  if (opts.methods) initMethods(vm, opts.methods)
  // 初始化 data 
  if (opts.data) {
    initData(vm)
  } else {
    // 沒有 data 的話就默認(rèn)賦值為空對象，并監(jiān)聽
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化 computed
  if (opts.computed) initComputed(vm, opts.computed)
  // 初始化 watch
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

function initProps (vm: Component, propsOptions: Object) {
  // 父組件傳入子組件的 props
  const propsData = vm.$options.propsData || {}
  // 經(jīng)過轉(zhuǎn)換后最終的 props
  const props = vm._props = {}
  // 存放 props 的 key，就算 props 值空了，key 也會在里面
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // 轉(zhuǎn)換非根實例的 props
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    // 校驗 props 類型、default 屬性等
    const value = validateProp(key, propsOptions, propsData, vm)
    // 在非生產(chǎn)環(huán)境中
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(`hyphenatedKey 是保留屬性，不能用作組件 prop`)
      }
      // 把 props 設(shè)置成響應(yīng)式的
      defineReactive(props, key, value, () => {
        // 如果用戶修改 props 發(fā)出警告
        if (!isRoot && !isUpdatingChildComponent) {
          warn(`避免直接改變 prop`)
        }
      })
    } else {
      // 把 props 設(shè)置為響應(yīng)式
      defineReactive(props, key, value)
    }
    // 把不在默認(rèn) vm 上的屬性，代理到實例上
    // 可以讓 vm._props.xx 通過 vm.xx 訪問
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

function initData (vm: Component) {
  // 獲取當(dāng)前實例的 data 
  let data = vm.$options.data
  // 判斷 data 的類型
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(`數(shù)據(jù)函數(shù)應(yīng)該返回一個對象`)
  }
  // 獲取當(dāng)前實例的 data 屬性名集合
  const keys = Object.keys(data)
  // 獲取當(dāng)前實例的 props 
  const props = vm.$options.props
  // 獲取當(dāng)前實例的 methods 對象
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    // 非生產(chǎn)環(huán)境下判斷 methods 里的方法是否存在于 props 中
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(`Method 方法不能重復(fù)聲明`)
      }
    }
    // 非生產(chǎn)環(huán)境下判斷 data 里的屬性是否存在于 props 中
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(`屬性不能重復(fù)聲明`)
    } else if (!isReserved(key)) {
      // 都不重名的情況下，代理到 vm 上
      // 可以讓 vm._data.xx 通過 vm.xx 訪問
      proxy(vm, `_data`, key)
    }
  }
  // 監(jiān)聽 data
  observe(data, true /* asRootData */)
}

export function observe (value: any, asRootData: ?boolean): Observer | void {
  // 如果不是'object'類型 或者是 vnode 的對象類型就直接返回
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  // 使用緩存的對象
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    // 創(chuàng)建監(jiān)聽者
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // 根對象上的 vm 數(shù)量
  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    // 給 value 添加 __ob__ 屬性，值為value 的 Observe 實例
    // 表示已經(jīng)變成響應(yīng)式了，目的是對象遍歷時就直接跳過，避免重復(fù)操作
    def(value, '__ob__', this)
    // 類型判斷
    if (Array.isArray(value)) {
      // 判斷數(shù)組是否有__proty__
      if (hasProto) {
        // 如果有就重寫數(shù)組的方法
        protoAugment(value, arrayMethods)
      } else {
        // 沒有就通過 def，也就是Object.defineProperty 去定義屬性值
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }
  // 如果是對象類型
  walk (obj: Object) {
    const keys = Object.keys(obj)
    // 遍歷對象所有屬性，轉(zhuǎn)為響應(yīng)式對象，也是動態(tài)添加 getter 和 setter，實現(xiàn)雙向綁定
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
  // 監(jiān)聽數(shù)組
  observeArray (items: Array<any>) {
    // 遍歷數(shù)組，對每一個元素進(jìn)行監(jiān)聽
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {

  // 創(chuàng)建 dep 實例
  const dep = new Dep()
  // 拿到對象的屬性描述符
  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }
  // 獲取自定義的 getter 和 setter
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }
  // 如果 val 是對象的話就遞歸監(jiān)聽
  // 遞歸調(diào)用 observe 就可以保證不管對象結(jié)構(gòu)嵌套有多深，都能變成響應(yīng)式對象
  let childOb = !shallow && observe(val)
  // 截持對象屬性的 getter 和 setter
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // 攔截 getter，當(dāng)取值時會觸發(fā)該函數(shù)
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // 進(jìn)行依賴收集
      // 初始化渲染 watcher 時訪問到需要雙向綁定的對象，從而觸發(fā) get 函數(shù)
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    // 攔截 setter，當(dāng)值改變時會觸發(fā)該函數(shù)
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      // 判斷是否發(fā)生變化
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // 沒有 setter 的訪問器屬性
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 如果新值是對象的話遞歸監(jiān)聽
      childOb = !shallow && observe(newVal)
      // 派發(fā)更新
      dep.notify()
    }
  })
}

let uid = 0
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;
  constructor () {
    this.id = uid++
    this.subs = []
  }
  // 添加觀察者
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  // 移除觀察者
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  depend () {
    if (Dep.target) {
      // 調(diào)用 Watcher 的 addDep 函數(shù)
      Dep.target.addDep(this)
    }
  }
  // 派發(fā)更新(下一章節(jié)介紹)
  notify () {
    ...
  }
}
// 同一時間只有一個觀察者使用，賦值觀察者
Dep.target = null
const targetStack = []

export function pushTarget (target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

export function popTarget () {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

let uid = 0
export default class Watcher {
  ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // Watcher 實例持有的 Dep 實例的數(shù)組
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.value = this.lazy
      ? undefined
      : this.get()
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
    }
  }
  get () 
    // 該函數(shù)用于緩存 Watcher
    // 因為在組件含有嵌套組件的情況下，需要恢復(fù)父組件的 Watcher
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 調(diào)用回調(diào)函數(shù)，也就是upcateComponent，對需要雙向綁定的對象求值，從而觸發(fā)依賴收集
      value = this.getter.call(vm, vm)
    } catch (e) {
      ...
    } finally {
      // 深度監(jiān)聽
      if (this.deep) {
        traverse(value)
      }
      // 恢復(fù)Watcher
      popTarget()
      // 清理不需要了的依賴
      this.cleanupDeps()
    }
    return value
  }
  // 依賴收集時調(diào)用
  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        // 把當(dāng)前 Watcher push 進(jìn)數(shù)組
        dep.addSub(this)
      }
    }
  }
  // 清理不需要的依賴(下面有)
  cleanupDeps () {
    ...
  }
  // 派發(fā)更新時調(diào)用(下面有)
  update () {
    ...
  }
  // 執(zhí)行 watcher 的回調(diào)
  run () {
    ...
  }
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

export function mountComponent (...): Component {
  // 調(diào)用生命周期鉤子函數(shù)
  callHook(vm, 'beforeMount')
  let updateComponent
  updateComponent = () => {
    // 調(diào)用 _update 對 render 返回的虛擬 DOM 進(jìn)行 patch（也就是 Diff )到真實DOM，這里是首次渲染
    vm._update(vm._render(), hydrating)
  }
  // 為當(dāng)前組件實例設(shè)置觀察者，監(jiān)控 updateComponent 函數(shù)得到的數(shù)據(jù)，下面有介紹
  new Watcher(vm, updateComponent, noop, {
    // 當(dāng)觸發(fā)更新的時候，會在更新之前調(diào)用
    before () {
      // 判斷 DOM 是否是掛載狀態(tài)，就是說首次渲染和卸載的時候不會執(zhí)行
      if (vm._isMounted && !vm._isDestroyed) {
        // 調(diào)用生命周期鉤子函數(shù)
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // 沒有老的 vnode，說明是首次渲染
  if (vm.$vnode == null) {
    vm._isMounted = true
    // 調(diào)用生命周期鉤子函數(shù)
    callHook(vm, 'mounted')
  }
  return vm
}

// 清理不需要的依賴
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

notify () {
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // 如果不是異步，需要排序以確保正確觸發(fā)
      subs.sort((a, b) => a.id - b.id)
    }
    // 遍歷所有 watcher 實例數(shù)組
    for (let i = 0, l = subs.length; i < l; i++) {
      // 觸發(fā)更新
      subs[i].update()
    }
  }

  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      // 組件數(shù)據(jù)更新會走這里
      queueWatcher(this)
    }
  }

export function queueWatcher (watcher: Watcher) {
  // 獲得 watcher 的 id
  const id = watcher.id
  // 判斷當(dāng)前 id 的 watcher 有沒有被 push 過
  if (has[id] == null) {
    has[id] = true
    if (!flushing) {
      // 最開始會進(jìn)入這里
      queue.push(watcher)
    } else {
      // 在執(zhí)行下面 flushSchedulerQueue 的時候，如果有新派發(fā)的更新會進(jìn)入這里，插入新的 watcher，下面有介紹
      let i = queue.length - 1
      while (i > index && queue[i].id > watcher.id) {
        i--
      }
      queue.splice(i + 1, 0, watcher)
    }
    // 最開始會進(jìn)入這里
    if (!waiting) {
      waiting = true
      if (process.env.NODE_ENV !== 'production' && !config.async) {
        flushSchedulerQueue()
        return
      }
      // 因為每次派發(fā)更新都會引起渲染，所以把所有 watcher 都放到 nextTick 里調(diào)用
      nextTick(flushSchedulerQueue)
    }
  }
}

function flushSchedulerQueue () {
  currentFlushTimestamp = getNow()
  flushing = true
  let watcher, id

  // 根據(jù) id 排序，有如下條件
  // 1.組件更新需要按從父到子的順序，因為創(chuàng)建過程中也是先父后子
  // 2.組件內(nèi)我們自己寫的 watcher 優(yōu)先于渲染 watcher
  // 3.如果某組件在父組件的 watcher 運行期間銷毀了，就跳過這個 watcher
  queue.sort((a, b) => a.id - b.id)

  // 不要緩存隊列長度，因為遍歷過程中可能隊列的長度發(fā)生變化
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index]
    if (watcher.before) {
      // 執(zhí)行 beforeUpdate 生命周期鉤子函數(shù)
      watcher.before()
    }
    id = watcher.id
    has[id] = null
    // 執(zhí)行組件內(nèi)我們自己寫的 watch 的回調(diào)函數(shù)并渲染組件
    watcher.run()
    // 檢查并停止循環(huán)更新，比如在 watcher 的過程中又重新給對象賦值了，就會進(jìn)入無限循環(huán)
    if (process.env.NODE_ENV !== 'production' && has[id] != null) {
      circular[id] = (circular[id] || 0) + 1
      if (circular[id] > MAX_UPDATE_COUNT) {
        warn(`無限循環(huán)了`)
        break
      }
    }
  }
  // 重置狀態(tài)之前，先保留一份隊列備份
  const activatedQueue = activatedChildren.slice()
  const updatedQueue = queue.slice()
  resetSchedulerState()
  // 調(diào)用組件激活的鉤子  activated
  callActivatedHooks(activatedQueue)
  // 調(diào)用組件更新的鉤子  updated
  callUpdatedHooks(updatedQueue)
}

function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated')
    }
  }
}

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  // 如果是數(shù)組 而且 是合法的下標(biāo)
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    // 直接使用 splice 就替換，注意這里的 splice 不是原生的，所以才可以監(jiān)測到，具體看下面
    target.splice(key, 1, val)
    return val
  }
  // 到這說明是對象
  // 如果 key 存在于 target 里，就直接賦值，也是可以監(jiān)測到的
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  // 獲取 target.__ob__
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  // 在 Observer 里介紹過，如果沒有這個屬性，就說明不是一個響應(yīng)式對象
  if (!ob) {
    target[key] = val
    return val
  }
  // 然后把新添加的屬性變成響應(yīng)式
  defineReactive(ob.value, key, val)
  // 手動派發(fā)更新
  ob.dep.notify()
  return val
}

// 獲取數(shù)組的原型
const arrayProto = Array.prototype
// 創(chuàng)建繼承了數(shù)組原型的對象
export const arrayMethods = Object.create(arrayProto)
// 會改變原數(shù)組的方法列表
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
// 重寫數(shù)組事件
methodsToPatch.forEach(function (method) {
  // 保存原本的事件
  const original = arrayProto[method]
  // 創(chuàng)建響應(yīng)式對象
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // 派發(fā)更新
    ob.dep.notify()
    // 做完我們需要的處理后，再執(zhí)行原本的事件
    return result
  })
})