响应式：响应式内部的实现原理是怎样的？

function createGetter(isReadonly = false) {
  return function get(target, key, receiver) {
    if (key === "__v_isReactive" /* isReactive */) {
      // __v_isReactive 是一个用于标识一个对象是否是响应式对象的内部标识符
      // 代理 observed.__v_isReactive
      return !isReadonly
    }
    else if (key === "__v_isReadonly" /* isReadonly */) {
      // __v_isReadonly 是一个用于标识一个对象是否是只读对象的内部标识符
      // 代理 observed.__v_isReadonly
      return isReadonly;
    }
    else if (key === "__v_raw" /* raw */) {
      // 当一个响应式对象（通过 reactive 或 readonly）被创建时，Vue 会在该对象上设置 __v_raw，指向该对象的原始未响应式的版本。这个属性对于 Vue 的响应式系统是内部使用的，可以帮助 Vue 在某些操作中恢复对象的原始状态
      // 代理 observed.__v_raw
      return target
    }
    const targetIsArray = isArray(target)
    // arrayInstrumentations 包含对数组一些方法修改的函数
    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 求值
    const res = Reflect.get(target, key, receiver)
    // 内置 Symbol key 不需要依赖收集
    if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {
      return res
    }
    // 依赖收集
    !isReadonly && track(target, "get" /* GET */, key)
    return isObject(res)
      ? isReadonly
        ?
        readonly(res)
        // 如果 res 是个对象或者数组类型，则递归执行 reactive 函数把 res 变成响应式
        : reactive(res)
      : res
  }
}

const arrayInstrumentations = {}
// 在 Vue 3 中，数组方法如 includes、indexOf 和 lastIndexOf 被覆盖并进行了增强，以支持对数组操作的响应式处理
['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
  arrayInstrumentations[key] = function (...args) {
    // toRaw 可以把响应式对象转成原始数据
    const arr = toRaw(this)
    for (let i = 0, l = this.length; i < l; i++) {
      // 依赖收集
      track(arr, "get" /* GET */, i + '')
    }
    // 先尝试用参数本身，可能是响应式数据
    // 调用原始数组 arr 上的方法。这里的 arr[key] 会执行 includes、indexOf 或 lastIndexOf 方法，args 是方法的参数
    const res = arr[key](...args)
    if (res === -1 || res === false) {
      // 如果失败，再尝试把参数转成原始数据
      // 如果调用原生数组方法返回 -1（表示未找到元素）或 false（表示布尔值失败），则会尝试将方法参数转换为原始数据（使用 toRaw），再重新调用原生方法
      return arr[key](...args.map(toRaw))
    }
    else {
      return res
    }
  }
})

// 是否应该收集依赖
let shouldTrack = true
// 当前激活的 effect
// activeEffect 是一个全局变量，它会在 effect 函数执行时被赋值。这个变量用来表示当前正在执行的副作用函数，它将被作为依赖添加到响应式数据的 deps 中
let activeEffect
// 原始数据对象 map，用于存储所有被代理的对象及其对应的依赖关系
// 每个 target（一个响应式对象）对应一个 depsMap，而 depsMap 是一个 Map，存储着该对象每个属性（key）的依赖（dep）
// WeakMap 的使用使得当 target 不再被引用时（即没有其他对象引用它），这些依赖关系能够自动释放，避免内存泄漏
const targetMap = new WeakMap()

function track(target, type, key) {
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    // 每个 target 对应一个 depsMap
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    // 每个 key 对应一个 dep 集合
    depsMap.set(key, (dep = new Set()))
  }
  if (!dep.has(activeEffect)) {
    // 收集当前激活的 effect 作为依赖
    dep.add(activeEffect)
    // 当前激活的 effect 收集 dep 集合作为依赖
    // 同时，将 dep 添加到 activeEffect.deps 中。每个 effect 都会记录它所依赖的 dep 集合（activeEffect.deps），这样在 effect 被停止（比如移除）时，可以移除对应的依赖
    activeEffect.deps.push(dep)
  }
}

function createSetter() {
  // set 函数的参数：
  // * target：目标对象（即响应式对象）。
  // * key：正在赋值的属性的键名。
  // * value：新赋的值。
  // * receiver：调用 set 函数的对象，通常是代理对象。
  return function set(target, key, value, receiver) {
    const oldValue = target[key]
    value = toRaw(value)
    const hadKey = hasOwn(target, key)
    // Reflect.set 是用来执行实际的赋值操作的，它会修改目标对象 target 的属性 key 的值为 value。receiver 是代理对象，Reflect.set 会使用 receiver 确保属性赋值发生在正确的对象上
    const result = Reflect.set(target, key, value, receiver)
    // 如果目标的原型链也是一个 proxy，通过 Reflect.set 修改原型链上的属性会再次触发 setter，这种情况下就没必要触发两次 trigger 了
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        trigger(target, "add" /* ADD */, key, value)
      }
      else if (hasChanged(value, oldValue)) {
        trigger(target, "set" /* SET */, key, value, oldValue)
      }
    }
    return result
  }
}

// 原始数据对象 map
const targetMap = new WeakMap()

function trigger(target, type, key, newValue) {
  // 通过 targetMap 拿到 target 对应的依赖集合
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // 没有依赖，直接返回
    return
  }
  // 临时创建运行的 effects 集合
  const effects = new Set()
  // 添加 effects 的函数
  const add = (effectsToAdd) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => {
        effects.add(effect)
      })
    }
  }
  // SET | ADD | DELETE 操作之一，添加对应的 effects
  if (key !== void 0) {
    add(depsMap.get(key))
  }
  const run = (effect) => {
    // 调度执行
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    }
    else {
      // 直接运行
      effect()
    }
  }
  // 遍历执行 effects
  effects.forEach(run)
}

import { reactive } from 'vue'

const counter = reactive({
  num: 0
})

function logCount() {
  console.log(counter.num)
}

function count() {
  counter.num++
}

logCount()
count()

activeEffect = logCount
logCount()

function wrapper(fn) {
  const wrapped = function(...args) {
    activeEffect = fn
    fn(...args)
  }
  return wrapped
}
const wrappedLog = wrapper(logCount)
wrappedLog()

// 全局 effect 栈
const effectStack = []
// 当前激活的 effect
let activeEffect
function effect(fn, options = EMPTY_OBJ) {
  if (isEffect(fn)) {
    // 如果 fn 已经是一个 effect 函数了，则指向原始函数
    fn = fn.raw
  }
  // 创建一个 wrapper，它是一个响应式的副作用的函数
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    // lazy 配置，计算属性会用到，非 lazy 则直接执行一次
    effect()
  }
  return effect
}
function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect(...args) {
    if (!effect.active) {
      // 非激活状态，则判断如果非调度执行，则直接执行原始函数。
      return options.scheduler ? undefined : fn(...args)
    }
    if (!effectStack.includes(effect)) {
      // 清空 effect 引用的依赖
      cleanup(effect)
      try {
        // 开启全局 shouldTrack，允许依赖收集
        enableTracking()
        // 压栈
        effectStack.push(effect)
        activeEffect = effect
        // 执行原始函数
        return fn(...args)
      }
      finally {
        // 出栈
        effectStack.pop()
        // 恢复 shouldTrack 开启之前的状态
        resetTracking()
        // 指向栈最后一个 effect
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  }
  effect.id = uid++
  // 标识是一个 effect 函数
  effect._isEffect = true
  // effect 自身的状态
  effect.active = true
  // 包装的原始函数
  effect.raw = fn
  // effect 对应的依赖，双向指针，依赖包含对 effect 的引用，effect 也包含对依赖的引用
  effect.deps = []
  // effect 的相关配置
  effect.options = options
  return effect
}

import { reactive} from 'vue'
import { effect } from '@vue/reactivity'

const counter = reactive({
    num: 0,
    num2: 0
})

function logCount() {
    effect(logCount2)
    console.log('num:', counter.num)
}

function count() {
    counter.num++
}

function logCount2() {
  console.log('num2:', counter.num2)
}

effect(logCount)
count()

num2: 0
num: 0
num2: 0

num2: 0
num: 0
num2: 0
num: 1

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

<template>
  <div v-if="state.showMsg">
    {{ state.msg }}
  </div>
  <div v-else>
    {{ Math.random()}}
  </div>
  <button @click="toggle">Toggle Msg</button>
  <button @click="switchView">Switch View</button>
</template>
<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const state = reactive({
        msg: 'Hello World',
        showMsg: true
      })
      function toggle() {
        state.msg = state.msg === 'Hello World' ? 'Hello Vue': 'Hello World'
      }
      function switchView() {
        state.showMsg = !state.showMsg
      }
      return {
        toggle,
        switchView,
        state
      }
    }
  }