.
├── baseHandlers.ts
├── collectionHandlers.ts
├── computed.ts
├── effect.ts
├── index.ts
├── operations.ts
├── reactive.ts
└── ref.ts

const obj = { a: 1, b: { c: 2 } }
const proxy = reactive(obj)
// readonly 返回的代理对象不能被修改，
// 否则在 dev 模式下修改的话 console 会有警告。
const proxy2 = readonly(obj)
// 只会代理一层, 修改 proxy3.b.c 是不会被感知到的
const proxy3 = shallowReactive(obj)
console.log(proxy.b) // 惰性代理 obj.b

// case 1. 对代理对象的修改是会反映到原始对象上的
test('observed value should proxy mutations to original (Object)', () => {
  const original: any = { foo: 1 }
  const observed = reactive(original)
  // set
  observed.bar = 1
  expect(observed.bar).toBe(1)
  expect(original.bar).toBe(1)
})
// case 2. 对同一个原始对象使用 reactive 多次，
// 或者对一个代理对象使用 reactive/readonly，会返回同一个代理对象
test('observing the same value multiple times should return same Proxy', () => {
  const original = { foo: 1 }
  const observed = reactive(original)
  const observed2 = reactive(original)
  expect(observed2).toBe(observed)
})
test('observing already observed value should return same Proxy', () => {
  const original = { foo: 1 }
  const observed = reactive(original)
  const observed2 = reactive(observed)
  expect(observed2).toBe(observed)
})
test('wrapping already wrapped value should return same Proxy', () => {
  const original = { foo: 1 }
  const wrapped = readonly(original)
  const wrapped2 = readonly(wrapped)
  expect(wrapped2).toBe(wrapped)
})
// case 3. 对一个 readonly 对象使用 reactive，
// 会直接返回这个 readonly 对象
test('calling reactive on an readonly should return readonly', () => {
  const a = readonly({})
  const b = reactive(a)
  expect(isReadonly(b)).toBe(true)
  // should point to same original
  expect(toRaw(a)).toBe(toRaw(b))
})
// case 4. 对一个响应式对象使用 readonly，能够正常返回 readonly 对象
test('calling readonly on a reactive object should return readonly', () => {
  const a = reactive({})
  const b = readonly(a)
  expect(isReadonly(b)).toBe(true)
  // should point to same original
  expect(toRaw(a)).toBe(toRaw(b))
})
// case 5. 不同于 reactive 可以代理嵌套的对象，
// shallowReactive 只会代理一层
test('should not make non-reactive properties reactive', () => {
  const props = shallowReactive({ n: { foo: 1 } })
  expect(isReactive(props.n)).toBe(false)
})
test('nested reactives', () => {
  const original = {
    nested: {
      foo: 1
    },
    array: [{ bar: 2 }]
  }
  const observed = reactive(original)
  expect(isReactive(observed.nested)).toBe(true)
  expect(isReactive(observed.array)).toBe(true)
  expect(isReactive(observed.array[0])).toBe(true)
})
// case 6
test('toRaw on object using reactive as prototype', () => {
  const original = reactive({})
  const obj = Object.create(original)
  const raw = toRaw(obj)
  expect(raw).toBe(obj)
  expect(raw).not.toBe(toRaw(original))
})

function reactive(target: object) {
  // if trying to observe a readonly proxy,
  // return the readonly version.
  // 针对 case 3
  if (target && (target as Target)[ReactiveFlags.IS_READONLY]) {
    return target;
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  );
}
export function shallowReactive<T extends object>(target: T): T {
  return createReactiveObject(
    target,
    false,
    shallowReactiveHandlers,
    shallowCollectionHandlers
  )
}
export function readonly<T extends object>(
  target: T
): DeepReadonly<UnwrapNestedRefs<T>> {
  return createReactiveObject(
    target,
    true,
    readonlyHandlers,
    readonlyCollectionHandlers
  )
}
export function shallowReadonly<T extends object>(
  target: T
): Readonly<{ [K in keyof T]: UnwrapNestedRefs<T[K]> }> {
  return createReactiveObject(
    target,
    true,
    shallowReadonlyHandlers,
    readonlyCollectionHandlers
  )
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
) {
  // 也就是说前面说的这个方法只接受对象
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`);
    }
    return target;
  }
  // 对应前面的测试用例 case 2
  // 如果 target 已经是个代理对象，
  // 除非它是被 reacive 代理并且此次调用的是 reayonly，
  // 才会继续下面的流程。
  if (
    // 如果为 true, 说明 target 是一个代理对象
    target[ReactiveFlags.RAW] &&
    // 如果此次调用是 readonly() 并且
    // target 是一个 reactive 代理对象（即 case 4），
    // 才继续流程，否则直接 return
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target;
  }
  // 对应 case 2, 如果原始对象 target 已经被代理过，返回同一个代理对象
  const reactiveFlag = isReadonly
    ? ReactiveFlags.READONLY
    : ReactiveFlags.REACTIVE;
  if (hasOwn(target, reactiveFlag)) {
    return target[reactiveFlag];
  }
  // 有些对象是不可被观察的, 例如 object.frozen
  if (!canObserve(target)) {
    return target;
  }
  // 代理原始对象
  const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor)
      ? collectionHandlers
      : baseHandlers,
  );
  // 将代理对象挂载到原始对象上
  // key 为 ReactiveFlags.READONLY 或 ReactiveFlags.REACTIVE
  def(target, reactiveFlag, observed);
  return observed;
}

export const enum ReactiveFlags {
  // 如果原始对象上带有这个 flag, 那么它将不会被代理
  // 会在上面的 canOvserve 这里检查到被跳过
  SKIP = '__v_skip',
  // 访问代理对象上的这两个 key 时，会在 proxy handlers 里面被拦截
  // 然后返回对应的值，这个后面会提到
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  // 访问代理对上的这个 key 时，会在 handler 里面拦截，返回原始对象
  RAW = '__v_raw',
  // 前面代码注释里提到，代理对象会通过 Object.def 挂载到原始对象上
  // 挂载时用的 key 就是以下两个
  REACTIVE = '__v_reactive',
  READONLY = '__v_readonly',
}

// 对应前面的测试用例 case 2
// 如果 target 已经是个代理对象，
// 除非它是被 reacive 代理并且此次调用的是 reayonly，
// 才会继续下面的流程。
if (
  // 如果为 true, 说明 target 是一个代理对象
  target[ReactiveFlags.RAW] &&
  // 如果此次调用是 readonly() 并且
  // target 是一个 reactive 代理对象（即 case 4），
  // 才继续流程，否则直接 return
  !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
) {
  return target;
}

// 代理原始对象
const observed = new Proxy(
  target,
  collectionTypes.has(target.constructor)
    ? collectionHandlers
    : baseHandlers,
);

const get = /*#__PURE__*/ createGetter();
const shallowGet = /*#__PURE__*/ createGetter(false, true);
const readonlyGet = /*#__PURE__*/ createGetter(true);
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);
export const mutableHandlers = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}
export const readonlyHandlers = {
  has,
  ownKeys,
  get: readonlyGet,
  set: () => {
    if (__DEV__) console.warn('xxx')
  },
  deleteProperty: () => {
    if (__DEV__) console.warn('xxx')
  },
}
export const shallowReactiveHandlers = extend({}, mutableHandlers, {
  get: shallowGet,
  set: shallowSet
})
export const shallowReadonlyHandlers = extend({}, readonlyHandlers, {
  get: shallowGet,
})

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: object, key: string | symbol, receiver: object) {
    // 这里 ReactiveFlags 的拦截前面已经提到过了
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly;
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly;
    } else if (
      // 前面提到的, 如果访问 ReactiveFlags.RAW 会返回原始对象本身
      // 因为代理对象会通过 def 挂载在原始对象上
      // 这里和 receiver 作了个判断，目的应该是处理前面 case 6
      // a.prototype = reactive(obj); a[ReactiveFlags.RAW] 这样的 edge case
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? (target as any)[ReactiveFlags.READONLY]
          : (target as any)[ReactiveFlags.REACTIVE])
    ) {
      return target;
    }
    const targetIsArray = isArray(target);
    // 当访问 arr.includes 等查找方法时, 需要 track 数组里的每一个元素。
    // arrayInstrumentations 是对 includes 等方法的包装, 这里返回包装过后的方法
    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver);
    }
    // 这里取到到了要访问的值
    const res = Reflect.get(target, key, receiver);
    // 访问一些特殊的属性，不作任何 track 的处理
    if ((isSymbol(key) ? builtInSymbols.has(key) : key === `__proto__`) ||
        key === `__v_isRef`
    ) {
      return res;
    }
    // 前面提到，如果是 readonly 就不需要 track 了
    // 因为无法修改，那就不会触发响应，也就没有收集依赖的必要了
    // track 后面会介绍
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key);
    }
    // shallow 只监听一层
    if (shallow) {
      return res;
    }
    // 访问到 ref 会自动解包
    // 如果原始对象是数组的话是不会解包的，这是 by design
    if (isRef(res)) {
      return targetIsArray ? res : res.value;
    }
    // 访问的是一个对象时，惰性代理这个对象
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    return res;
  };
}

const arrayInstrumentations: Record<string, Function> = {}
;['includes', 'indexOf', 'lastIndexOf'].forEach(key => {
  arrayInstrumentations[key] = function(...args: any[]): any {
    const arr = toRaw(this) as any
    for (let i = 0, l = (this as any).length; i < l; i++) {
      track(arr, TrackOpTypes.GET, i + '')
    }
    // we run the method using the original args first (which may be reactive)
    const res = arr[key](...args)
    if (res === -1 || res === false) {
      // if that didn't work, run it again using raw values.
      return arr[key](...args.map(toRaw))
    } else {
      return res
    }
  }
})

function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    const oldValue = (target as any)[key]
    if (!shallow) {
      value = toRaw(value)
      // 如果要修改的是一个 ref，且新值不是 ref，那么修改 ref.value 就好了
      // e.g.
      // const a = ref(1); const obj = reactive({ a });
      // obj.a = 2 相当于 a.value = 2
      // 当然，这里 obj 如果是 shallowReative({ a })，就不会走到这里来了。
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
    }
    const hadKey = hasOwn(target, key)
    // 先修改，再触发响应
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    if (target === toRaw(receiver)) {
      // trigger 触发响应，后面再介绍
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

function deleteProperty(target: object, key: string | symbol): boolean {
  const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  if (result && hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}
function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}
function ownKeys(target: object): (string | number | symbol)[] {
  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.ownKeys(target)
}

const obj = { count: 1 }
console.log(obj.count)
obj.count = 2

const obj = { count: 1 }
log()
setCount(2)
function log() {
  console.log(obj.count)
}
function setCount(v) {
  obj.count = v;
  log()
}

const obj = reactive({ count: 1})
const reactiveEffect = effect(() => {
  console.log(obj.count)
})
obj.count = 2

// The main WeakMap that stores {target -> key -> dep} connections.
// Conceptually, it's easier to think of a dependency as a Dep class
// which maintains a Set of subscribers, but we simply store them as
// raw Sets to reduce memory overhead.
type Dep = Set<ReactiveEffect>
type KeyToDepMap = Map<any, Dep>
const targetMap = new WeakMap<any, KeyToDepMap>()
export interface ReactiveEffect<T = any> {
  (): T
  _isEffect: true
  id: number
  active: boolean
  raw: () => T
  deps: Array<Dep>
  options: ReactiveEffectOptions
}
export interface ReactiveEffectOptions {
  lazy?: boolean
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}

const foo = { a: 1, b: 2 }
const bar = { a: 3 }
const f = reactive(foo)
const b = reactive(bar)

const foo = { a: 1, b: 2 }
const bar = { a: 3 }
const f = reactive(foo)
const b = reactive(bar)
const reactiveEffect1 = effect(() => {
  console.log(f.a, b.a)
})
const reactiveEffect2 = effect(() => {
  console.log(f.a)
})
// ------ 以上代码大致会生成下面的结构 ------
// foo.a 的 dep
const dep1 = new Set([reactiveEffect1, reactiveEffect2])
// bar.a 的 dep
const dep2 = new Set([reactiveEffect1])
reactiveEffect1.deps.push(dep1, dep2)
reactiveEffect2.deps.push(dep1)
const fooDepMap = new Map();
const barDepMap = new Map();
fooDepMap.set('a', dep1)
barDepMap.set('a', dep2)
const targetMap = new WeakMap();
targetMap.set(foo, fooDepMap)
targetMap.set(bar, barDepMap)

if (!isReadonly) {
  track(target, TrackOpTypes.GET, key);
}

// 这两个 enum 的作用主要是为了标记 track 和 trigger 是由哪种操作导致的
export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}
export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}

export function track(target: object, type: TrackOpTypes, key: unknown) {
  // @vue/reactivity 提供了 pauseTracking 和 enableTracking 这两个 api
  // 可以用来手动控制依赖追踪，当调用 pauseTracking 后 shouldTrack 会置为 false
  if (!shouldTrack || activeEffect === undefined) {
    return
  }
  // 确保 depsMap 存在
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()))
  }
  // 确保这个 key 的 dep 存在
  let dep = depsMap.get(key)
  if (!dep) {
    // dep 是个集合，这样确保在同一个属性在同一 ReactiveEffect 里访问多次
    // 不会存储多个 ReactiveEffect，也就不会运行多次 ReactiveEffect
    depsMap.set(key, (dep = new Set()))
  }
  // activeEffect 就是当前正在运行的 ReactiveEffect, 后面会说
  // 这里首次调用的时候，因为没存过这个 effect，所以会建立双向引用的关系
  // 后续再调用的时候就不会进来了
  if (!dep.has(activeEffect)) {
    // 双向引用
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    // debug hook
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

// don't trigger if target is something up in the prototype chain of original
if (target === toRaw(receiver)) {
  if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
}

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  // 找到对应的 depsMap
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  // 声明一个变量存储待会需要重新运行的 ReactiveEffect
  const effects = new Set<ReactiveEffect>()
  // 一个会被复用的工具函数而已
  const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
    if (effectsToAdd) {
      effectsToAdd.forEach(effect => effects.add(effect))
    }
  }
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    // 调了 map.clear() 之类的会清空所有的键，
    // 所有 ReactiveEffect 都要重新运行
    depsMap.forEach(add)
  } else if (key === 'length' && isArray(target)) {
    // 修改数组的 length 来截断数组，需要重新运行依赖了 length 属性
    // 和被删除的元素的 ReactiveEffect
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    // 将对应的 ReactiveEffect 存下来，待会要重新运行
    if (key !== void 0) {
      add(depsMap.get(key))
    }
    // also run for iteration key on ADD | DELETE | Map.SET
    // 会导致数组、集合长度变化的操作，需要重新运行相关属性的 ReactiveEffect
    // 相关属性指的是 array.length, map.keys(), map.entries() etc.
    const isAddOrDelete =
      type === TriggerOpTypes.ADD ||
      (type === TriggerOpTypes.DELETE && !isArray(target))
    if (
      isAddOrDelete ||
      (type === TriggerOpTypes.SET && target instanceof Map)
    ) {
      add(depsMap.get(isArray(target) ? 'length' : ITERATE_KEY))
    }
    if (isAddOrDelete && target instanceof Map) {
      add(depsMap.get(MAP_KEY_ITERATE_KEY))
    }
  }
  // 运行 ReactiveEffect 的工具函数
  const run = (effect: ReactiveEffect) => {
    // debug hook
    if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    // 有些 effect 会有调度器来控制运行，这个后面再说
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      // 这里面会调用传给 effect(fn) 的 fn
      effect()
    }
  }
    // 前面已经将需要重新运行的 ReactiveEffect 都存到 effect 里了
  // 这里遍历后全都执行一遍
  effects.forEach(run)
}

const effectStack: ReactiveEffect[] = []
let activeEffect: ReactiveEffect | undefined

const foo = reactive({ count: 1, double: 2 })
const re1 = effect(() => {
  foo.double = foo.count * 2
})
const re2 = effect(() => {
  console.log('double:', foo.double)
})
foo.count = 2

export interface ReactiveEffect<T = any> {
  (): T
  _isEffect: true
  id: number
  active: boolean
  raw: () => T // 存储传给 effect 的 fn 参数
  deps: Array<Dep> // 前面说的存储对 Dep 的引用
  options: ReactiveEffectOptions
}
export interface ReactiveEffectOptions {
  lazy?: boolean
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}
export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  // 如果传进来的是个 ReactiveEffect, 则使用它原本的 fn 参数
  if (isEffect(fn)) {
    fn = fn.raw
  }
  // 关键逻辑都在这里面
  const effect = createReactiveEffect(fn, options)
  // 前面说的调用完 effect 会自动执行一次
  // 这个行为可以通过 lazy 的选项来控制
  if (!options.lazy) {
    effect()
  }
  return effect
}
function createReactiveEffect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  // 我们说的运行 ReactiveEffect, 其实就是调用这个函数
  // 这里面就是真正的运行逻辑了！我们继续
  const effect = function reactiveEffect(): unknown {
    // @vue/reactivity 提供了一个 stop 函数，
    // 用于手动停止某个 ReactiveEffect 的响应
    // stop 函数里会将 effect.active 置为 false
    if (!effect.active) {
      return options.scheduler ? undefined : fn()
    }
    // 如果 effectStack 里没有这个 effect，就会进入
    // 类似调用栈，当 fn 存在递归时，effectStack 就会存在多个相同的 effect
    if (!effectStack.includes(effect)) {
      // 这里会做些清理依赖的操作，cleanup 函数逻辑继续往下看
      cleanup(effect)
      try {
        // 开启依赖追踪，相关逻辑下面介绍
        enableTracking()
        // 前面说的模拟 callStack
        effectStack.push(effect)
        activeEffect = effect
        // 调用传进来的 fn, 执行用户的逻辑
        return fn()
      } finally {
        // 模拟调用栈 pop
        effectStack.pop()
        // 用户如果手动调了 pauseTracking，
        // 由于 enableTracking 修改了这个状态
        // 因此这里需要恢复依赖追踪
        resetTracking()
        activeEffect = effectStack[effectStack.length - 1]
      }
    }
  } as ReactiveEffect
  effect.id = uid++
  effect._isEffect = true
  effect.active = true
  effect.raw = fn
  effect.deps = []
  effect.options = options
  return effect
}
function cleanup(effect: ReactiveEffect) {
  // 之前存的时候是双向引用, effect 的 deps 数组里持有 Dep,
  // Dep 里也持有 effect
  // 因此这里清理的时候也是双向的
  const { deps } = effect
  if (deps.length) {
    for (let i = 0; i < deps.length; i++) {
      deps[i].delete(effect)
    }
    deps.length = 0
  }
}

it('should not be triggered by mutating a property, which is used in an inactive branch', () => {
  let dummy
  const obj = reactive({ prop: 'value', run: true })
  const conditionalSpy = jest.fn(() => {
    dummy = obj.run ? obj.prop : 'other'
  })
  effect(conditionalSpy)
  expect(dummy).toBe('value')
  expect(conditionalSpy).toHaveBeenCalledTimes(1)
  obj.run = false
  expect(dummy).toBe('other')
  expect(conditionalSpy).toHaveBeenCalledTimes(2)
  obj.prop = 'value2'
  expect(dummy).toBe('other')
  expect(conditionalSpy).toHaveBeenCalledTimes(2)
})

let shouldTrack = true
const trackStack: boolean[] = []
export function pauseTracking() {
  trackStack.push(shouldTrack)
  shouldTrack = false
}
export function enableTracking() {
  trackStack.push(shouldTrack)
  shouldTrack = true
}
export function resetTracking() {
  const last = trackStack.pop()
  shouldTrack = last === undefined ? true : last
}

const convert = <T extends unknown>(val: T): T =>
  isObject(val) ? reactive(val) : val
export function ref(value?: unknown) {
  return createRef(value)
}
function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  let value = shallow ? rawValue : convert(rawValue)
  const r = {
    __v_isRef: true,
    get value() {
      track(r, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newVal) {
      if (hasChanged(toRaw(newVal), rawValue)) {
        rawValue = newVal
        value = shallow ? newVal : convert(newVal)
        trigger(r, TriggerOpTypes.SET, 'value', newVal)
      }
    }
  }
  return r
}

export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>
) {
  // 前面这一堆都是参数的处理，computed 除了可以接受 getter 外
  // 还可以接受一个 setter
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }
  let dirty = true // 通过一个标志位来标记是不是脏值，脏值的话就要重新计算值
  let value: T // 存储值的变量
  let computed: ComputedRef<T> // 返回的 computed
  // 这里创建了一个 ReacttiveEffect，如前面所说，传了 lazy 和 scheduler
  const runner = effect(getter, {
    lazy: true,
    scheduler: () => {
      // 当 computed 的依赖发生变化，trigger 里运行 effect 时就会走到这里来
      // 然后把标记置为 true 表示发生了更新，下次访问 getter 的时候就会重新计算
      // 虽然 effect 的运行是由调度器来控制，但是这里并没有运行 effect
      if (!dirty) {
        dirty = true
        // 这里 trigger，那些依赖 computed 的副作用函数就会被运行
        trigger(computed, TriggerOpTypes.SET, 'value')
      }
    }
  })
  computed = {
    __v_isRef: true,
    [ReactiveFlags.IS_READONLY]:
      isFunction(getterOrOptions) || !getterOrOptions.set,
    // expose effect so computed can be stopped
    effect: runner,
    get value() {
      if (dirty) {
        value = runner()
        dirty = false
      }
      track(computed, TrackOpTypes.GET, 'value')
      return value
    },
    set value(newValue: T) {
      setter(newValue)
    }
  } as any
  return computed
}