const count = ref(0)
count.value = 1  // 界面自动更新

let a = 1
let b = 2
let c = a + b  // c = 3

a = 2
// 现在 c 还是 3，但我们希望 c 自动变成 4

let a = 1
let b = 2
let c = 3

// 我们需要在 a 变化时做点什么
function setA(newValue) {
  a = newValue
  c = a + b  // 手动更新依赖 a 的表达式
}

// 我们想要这样的效果
const data = { count: 0 }

// 当读取 data.count 时，执行 track()
// 当写入 data.count 时，执行 trigger()

data.count  // 触发 track
data.count = 1  // 触发 trigger

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log('收集依赖', key)
      return val
    },
    set(newVal) {
      console.log('触发更新', key)
      val = newVal
    }
  })
}

const data = { count: 0 }
defineReactive(data, 'count', 0)

data.count      // 输出：收集依赖 count
data.count = 1  // 输出：触发更新 count

// 问题1：无法拦截新增属性
const data = { count: 0 }
defineReactive(data, 'count', 0)

data.newProp = 'hello'  // 这个操作没有任何拦截！不会触发任何响应

// 问题2：无法拦截删除属性
delete data.count  // 也没有拦截

// 问题3：数组的问题
const arr = [1, 2, 3]
// 对数组的 defineProperty 拦截效率极低，且 arr[0] = 100 这种索引赋值也无法完美拦截

// 问题4：初始化时必须递归遍历所有属性
const deep = { a: { b: { c: 1 } } }
// 必须递归遍历 a、b、c，即使 c 可能永远不会被使用

const data = { count: 0, nested: { value: 1 } }

const proxy = new Proxy(data, {
  get(target, key) {
    console.log('读取', key)
    return target[key]
  },
  set(target, key, value) {
    console.log('写入', key, value)
    target[key] = value
    return true
  },
  deleteProperty(target, key) {
    console.log('删除', key)
    delete target[key]
    return true
  }
})

proxy.count        // 输出：读取 count
proxy.count = 1    // 输出：写入 count 1
proxy.newProp = 2  // 输出：写入 newProp 2（新增属性也能拦截！）
delete proxy.count // 输出：删除 count

// 存储所有响应式对象的依赖关系
// targetMap: 对象 → 属性 → 依赖函数集合
const targetMap = new WeakMap()

// 当前正在执行的副作用函数
let activeEffect = null

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 依赖收集
      track(target, key)
      
      const result = Reflect.get(target, key, receiver)
      
      // 如果读取的值是对象，递归代理（懒代理）
      if (result && typeof result === 'object') {
        return reactive(result)
      }
      
      return result
    },
    
    set(target, key, value, receiver) {
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // 值真正变化时才触发更新
      if (oldValue !== value) {
        trigger(target, key)
      }
      
      return result
    },
    
    deleteProperty(target, key) {
      const hadKey = Object.prototype.hasOwnProperty.call(target, key)
      const result = Reflect.deleteProperty(target, key)
      
      if (hadKey && result) {
        trigger(target, key)
      }
      
      return result
    }
  })
}

function track(target, key) {
  if (!activeEffect) return
  
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  
  dep.add(activeEffect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => effect())
  }
}

// 创建一个响应式对象
const state = reactive({ count: 0, user: { name: 'Vue' } })

// 定义一个副作用函数
function effect(fn) {
  activeEffect = fn
  fn()
  activeEffect = null
}

// 使用 effect
effect(() => {
  console.log('count 变成了:', state.count)
})
// 输出：count 变成了: 0

// 修改数据
state.count = 1  // 输出：count 变成了: 1
state.count = 2  // 输出：count 变成了: 2

// 验证懒代理
console.log(state.user.name)  // 读取 user.name，此时 user 才被代理

const targetMap = new WeakMap()  // 注意是 WeakMap，不是 Map

Reflect.get(target, key, receiver)

if (result && typeof result === 'object') {
  return reactive(result)
}

const count = 1
// 无法用 Proxy 代理 count，因为它不是对象

// 使用方式
const count = ref(0)
count.value   // 读取
count.value = 1  // 修改

function ref(value) {
  // 如果已经是 ref，直接返回
  if (value && value.__v_isRef) return value
  
  return new RefImpl(value)
}

class RefImpl {
  constructor(value) {
    this.__v_isRef = true  // 标记这是一个 ref
    this._value = toReactive(value)  // 存储值，如果是对象则用 reactive 包装
  }
  
  get value() {
    // 依赖收集
    trackRefValue(this)
    return this._value
  }
  
  set value(newVal) {
    if (newVal !== this._value) {
      this._value = toReactive(newVal)
      // 触发更新
      triggerRefValue(this)
    }
  }
}

function toReactive(value) {
  return value && typeof value === 'object' ? reactive(value) : value
}

<template>
  <!-- 模板中直接使用，不需要 .value -->
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
// 修改时还是需要 .value
const increment = () => count.value++
</script>

// reactive 对象中自动解包
const count = ref(0)
const state = reactive({
  count: count  // ref 作为属性
})

console.log(state.count)  // 0，不需要 .value
state.count = 1           // 直接修改，同时也会更新 count.value
console.log(count.value)  // 1

let activeEffect = null
const effectStack = []  // 处理嵌套 effect

class ReactiveEffect {
  constructor(fn, scheduler = null) {
    this.fn = fn              // 要执行的函数
    this.scheduler = scheduler  // 调度器（用于异步更新）
    this.active = true        // 是否激活
    this.deps = []            // 反向记录：这个 effect 被哪些 dep 收集了
  }
  
  run() {
    if (!this.active) {
      return this.fn()
    }
    
    // 清理旧的依赖（处理条件分支变化的情况）
    cleanupEffect(this)
    
    // 压栈，设置当前激活的 effect
    effectStack.push(this)
    activeEffect = this
    
    // 执行用户函数，触发依赖收集
    const result = this.fn()
    
    // 出栈，恢复上一个 effect
    effectStack.pop()
    activeEffect = effectStack[effectStack.length - 1]
    
    return result
  }
  
  stop() {
    if (this.active) {
      cleanupEffect(this)
      this.active = false
    }
  }
}

function cleanupEffect(effect) {
  const { deps } = effect
  for (let i = 0; i < deps.length; i++) {
    deps[i].delete(effect)
  }
  effect.deps.length = 0
}

function effect(fn, options = {}) {
  const _effect = new ReactiveEffect(fn, options.scheduler)
  _effect.run()
  
  // 返回 runner，可以手动执行或停止
  const runner = _effect.run.bind(_effect)
  runner.effect = _effect
  return runner
}

effect(() => {           // effect1
  console.log('外层', state.a)
  effect(() => {         // effect2
    console.log('内层', state.b)
  })
})

let showA = true
effect(() => {
  if (showA) {
    console.log(state.a)  // 访问 a
  } else {
    console.log(state.b)  // 访问 b
  }
})

const state = reactive({ count: 0 })

effect(() => {
  console.log('count:', state.count)
})

state.count = 1
state.count = 2
state.count = 3

count: 1
count: 2
count: 3

const queue = new Set()  // 用 Set 自动去重
let isFlushing = false

function queueJob(job) {
  if (!queue.has(job)) {
    queue.add(job)
    if (!isFlushing) {
      isFlushing = true
      nextTick(flushJobs)
    }
  }
}

function flushJobs() {
  // 拷贝一份执行，因为执行过程中可能有新的 job 加入
  const jobs = Array.from(queue)
  queue.clear()
  for (const job of jobs) {
    job()
  }
  isFlushing = false
  // 如果在执行过程中有新的 job 加入，递归处理
  if (queue.size) {
    flushJobs()
  }
}

const nextTick = (() => {
  const callbacks = []
  let pending = false
  
  function flushCallbacks() {
    pending = false
    const copies = callbacks.slice()
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }
  
  // 使用 Promise 微任务
  let timerFunc = () => {
    Promise.resolve().then(flushCallbacks)
  }
  
  return function nextTick(fn) {
    callbacks.push(fn)
    if (!pending) {
      pending = true
      timerFunc()
    }
  }
})()

事件循环顺序：
同步代码 → 微任务队列 → 宏任务队列

使用微任务：
修改数据 → 推入队列 → 同步代码结束 → 微任务执行 → 更新 DOM
                                    ↑ 同一轮事件循环，无延迟

使用宏任务：
修改数据 → 推入队列 → 同步代码结束 → 等待下一轮 → 宏任务执行 → 更新 DOM
                                    ↑ 多了一轮事件循环，有可见延迟

function effect(fn, options = {}) {
  const _effect = new ReactiveEffect(fn, options.scheduler)
  _effect.run()
  return _effect.run.bind(_effect)
}

// 使用示例：带调度器的 effect
const runner = effect(
  () => {
    console.log('count:', state.count)
  },
  {
    scheduler: (effect) => {
      queueJob(effect.run.bind(effect))
    }
  }
)

const state = reactive({ a: 1, b: 2 })

// 如果多个地方需要 a + b 的结果
console.log(state.a + state.b)  // 计算1
console.log(state.a + state.b)  // 计算2（重复计算）

class ComputedRefImpl {
  constructor(getter) {
    this._value = undefined
    this._dirty = true  // 脏标志：true 表示需要重新计算
    this.dep = new Set()  // 依赖这个 computed 的 effect
    
    // 创建一个 effect，但不立即执行
    this.effect = new ReactiveEffect(getter, () => {
      // scheduler：当依赖变化时
      if (!this._dirty) {
        this._dirty = true
        // 通知所有依赖这个 computed 的 effect
        trigger(this, 'value')
      }
    })
  }
  
  get value() {
    // 收集依赖（谁在读取这个 computed）
    track(this, 'value')
    
    if (this._dirty) {
      this._value = this.effect.run()  // 重新计算
      this._dirty = false
    }
    return this._value
  }
}

function computed(getter) {
  return new ComputedRefImpl(getter)
}

const state = reactive({ a: 1, b: 2 })
const sum = computed(() => {
  console.log('计算中...')
  return state.a + state.b
})

// 创建 computed 时：不会立即计算，没有输出

// 第一次访问：触发计算
console.log(sum.value)
// 输出：计算中...
// 输出：3
// _dirty 变为 false

// 第二次访问：直接返回缓存
console.log(sum.value)
// 输出：3（没有"计算中..."）

// 依赖变化：state.a = 3
// 触发 state.a 的 set → trigger
// 找到 sum 内部的 effect → 执行 scheduler
// scheduler 设置 _dirty = true
// 同时 trigger(sum, 'value') 通知 sum 的依赖
// 注意：此时没有重新计算，只是标记为脏

// 再次访问：触发重新计算
console.log(sum.value)
// 输出：计算中...
// 输出：5

const sum = computed(() => state.a + state.b)

watchEffect(() => {
  console.log('sum 变化了:', sum.value)
})

// 当 state.a 变化时：
// 1. state.a 的 trigger 执行
// 2. sum 内部的 effect 的 scheduler 执行
//    → _dirty = true
//    → trigger(sum, 'value')  ← 关键！
// 3. watchEffect 的 effect 被触发
// 4. watchEffect 重新执行，读取 sum.value
//    → 发现 _dirty = true，重新计算
//    → 输出新值

// 如果没有 trigger(sum, 'value')：
// 第 2 步只设置了 _dirty = true
// watchEffect 不知道需要重新执行
// 直到下次有人主动读取 sum.value 才会更新

// 1. 创建组件实例
const instance = {
  isMounted: false,
  subTree: null,
  ctx: null,  // 组件上下文（响应式数据）
  update: null  // 更新函数
}

// 2. 执行 setup，创建响应式数据
const setupResult = Component.setup(props, { emit })
instance.ctx = setupResult

// 3. 创建渲染 effect
function setupRenderEffect(instance) {
  const componentUpdateFn = () => {
    if (!instance.isMounted) {
      // 首次挂载
      // 执行 beforeMount 钩子
      const subTree = instance.render.call(instance.ctx)
      patch(null, subTree, instance.container)
      instance.subTree = subTree
      instance.isMounted = true
      // 执行 mounted 钩子
    } else {
      // 更新
      // 执行 beforeUpdate 钩子
      const prevTree = instance.subTree
      const nextTree = instance.render.call(instance.ctx)
      patch(prevTree, nextTree, instance.container)
      instance.subTree = nextTree
      // 执行 updated 钩子
    }
  }
  
  // 创建 effect，配置 scheduler 实现异步更新
  instance.update = new ReactiveEffect(
    componentUpdateFn,
    () => queueJob(instance.update)  // 调度器
  )
  
  // 首次执行，触发依赖收集
  instance.update.run()
}

执行 instance.update.run()
    │
    ▼
activeEffect = 组件渲染 effect
    │
    ▼
执行 render() 函数
    │
    ├── 访问 state.count → 触发 Proxy get → track(state, 'count')
    │   └── 将组件渲染 effect 添加到 state.count 的依赖集合中
    │
    ├── 访问 state.user.name → 触发 Proxy get → track(user, 'name')
    │   └── 将组件渲染 effect 添加到 user.name 的依赖集合中
    │
    └── ... 其他响应式数据访问
    │
    ▼
render() 返回虚拟 DOM
    │
    ▼
patch 将虚拟 DOM 转换为真实 DOM
    │
    ▼
activeEffect = null

// 用户操作
function handleClick() {
  state.count++  // 假设 state.count 是响应式数据
}

// 完整链路：
// 
// 1. state.count++ → 触发 Proxy set 拦截
//    ↓
// 2. set 拦截中调用 trigger(state, 'count')
//    ↓
// 3. trigger 从 targetMap 中找到依赖 count 的所有 effect
//    找到了：组件渲染 effect
//    ↓
// 4. 调用 effect.scheduler（即 queueJob）
//    ↓
// 5. queueJob 将 instance.update 推入异步队列
//    ↓
// 6. 同步代码执行完毕
//    ↓
// 7. nextTick 的微任务执行 flushJobs
//    ↓
// 8. flushJobs 执行 instance.update
//    ↓
// 9. instance.update 执行 componentUpdateFn
//    ├── 执行 beforeUpdate 钩子
//    ├── 重新执行 render()，生成新的虚拟 DOM
//    ├── 执行 patch，更新真实 DOM
//    └── 执行 updated 钩子
//    ↓
// 10. 用户看到新界面

function unmountComponent(instance) {
  // 执行 beforeUnmount 钩子
  
  // 停止渲染 effect
  if (instance.update) {
    instance.update.effect.stop()
  }
  // effect.stop() 会：
  // 1. 设置 effect.active = false
  // 2. 遍历 effect.deps，从每个 dep 中删除自己
  // 3. 清空 effect.deps
  
  // 卸载 DOM
  unmount(instance.subTree)
  
  // 执行 unmounted 钩子
  
  // 此时，原始对象不再被引用，WeakMap 中的条目自动被垃圾回收
}