网站首页 > 技术文章正文

1.1万字深入细品Vue3.0源码响应式系统笔记「上」

hmc789 2024-11-23 16:22:59 技术文章 2 ℃

作者：hkc52 前端巅峰

转发链接：https://mp.weixin.qq.com/s/A6WgCjQj3KsaKC6kSLy-1A

原文作者：KC

原文链接：https://hkc452.github.io/slamdunk-the-vue3/

前言

1.1万字深入细品Vue3.0源码响应式系统笔记「上」

1.1万字深入细品Vue3.0源码响应式系统笔记「下」

本篇文章由于针对Vue3.0源码响应式系统讲的细致，总共分为上下两篇，本篇为开头篇

effect 是响应式系统的核心，而响应式系统又是 vue3 中的核心，所以从 effect 开始讲起。

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。

export function effect<T = any>(
  fn: () => T,
  options: ReactiveEffectOptions = EMPTY_OBJ
): ReactiveEffect<T> {
  if (isEffect(fn)) {
    fn = fn.raw
  }
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

其中 option 的参数如下，都是属于可选的。

参数 & 含义

lazy 是否延迟触发 effect
computed 是否为计算属性
scheduler 调度函数
onTrack 追踪时触发
onTrigger 触发回调时触发
onStop 停止监听时触发

export interface ReactiveEffectOptions {
  lazy?: boolean
  computed?: boolean
  scheduler?: (job: ReactiveEffect) => void
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
  onStop?: () => void
}

分析完参数之后，继续我们一开始的分析。当我们调用 effect 时，首先判断传入的 fn 是否是 effect，如果是，取出原始值，然后调用 createReactiveEffect 创建新的effect，如果传入的 option 中的 lazy 不为为 true，则立即调用我们刚刚创建的 effect, 最后返回刚刚创建的 effect。
那么createReactiveEffect是怎样是创建 effect的呢？

function createReactiveEffect<T = any>(
  fn: (...args: any[]) => T,
  options: ReactiveEffectOptions
): ReactiveEffect<T> {
  const effect = function reactiveEffect(...args: unknown[]): unknown {
    if (!effect.active) {
      return options.scheduler ? undefined : fn(...args)
    }
    if (!effectStack.includes(effect)) {
      cleanup(effect)
      try {
        enableTracking()
        effectStack.push(effect)
        activeEffect = effect
        return fn(...args)
      } finally {
        effectStack.pop()
        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
}

我们先忽略 reactiveEffect，继续看下面的挂载的属性。

effect 挂载属性含义

id 自增id，唯一标识effect
_isEffect 用于标识方法是否是effect
active effect 是否激活
raw 创建effect是传入的fn
deps 持有当前 effect 的dep 数组
options 创建effect是传入的options
回到 reactiveEffect，如果 effect 不是激活状态，这种情况发生在我们调用了 effect 中的 stop 方法之后，那么先前没有传入调用 scheduler 函数的话，直接调用原始方法fn，否则直接返回。
那么处于激活状态的 effect 要怎么进行处理呢？首先判断是否当前 effect 是否在 effectStack 当中，如果在，则不进行调用，这个主要是为了避免死循环。拿下面测试用例来看

it('should avoid infinite loops with other effects', () => {
    const nums = reactive({ num1: 0, num2: 1 })

    const spy1 = jest.fn(() => (nums.num1 = nums.num2))
    const spy2 = jest.fn(() => (nums.num2 = nums.num1))
    effect(spy1)
    effect(spy2)
    expect(nums.num1).toBe(1)
    expect(nums.num2).toBe(1)
    expect(spy1).toHaveBeenCalledTimes(1)
    expect(spy2).toHaveBeenCalledTimes(1)
    nums.num2 = 4
    expect(nums.num1).toBe(4)
    expect(nums.num2).toBe(4)
    expect(spy1).toHaveBeenCalledTimes(2)
    expect(spy2).toHaveBeenCalledTimes(2)
    nums.num1 = 10
    expect(nums.num1).toBe(10)
    expect(nums.num2).toBe(10)
    expect(spy1).toHaveBeenCalledTimes(3)
    expect(spy2).toHaveBeenCalledTimes(3)
})

如果不加 effectStack，会导致 num2 改变，出发了 spy1, spy1 里面 num1 改变又出发了 spy2, spy2 又会改变 num2，从而触发了死循环。
接着是清除依赖，每次 effect 运行都会重新收集依赖, deps 是持有 effect 的依赖数组，其中里面的每个 dep 是对应对象某个 key 的全部依赖，我们在这里需要做的就是首先把 effect 从 dep 中删除，最后把 deps 数组清空。

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

清除完依赖，就开始重新收集依赖。首先开启依赖收集，把当前 effect 放入 effectStack 中，然后讲 activeEffect 设置为当前的 effect，activeEffect 主要为了在收集依赖的时候使用（在下面会很快讲到），然后调用 fn 并且返回值，当这一切完成的时候，finally 阶段，会把当前 effect 弹出，恢复原来的收集依赖的状态，还有恢复原来的 activeEffect。

 try {
    enableTracking()
    effectStack.push(effect)
    activeEffect = effect
    return fn(...args)
  } finally {
    effectStack.pop()
    resetTracking()
    activeEffect = effectStack[effectStack.length - 1]
  }

那 effect 是怎么收集依赖的呢？vue3 利用 proxy 劫持对象，在上面运行 effect 中读取对象的时候，当前对象的 key 的依赖 set集合会把 effect 收集进去。

export function track(target: object, type: TrackOpTypes, key: unknown) {
  ...
}

vue3 在 reactive 中触发 track 函数，reactive 会在单独的章节讲。触发 track 的参数中，object 表示触发 track 的对象， type 代表触发 track 类型，而 key 则是触发 track 的 object 的 key。在下面可以看到三种类型的读取对象会触发 track，分别是 get、 has、 iterate。

export const enum TrackOpTypes {
  GET = 'get',
  HAS = 'has',
  ITERATE = 'iterate'
}

回到 track 内部，如果 shouldTrack 为 false 或者 activeEffect 为空，则不进行依赖收集。接着 targetMap 里面有没有该对象，没有新建 map，然后再看这个 map 有没有这个对象的对应 key 的依赖 set 集合，没有则新建一个。如果对象对应的 key 的依赖 set 集合也没有当前 activeEffect，则把 activeEffect 加到 set 里面，同时把当前 set 塞到 activeEffect 的 deps 数组。最后如果是开发环境而且传入了 onTrack 函数，则触发 onTrack。所以 deps 就是 effect 中所依赖的 key 对应的 set 集合数组，毕竟一般来说，effect 中不止依赖一个对象或者不止依赖一个对象的一个key，而且一个对象可以能不止被一个 effect 使用，所以是 set 集合数组。

if (!shouldTrack || activeEffect === undefined) {
    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()))
  }
  if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if (__DEV__ && activeEffect.options.onTrack) {
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }

依赖都收集完毕了，接下来就是触发依赖。如果 targetMap 为空，说明这个对象没有被追踪，直接return。

export function trigger(
  target: object,
  type: TriggerOpTypes,
  key?: unknown,
  newValue?: unknown,
  oldValue?: unknown,
  oldTarget?: Map<unknown, unknown> | Set<unknown>
) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    // never been tracked
    return
  }
  ...
}

其中触发的 type, 包括了 set、add、delete 和 clear。

export const enum TriggerOpTypes {
  SET = 'set',
  ADD = 'add',
  DELETE = 'delete',
  CLEAR = 'clear'
}

接下来对 key 收集的依赖进行分组，computedRunners 具有更高的优先级，会触发下游的 effects 重新收集依赖，

const effects = new Set() const computedRunners = new Set() add 方法是将 effect 添加进不同分组的函数，其中 effect !== activeEffect 这个是为了避免死循环，在下面的注释也写的很清楚，避免出现 foo.value++ 这种情况。至于为什么是 set 呢，要避免 effect 多次运行。就好像循环中，set 出发了 trigger ，那么 ITERATE 和当前 key 可能都属于同个 effect，这样就可以避免多次运行了。

const add = (effectsToAdd: Set<ReactiveEffect> | undefined) => {
if (effectsToAdd) {
  effectsToAdd.forEach(effect => {
    if (effect !== activeEffect || !shouldTrack) {
      if (effect.options.computed) {
        computedRunners.add(effect)
      } else {
        effects.add(effect)
      }
    } else {
      // the effect mutated its own dependency during its execution.
      // this can be caused by operations like foo.value++
      // do not trigger or we end in an infinite loop
    }
  })
}
}

下面根据触发 key 类型的不同进行 effect 的处理。如果是 clear 类型，则触发这个对象所有的 effect。如果 key 是 length , 而且 target 是数组，则会触发 key 为 length 的 effects ，以及 key 大于等于新 length的 effects，因为这些此时数组长度变化了。

if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    depsMap.forEach(add)
} else if (key === 'length' && isArray(target)) {
    depsMap.forEach((dep, key) => {
      if (key === 'length' || key >= (newValue as number)) {
        add(dep)
      }
    })
}

下面则是对正常的新增、修改、删除进行 effect 的分组, isAddOrDelete 表示新增或者不是数组的删除，这为了对迭代 key的 effect 进行触发，如果 isAddOrDelete 为 true 或者是 map 对象的设置，则触发 isArray(target) ? 'length' : ITERATE_KEY 的 effect ，如果 isAddOrDelete 为 true 且对象为 map，则触发 MAP_KEY_ITERATE_KEY 的 effect

else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      add(depsMap.get(key))
    }
    // also run for iteration key on ADD | DELETE | Map.SET
    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))
    }
}

最后是运行 effect，像上面所说的，computed effects 会优先运行，因为 computed effects 在运行过程中，第一次会触发上游把cumputed effect收集进去，再把下游 effect 收集起来。
还有一点，就是 effect.options.scheduler，如果传入了调度函数，则通过 scheduler 函数去运行 effect，但是 scheduler 里面可能不一定使用了 effect，例如 computed 里面，因为 computed 是延迟运行 effect，这个会在讲 computed 的时候再讲。

const run = (effect: ReactiveEffect) => {
    if (__DEV__ && effect.options.onTrigger) {
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    } else {
      effect()
    }
}

// Important: computed effects must be run first so that computed getters
// can be invalidated before any normal effects that depend on them are run.
computedRunners.forEach(run)
effects.forEach(run)

可以发现，不管是 track 还是 trigger，都会导致 effect 重新运行去收集依赖。
最后再讲一个 stop 方法，当我们调用 stop 方法后，会清空其他对象对 effect 的依赖，同时调用 onStop 回调，最后将 effect 的激活状态设置为 false

export function stop(effect: ReactiveEffect) {
  if (effect.active) {
    cleanup(effect)
    if (effect.options.onStop) {
      effect.options.onStop()
    }
    effect.active = false
  }
}

这样当再一次调用 effect 的时候，不会进行依赖的重新收集，而且没有调度函数，就直接返回原始的 fn 的运行结果，否则直接返回 undefined。

if (!effect.active) {
  return options.scheduler ? undefined : fn(...args)
}

reactive 是 vue3 中对数据进行劫持的核心，主要是利用了 Proxy 进行劫持，相比于 Object.defineproperty 能够劫持的类型和范围都更好，再也不用像 vue2 中那样对数组进行类似 hack 方式的劫持了。

下面快速看看 vue3 是怎么劫持。首先看看这个对象是是不是 __v_isReadonly 只读的，这个枚举在后面进行讲述，如果是，直接返回，否者调用 createReactiveObject 进行创建。

export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (target && (target as Target).__v_isReadonly) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

createReactiveObject 中，有个四个参数，target 就是我们需要传入的对象，isReadonly 表示要创建的代理是不是只可读的，baseHandlers 是对进行基本类型的劫持，即 [Object,Array] ，collectionHandlers 是对集合类型的劫持, 即 [Set, Map, WeakMap, WeakSet]。

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
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
    return target
  }
  // target already has corresponding Proxy
  if (
    hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  ) {
    return isReadonly ? target.__v_readonly : target.__v_reactive
  }
  // only a whitelist of value types can be observed.
  if (!canObserve(target)) {
    return target
  }
  const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )
  return observed
}

如果我们传入是 target 不是object，直接返回。而如果 target 已经是个 proxy ，而且不是要求这个proxy 是已读的，但这个 proxy 是个响应式的，则直接返回这个 target。什么意思呢？我们创建的 proxy 有两种类型，一种是响应式的，另外一种是只读的。
而如果我们传入的 target 上面有挂载了响应式的 proxy，则直接返回上面挂载的 proxy 。
如果上面都不满足，则需要检查一下我们传进去的 target 是否可以进行劫持观察，如果 target 上面挂载了 __v_skip 属性为 true 或者不是我们再在上面讲参数时候讲的六种类型，或者对象被freeze 了，还是不能进行劫持。

const canObserve = (value: Target): boolean => {
  return (
    !value.__v_skip &&
    isObservableType(toRawType(value)) &&
    !Object.isFrozen(value)
  )
}

如果上面条件满足，则进行劫持，可以看到我们会根据 target 类型的不同进行不同的 handler，最后根据把 observed 挂载到原对象上，同时返回 observed。

 const observed = new Proxy(
    target,
    collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  )
  def(
    target,
    isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
    observed
  )
  return observed

现在继续讲讲上面 ReactiveFlags 枚举，skip 用于标记对象不可以进行代理，可以用于创建 component 的时候，把options 进行 markRaw，isReactive 和 isReadonly 都是由 proxy 劫持返回值，表示 proxy 的属性，raw 是 proxy 上面的原始target ，reactive 和 readonly 是挂载在 target 上面的 proxy

export const enum ReactiveFlags {
  skip = '__v_skip',
  isReactive = '__v_isReactive',
  isReadonly = '__v_isReadonly',
  raw = '__v_raw',
  reactive = '__v_reactive',
  readonly = '__v_readonly'
}

再讲讲可以创建的四种 proxy，分别是reactive、 shallowReactive 、readonly 和 shallowReadonly。其实从字面意思就可以看出他们的区别了。具体细节会在 collectionHandlers 和 baseHandlers 进行讲解

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。这里先介绍 mutableHandlers，因为其他三种 handler 也算是 mutableHandlers 的变形版本。

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}

从 mdn 上面可以看到，

handler.get() 方法用于拦截对象的读取属性操作。
handler.set() 方法是设置属性值操作的捕获器。
handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。
handler.has() 方法是针对 in 操作符的代理方法。
handler.ownKeys() 方法用于拦截
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for…in循环

从下面可以看到 ownKeys 触发时，主要追踪 ITERATE 操作，has 触发时，追踪 HAS 操作，而 deleteProperty 触发时，我们要看看是否删除成功以及删除的 key 是否是对象自身拥有的。

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)
  track(target, TrackOpTypes.HAS, key)
  return result
}

function ownKeys(target: object): (string | number | symbol)[] {
  track(target, TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.ownKeys(target)
}

接下来看看 set handler, set 函数通过 createSetter 工厂方法进行创建，/#PURE/ 是为了 rollup tree shaking 的操作。
对于非 shallow , 如果原来的对象不是数组，旧值是 ref，新值不是 ref，则让新的值赋值给 ref.value , 让 ref 去决定 trigger，这里不展开，ref 会在ref 章节展开。如果是 shallow ，管它三七二十一呢。

const set = /*#__PURE__*/ createSetter()
const shallowSet = /*#__PURE__*/ createSetter(true)
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)
      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
    }

   ...
    return result
  }
}

接下来进行设置，需要注意的是，如果 target 是在原型链的值，那么 Reflect.set(target, key, value, receiver) 的设值值设置起作用的是 receiver 而不是 target，这也是什么在这种情况下不要触发 trigger 的原因。
那么在 target === toRaw(receiver) 时，如果原来 target 上面有 key，则触发 SET 操作，否则触发 ADD 操作。

    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)) {
      if (!hadKey) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }

接下来说说 get 操作，get 有四种，我们先拿其中一种说说。

const get = /*#__PURE__*/ createGetter()
const shallowGet = /*#__PURE__*/ createGetter(false, true)
const readonlyGet = /*#__PURE__*/ createGetter(true)
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)

function createGetter(isReadonly = false, shallow = false) {
  return function get(target: object, key: string | symbol, receiver: object) {
    ...

    
    const res = Reflect.get(target, key, receiver)

    if (isSymbol(key) && builtInSymbols.has(key) || key === '__proto__') {
      return res
    }

    if (shallow) {
      !isReadonly && track(target, TrackOpTypes.GET, key)
      return res
    }

    if (isRef(res)) {
      if (targetIsArray) {
        !isReadonly && track(target, TrackOpTypes.GET, key)
        return res
      } else {
        // ref unwrapping, only for Objects, not for Arrays.
        return res.value
      }
    }

    !isReadonly && track(target, TrackOpTypes.GET, key)
    return isObject(res)
      ? isReadonly
        ? // need to lazy access readonly and reactive here to avoid
          // circular dependency
          readonly(res)
        : reactive(res)
      : res
  }
}

首先如果 key 是 ReactiveFlags，直接返回值，ReactiveFlags 的枚举值在 reactive 中讲过。

 if (key === ReactiveFlags.isReactive) {
  return !isReadonly
} else if (key === ReactiveFlags.isReadonly) {
  return isReadonly
} else if (key === ReactiveFlags.raw) {
  return target
}

而如果 target 是数组，而且调用了 ['includes', 'indexOf', 'lastIndexOf'] 这三个方法，则调用 arrayInstrumentations 进行获取值，

const targetIsArray = isArray(target)
    if (targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }

arrayInstrumentations 中会触发数组每一项值得 GET 追踪，因为一旦数组的变了，方法的返回值也会变，所以需要全部追踪。对于 args 参数，如果第一次调用返回失败，会尝试将 args 进行 toRaw 再调用一次。

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
    }
  }
})

如果 key 是 Symbol ，而且也是 ecma 中 Symbol 内置的 key 或者 key 是获取对象上面的原型，则直接返回 res 值。

const res = Reflect.get(target, key, receiver)

if (isSymbol(key) && builtInSymbols.has(key) || key === 'proto') { return res }

而如果是 shallow 为 true，说明而且不是只读的，则追踪 GET 追踪，这里可以看出，只读不会进行追踪。

if (shallow) {
  !isReadonly && track(target, TrackOpTypes.GET, key)
  return res
}

接下来都是针对非 shallow的。如果返回值是 ref，且 target 是数组，在非可读的情况下，进行 Get 的 Track 操作，对于如果 target 是对象，则直接返回 ref.value，但是不会在这里触发 Get 操作，而是由 ref 内部进行 track。

if (isRef(res)) {
  if (targetIsArray) {
    !isReadonly && track(target, TrackOpTypes.GET, key)
    return res
  } else {
    // ref unwrapping, only for Objects, not for Arrays.
    return res.value
  }
}

对于非只读，我们还要根据 key 进行 Track。而对于返回值，如果是对象，我们还要进行一层 wrap, 但这层是 lazy 的，也就是只有我们读取到 key 的时候，才会读下面的值进行 reactive 包装，这样可以避免出现循环依赖而导致的错误，因为这样就算里面有循环依赖也不怕，反正是延迟取值，而不会导致栈溢出。

!isReadonly && track(target, TrackOpTypes.GET, key)
return isObject(res)
  ? isReadonly
    ? // need to lazy access readonly and reactive here to avoid
      // circular dependency
      readonly(res)
    : reactive(res)
  : res

这就是 mutableHandlers ，而对于 readonlyHandlers，我们可以看出首先不允许任何 set、 deleteProperty 操作，然后对于 get，我们刚才也知道，不会进行 track 操作。剩下两个 shallowGet 和 shallowReadonlyGet，就不在讲了。

export const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet,
  has,
  ownKeys,
  set(target, key) {
    if (__DEV__) {
      console.warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      console.warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  }
}

网站首页 > 技术文章正文

1.1万字深入细品Vue3.0源码响应式系统笔记「上」

前言

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。

参数 & 含义

我们先忽略 reactiveEffect，继续看下面的挂载的属性。

effect 挂载属性含义

reactive 是 vue3 中对数据进行劫持的核心，主要是利用了 Proxy 进行劫持，相比于 Object.defineproperty 能够劫持的类型和范围都更好，再也不用像 vue2 中那样对数组进行类似 hack 方式的劫持了。

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。这里先介绍 mutableHandlers，因为其他三种 handler 也算是 mutableHandlers 的变形版本。

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章 正文

1.1万字深入细品Vue3.0源码响应式系统笔记「上」

前言

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。

参数 & 含义

我们先忽略 reactiveEffect，继续看下面的挂载的属性。

effect 挂载属性 含义

reactive 是 vue3 中对数据进行劫持的核心，主要是利用了 Proxy 进行劫持，相比于 Object.defineproperty 能够劫持的类型和范围都更好，再也不用像 vue2 中那样对数组进行类似 hack 方式的劫持了。

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。 这里先介绍 mutableHandlers， 因为其他三种 handler 也算是 mutableHandlers 的变形版本。

推荐Vue学习资料文章：

猜你喜欢

网站首页 > 技术文章正文

effect 挂载属性含义

baseHandlers 中主要包含四种 handler, mutableHandlers、readonlyHandlers、shallowReactiveHandlers、 shallowReadonlyHandlers。这里先介绍 mutableHandlers，因为其他三种 handler 也算是 mutableHandlers 的变形版本。