# vue源码 数据代理和响应式

/**
 * 两件事：
 *   数据响应式的入口：分别处理 props、methods、data、computed、watch
 *   优先级：props、methods、data、computed 对象中的属性不能出现重复，优先级和列出顺序一致
 *         其中 computed 中的 key 不能和 props、data 中的 key 重复，methods 不影响
 */
export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  // 处理 methos 对象，校验每个属性的值是否为函数、和 props 属性比对进行判重处理，最后得到 vm[key] = methods[key]
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true 
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
  /**
   * computed 和 watch 在本质是没有区别的，都是通过 watcher 去实现的响应式
   * 非要说有区别，那也只是在使用方式上的区别，简单来说：
   *   1、watch：适用于当数据变化时执行异步或者开销较大的操作时使用，即需要长时间等待的操作可以放在 watch 中
   *   2、computed：其中可以使用异步方法，但是没有任何意义。所以 computed 更适合做一些同步计算
   */
}

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // 这里说的是缓存每个key为数组，性能优化，防止动态对象用枚举 歪？
  const keys = vm.$options._propKeys = []
 ...
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    if (...)...{
    } else {
      defineReactive(props, key, value) // 响应式
    }
    if (!(key in vm)) {
      proxy(vm, `_props`, 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)
}

function initData (vm: Component) {
  let data = vm.$options.data
  ...
  let i = keys.length
  while (i--) {//判重
    const key = keys[i]
    ...
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {//data不能和props重名
     ...
        `The data property "${key}" is already declared as a prop. ` +
   ...
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)// 响应式
}

function initComputed (vm: Component, computed: Object) {
  const watchers = vm._computedWatchers = Object.create(null)
  const isSSR = isServerRendering()
  for (const key in computed) { //判重
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (process.env.NODE_ENV !== 'production' && getter == null) {//getter不能少
     ...
    }
    if (!isSSR) {
      watchers[key] = new Watcher( //给个watcher
        vm,
        getter || noop,
        noop,
        computedWatcherOptions // 默认懒加载
      )
    }
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)// 代理 computed属性到vm上，可以用vm.cptkey访问到计算属性
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) { // 重名冲突
      ...
    }
  }
}

export function defineComputed (
 ...  // 可以是对象，也可以是函数
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    ...同上
  }
  if (process.env.NODE_ENV !== 'production' &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }
  //拦截 target.key的访问
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) { // dirty 缓存标识， 两次computed只会执行一次
        watcher.evaluate() // 这个进去就是把  dirty = false
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

function initWatch (vm: Component, watch: Object) {
  for (const key in watch) {
    const handler = watch[key]
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  return vm.$watch(expOrFn, handler, options)
}

  Vue.prototype.$watch = function (
  ...
  ): Function {
    const vm: Component = this
    if (isPlainObject(cb)) { // 判断是不是对象
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    const watcher = new Watcher(vm, expOrFn, cb, options)
    if (options.immediate) { // 立即执行一次回调
      const info = `callback for immediate watcher "${watcher.expression}"`
      pushTarget()
      invokeWithErrorHandling(cb, vm, [watcher.value], vm, info)
      popTarget()
    }
    return function unwatchFn () { // 解除监听
      watcher.teardown()
    }
  }

{
  obj:{
    a:1,
    __ob__:{ //Observer 实例
        dep:{Dep 实例
            subs:[ //存放 Watcher 实例
              new Watcher(),
            ]
        }
    }
  }
}

const obj = {
  a: 1,
  b: {
    c: 2
  }
}

new Observer(obj)
new Watcher(obj, 'a', () => {
  console.log('Watcher 回调执行')
})
obj.a='222'

/**
 * 观察者类，会被附加到每个被观察的对象上，value.__ob__ = this
 * 而对象的各个属性则会被转换成 getter/setter，并收集依赖和通知更新
 */
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data
  constructor (value: any) {
    this.value = value
    this.dep = new Dep() // 会实例化一个dep
    this.vmCount = 0
    def(value, '__ob__', this) // 给value ob标示
    if (Array.isArray(value)) { // 如果是数组，覆盖数组七个原型方法来实现响应式 
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

  /**
   * 遍历对象上的每个 key，为每个 key 设置defineReactive响应式
   * 仅当值为对象时才会走这里
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
    /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i]) // 给数组每一项给个观察
    }
  }
}

export function observe (value: any, asRootData: ?boolean): Observer | void {
 ...
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__ // 已经存在的就会返回
  } else if (
   ...一些判断
  ) {
    ob = new Observer(value) // 创建观察者实例
  }
  ...
  return ob
}

export function defineReactive (...) {
  ...
const dep = new Dep() // 一个key一个dep
const property = Object.getOwnPropertyDescriptor(obj, key)

const getter = property && property.get
const setter = property && property.set
    ...
let childOb = !shallow && observe(val) // 递归调用
// 核心！
Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () { // 是在getter阶段进行依赖收集
    const value = getter ? getter.call(obj) : val
    // 依赖收集 
    if (Dep.target) {
        dep.depend() //  Dep.target.addDep(this)
        if (childOb) {
        childOb.dep.depend()
        if (Array.isArray(value)) {
            dependArray(value) // 数组的时候
        }
        }
    }
    return value
    },
    set: function reactiveSetter (newVal) {
      if (getter && !setter) return //这里会比较下新老值
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal //设置新值
      }
    childOb = !shallow && observe(newVal)
    dep.notify() // 派发更新
    }
})
}

/**
 * Collect dependencies on array elements when the array is touched, since
 * we cannot intercept array element access like property getters.
 */
function dependArray (value: Array<any>) {
  for (let e, i = 0, l = value.length; i < l; i++) {
    e = value[i]
    e && e.__ob__ && e.__ob__.dep.depend()
    if (Array.isArray(e)) {
      dependArray(e)
    }
  }
}

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;
 ...
  depend () { // 依赖收集
    if (Dep.target) { 
      Dep.target.addDep(this)
    }
  }
  notify () { //派发更新
   ...
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update() // 遍历后更新
    }
  }
}
// dep.target表示正在执行的watcher
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]
}

constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    ...
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
     ...
    }
    this.value = this.lazy // 计算属性的标志
      ? undefined
      : this.get()// 最终调用这里进行状态更新
  }

  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm) //patch 
    } catch (e) {
     ...
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()// 依赖清除
    }
    return value
  }