// src/core/observer/index.js
class Observer {
  constructor(value) {
    this.value = value
    this.dep = new Dep() // 給對象/數(shù)組本身創(chuàng)建Dep
    def(value, '__ob__', this) // 給數(shù)據(jù)添加__ob__屬性，標記為響應式
    
    if (Array.isArray(value)) {
      // 處理數(shù)組的響應式（重寫push/pop等方法）
      this.observeArray(value)
    } else {
      // 處理對象的響應式：遍歷屬性并定義get/set
      this.walk(value)
    }
  }

  // 遍歷對象屬性，定義響應式
  walk(obj) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  // 遍歷數(shù)組，給每個元素做響應式處理
  observeArray(items) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

// 核心：給單個屬性定義get/set
export function defineReactive(
  obj,
  key,
  val,
  customSetter,
  shallow
) {
  // 每個響應式屬性都有一個專屬的Dep實例
  const dep = new Dep()

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

  // 保留原有的get/set
  const getter = property && property.get
  const setter = property && property.set

  // 遞歸處理子屬性，保證深層數(shù)據(jù)也是響應式
  let childOb = !shallow && observe(val)

  // 定義新的getter/setter
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // 讀取屬性時觸發(fā)：依賴收集的入口
    get: function reactiveGetter() {
      const value = getter ? getter.call(obj) : val
      
      // 關鍵：如果當前有活躍的Watcher，就收集依賴
      if (Dep.target) {
        dep.depend() // 1. 讓Dep記錄當前Watcher
        if (childOb) {
          // 2. 給對象/數(shù)組本身也收集依賴（處理數(shù)組/對象整體變更）
          childOb.dep.depend()
          if (Array.isArray(value)) {
            // 3. 數(shù)組特殊處理：遍歷子元素收集依賴
            dependArray(value)
          }
        }
      }
      return value
    },
    // 修改屬性時觸發(fā)：通知依賴更新
    set: function reactiveSetter(newVal) {
      const value = getter ? getter.call(obj) : val
      // 新舊值相同則不處理
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 新值也要做響應式處理
      childOb = !shallow && observe(newVal)
      // 關鍵：通知所有依賴更新
      dep.notify()
    }
  })
}

// src/core/observer/dep.js
export default class Dep {
  static target: ?Watcher; // 靜態(tài)屬性，存儲當前活躍的Watcher
  id: number; // 唯一標識
  subs: Array<Watcher>; // 存儲依賴的Watcher數(shù)組

  constructor() {
    this.id = uid++
    this.subs = []
  }

  // 添加一個Watcher到依賴列表
  addSub(sub: Watcher) {
    this.subs.push(sub)
  }

  // 移除一個Watcher
  removeSub(sub: Watcher) {
    remove(this.subs, sub)
  }

  // 核心：收集依賴（讓Dep和Watcher互相記錄）
  depend() {
    if (Dep.target) {
      // 調(diào)用當前Watcher的addDep方法，雙向綁定
      Dep.target.addDep(this)
    }
  }

  // 核心：通知所有Watcher更新
  notify() {
    // 復制一份依賴列表，避免更新過程中列表變化
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      // 調(diào)用Watcher的update方法
      subs[i].update()
    }
  }
}

// 全局唯一的Dep.target棧（處理嵌套Watcher，比如computed嵌套）
Dep.target = null
const targetStack = []

// 入棧：設置當前活躍的Watcher
export function pushTarget(target: ?Watcher) {
  targetStack.push(target)
  Dep.target = target
}

// 出棧：恢復上一個Watcher
export function popTarget() {
  targetStack.pop()
  Dep.target = targetStack[targetStack.length - 1]
}

// src/core/observer/watcher.js
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)
    
    // 處理配置項（比如lazy、deep、sync）
    if (options) {
      this.lazy = !!options.lazy // computed用
      this.deep = !!options.deep // 深度監(jiān)聽用
      this.sync = !!options.sync // 同步更新用
    } else {
      this.lazy = this.deep = this.sync = false
    }
    
    this.cb = cb // 更新回調(diào)
    this.id = uid++ // 唯一標識
    this.deps = [] // 存儲當前Watcher依賴的Dep
    this.newDeps = [] // 臨時存儲新依賴（用于依賴清理）
    this.depIds = new Set() // 去重
    this.newDepIds = new Set()
    
    // 解析表達式/函數(shù)，得到最終要執(zhí)行的函數(shù)
    this.getter = typeof expOrFn === 'function' ? expOrFn : parsePath(expOrFn)
    
    // 非lazy模式（比如render、watch）立即執(zhí)行g(shù)et，觸發(fā)依賴收集
    this.value = this.lazy ? undefined : this.get()
  }

  // 核心：執(zhí)行g(shù)etter并收集依賴
  get() {
    // 1. 將當前Watcher入棧，設置為Dep.target
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      // 2. 執(zhí)行g(shù)etter（比如render函數(shù)），觸發(fā)數(shù)據(jù)的getter
      // 此時數(shù)據(jù)的getter會檢測到Dep.target，從而收集當前Watcher
      value = this.getter.call(vm, vm)
    } catch (e) {
      // 錯誤處理
    } finally {
      // 3. 深度監(jiān)聽處理
      if (this.deep) {
        traverse(value)
      }
      // 4. 出棧，恢復Dep.target
      popTarget()
      // 5. 清理無用的依賴
      this.cleanupDeps()
    }
    return value
  }

  // 核心：添加Dep到Watcher（與Dep.depend()配合）
  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)) {
        // 讓Dep也記錄當前Watcher
        dep.addSub(this)
      }
    }
  }

  // 清理無用依賴（比如數(shù)據(jù)從視圖中移除后，不再監(jiān)聽）
  cleanupDeps() {
    // 省略清理邏輯...
  }

  // 核心：響應式數(shù)據(jù)更新時，觸發(fā)Watcher更新
  update() {
    if (this.lazy) {
      // computed：標記為臟值，下次訪問時重新計算
      this.dirty = true
    } else if (this.sync) {
      // 同步更新：立即執(zhí)行run
      this.run()
    } else {
      // 異步更新（Vue默認）：加入隊列，批量更新
      queueWatcher(this)
    }
  }

  // 執(zhí)行g(shù)etter并觸發(fā)回調(diào)
  run() {
    const value = this.get()
    if (value !== this.value || this.deep) {
      const oldValue = this.value
      this.value = value
      // 執(zhí)行回調(diào)（比如watch的回調(diào)函數(shù)）
      this.cb.call(this.vm, value, oldValue)
    }
  }

  // computed專用：計算并返回最新值
  evaluate() {
    this.value = this.get()
    this.dirty = false
  }

  // 重新收集依賴
  depend() {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }
}

// src/core/observer/array.js
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

// 重寫的7個方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  // 保留原方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator(...args) {
    // 執(zhí)行原方法
    const result = original.apply(this, args)
    // 獲取數(shù)組的__ob__（Observer實例）
    const ob = this.__ob__
    // 處理新增元素（push/unshift/splice），轉(zhuǎn)為響應式
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    // 關鍵：通知依賴更新
    ob.dep.notify()
    return result
  })
})

// src/core/instance/state.js
function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        // 只有臟值時才重新計算
        watcher.evaluate()
      }
      // 收集渲染W(wǎng)atcher到computed的依賴中
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}