Coder小鹿
Coder小鹿

Vue3响应式原理 [Vue3源码系列_xiaolu]

前言

数据响应式是什么？

数据响应式是一种机制，能够侦测到数据的变化，然后响应这个变化到视图

而Vue3设计理念是声明式(Declarative)开发,最大的好处：数据驱动，不用关心dom，只用关心状态数据

Vue2和Vue3响应式的差别

Vue2使用Object.defineProperty实现响应式

Vue3使用Proxy实现响应式

来看看两者的区别:

Object.defineProperty:

  1. 通过对某个属性的getter和setter进行拦截，它只能监听这个属性值的变化
  2. 内部会有很多dep和observer，会在闭包中占内存
  3. 数组的响应式操作还是通过改写Array.proptype的7个数组方法实现的响应式，通过数组下标不能响应式
  4. 在把嵌套层级较深的对象变成响应式的场景中，在组件初始化阶段把数据变成响应式时，遇到子属性仍然是对象的情况，会递归执行 Object.defineProperty 定义子对象的响应式

Proxy:

  1. 是对某个对象的劫持，这样它不仅仅可以监听对象某个属性值的变化，还可以监听对象属性的新增和删除
  2. 依赖关系的保存也有差距 WeakMap{target: {key: [cb1, cb2]}},利用了WeakMap的垃圾回收机制
  3. 要对一些数组方法进行重写
  4. 在把嵌套层级较深的对象变成响应式的场景中，只有在对象属性被访问的时候才会判断子属性的类型来决定要不要递归执行 reactive，这其实是一种延时定义子对象响应式的实现，在性能上会有一定的提升。
  5. 支持map、set这些新类型

这只是一小部分的优化，而在Vue3.2.0,迎来了一个很强大的响应式性能优化，这个之后会细说(使用位运算)

那么到了这里，我们正式开始分析Vue3的响应式模块

reactive

reactive方法 路径: core-main\packages\reactivity\src\reactive.ts

// From setup
export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  // 如果是只读的，那就不需要进行依赖收集，直接返回
  if (isReadonly(target)) {
    return target
  }
  // To: createReactiveObject
  // 返回createReactiveObject方法调用结果
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

通常，我们都会使用reactive和ref方法将数据进行响应式化，我们先从reactive开始分析

reactive方法做了什么？

  1. 判断target是否是只读的
  2. 如果target是只读的，原样返回，只读不用收集依赖
  3. 如果target不是只读的，就返回调用createReactiveObject方法的返回值

reactive方法只是做了一个判断: 判断传入的target是否是只读的

如果是只读的，就直接原样返回

如果不是只读的，调用createReactiveObject方法并返回其执行结果

从createReactiveObject这个命名大概能猜出，这个方法的功能是创建一个响应式对象

那么来看此方法的实现

createReactiveObject

createReactiveObject方法 路径: core-main\packages\reactivity\src\reactive.ts

// From reactive:
// Reutrn To reactive: 返回经过proxy代理的对象，这个proxy代理对象内部的方法取决于handlers
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, 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
  // 如果目标已经是一个代理(响应式对象)，返回它。
  // 例外：在reactive对象上调用 readonly() 不返回
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  // 如果对象在proxyMap上，直接返回，防止反复创建代理对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only a whitelist of value types can be observed.
  // 只能观察到值类型的白名单。
  // To: getTargetType:
  // Return From getTargetType: 获取target的类型
  // INVALID是除了Object Array Map Set WeakMap WeakSet之外的类型，也就是除了这类型之外的类型，返回
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  // 执行Proxy代理，对target对象进行代理
  // 会根据TargetType.COLLECTION判断使用哪个handlers进行代理
  // baseHandlers是一般值类型  collectionHandlers是map set这些类型
  // From: createReactiveObject
  // To: baseHandlers
  const proxy = new Proxy(
    target,
    // From: createReactiveObject
    // To: baseHandlers
    // Return From baseHandlers: 返回包含get、set、deleteProperty、ownKeys、has方法的对象
    // To: collectionHandlers
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // 代理完之后，在proxyMap上收集代理对象，防止反复创建代理对象
  proxyMap.set(target, proxy)
  // 返回proxy代理对象 代理对象上的方法取决于handlers
  return proxy
}

createReactiveObject方法做了什么？

  1. 执行一系列判断，如果target不是对象、如果target已经是一个代理、如果target在proxyMap上、如果target是INVALID类型、都直接返回target
  2. 对target对象进行代理，这次代理的第二个参数对象会根据TargetType.COLLECTION来决定使用哪个handlers对象进行代理
  3. 代理完之后，在proxyMap上收集代理对象，防止反复创建代理对象
  4. 返回proxy代理对象 此时代理对象上面已经有了一些方法，这些方法取决于使用了哪个hanlders对象进行代理

经过一系列判断后，创建并返回一个代理对象

这个代理对象上的方法来自于第二个参数，而第二个参数是什么要取决于类型:

  1. 如果是map、set这种类型，会使用collectionHandlers
  2. 如果是普通的类型，会使用baseHandlers

想要知道我们的代理对象上的方法有哪些，我们先从基础普通类型开始，先来看baseHandlers

baseHandlers 普通类型的handlers

mutableHandlers对象

mutableHandlers对象 路径: core-main\packages\reactivity\src\baseHandlers.ts

// From createReactiveObject:
// Return To createReactiveObject: 返回如下方法
export const mutableHandlers: ProxyHandler = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}
 
  
调用reactive方法传过来的是mutablehandlers对象
 
  
可以看到，这个对象拥有五个方法: get、set、deleteProperty、has、ownKeys
 
  
所以代理对象上拥有这五个方法
 
  
 
   
get: 触发自读取操作
 
  
 
  
 
   
set: 触发自赋值操作
 
  
 
  
 
   
deleteProperty: 触发自 delete操作
 
  
 
  
 
   
has: 触发自 in 操作
 
  
 
  
 
   
ownKeys: 触发自 for in 操作
 
  
 
  
我们一个个来看这些方法
 
  
get -> createGetter
 
  
 
   
get来自createGetter方法 路径: core-main\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From get:
function createGetter(isReadonly = false, shallow = false) {
  // 返回get方法
  return function get(target: Target, key: string | symbol, receiver: object) {
    // 如果key已经是reactive，返回!isReadonly
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
      // 如果key已经是readonly，返回isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
      // 如果key是shallow，返回shallow
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      return shallow
    } else if (
      // 用于给Set中屏蔽原型引起的更新(之后会细说)
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }
    // From createGetter:
    // To isArray:
    // Retrun From isArray: 返回Array.isArray 判断是否是数组类型
    // 判断target是否是数组
    const targetIsArray = isArray(target)
    // From: createGetter:
    // To hasOwn:
    // Return From hasOwn: 判断对象是否有指定的属性
    // 如果不是只读并且 target是数组类型 并且key存在于arrayInstrumentations上
    // 那么返回定义在arrayInstrumentations上的方法 也就是重写的数组方法
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      // 返回数组方法
      // From: createGetter:
      //todo To: arrayInstrumentations
      // 例如: 当执行arr.includes其实执行的是arrayInstrumentations.includes 这样就实现了重写数组方法
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 使用Reflect是为了第三个参数的this
    const res = Reflect.get(target, key, receiver)
    // From crateGetter:
    // To isSymbol:
    // Return From isSymbol: 判断是否是Symbol类型
    // To isNonTrackableKeys:
    // Return From isNonTrackableKeys: 判断是否是非跟踪类型 __proto__,__v_isRef,__isVue
    // 不应该在副作用函数与Symbol这类值之间建立响应联系，
    // 如果key的类型是symbol，不需要收集依赖，返回
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }
    // 如果不是只读，才需要收集依赖，建立响应联系
    if (!isReadonly) {
      // From createGetter:
      // To: track
      // Return From track: 创建依赖集合，trackEffects收集依赖
      track(target, TrackOpTypes.GET, key)
    }
    // 如果是shallow浅响应式，返回经过一次依赖收集的res
    if (shallow) {
      return res
    }
    // From createGetter:
    // To: isRef
    // Return From isRef: 判断r上是否有__v_isRef属性，判断是否是Ref
    // 如果是Ref，脱Ref
    if (isRef(res)) {
      // ref unwrapping - does not apply for Array + integer key.
      // ref unwrapping - 不适用于 Array + integer key。
      const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
      // 脱ref
      return shouldUnwrap ? res.value : res
    }
    // From createGetter:
    // To isObject:
    // Return From isObject: 判断是否是对象类型
    // 如果是对象，根据readonly来决定怎么递归，深只读，深reactive
    if (isObject(res)) {
      // Convert returned value into a proxy as well. we do the isObject check
      // here to avoid invalid value warning. Also need to lazy access readonly
      // and reactive here to avoid circular dependency.
      // 也将返回值转换为代理。 我们进行 isObject 检查
      // 这里是为了避免无效值警告。 还需要惰性访问只读
      // 并在此处进行反应以避免循环依赖。
      // From createGetter:
      //todo To: readonly
      return isReadonly ? readonly(res) : reactive(res)
    }
    // 最后返回res
    return res
  }
}

 
  
createGetter方法做了什么？
 
  
     
   
  1. 判断key是否是reactive、readonly、shallow，并返回对应值
    2.  
   
  2. 判断是否是数组，是数组的话，进行数组方法的重写 (todo)
    3.  
   
  3. 使用Reflect.get获取res值，使用Reflect是为了第三个参数receiver(等同于this)
    4.  
   
  4. 判断是否是symbol类型，如果是则返回
    5.  
   
  5. 判断是否是只读，如果不是只读，调用track方法收集依赖 (todo)
    6.  
   
  6. 判断shallow，如果是true，就返回，不是就继续
    7.  
   
  7. 判断是否是Ref，如果是，脱Ref
    8.  
   
  8. 判断是否是对象，如果是，根据深只读还是深响应式来递归readonly和reactive
    9.  
   
  9. 最后返回res值
    10.  
  
 
  
get内部除了一些判断之外，还会对数组方法进行重写，会调用track收集依赖，会根据是否是对象去递归readonly或reactive
 
  
收集依赖，耳熟能详的词啊，那就来看看这收集依赖是个什么样子吧
 
  
track
 
  
 
   
track方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// From createGetter:
export function track(target: object, type: TrackOpTypes, key: unknown) {
  // 判断shouldTrack和activeEffect
  if (shouldTrack && activeEffect) {
    // 这一整步是为了创建依赖集合，像这样的结构 targetMap: {target -> key -> dep -> effect}
    // targetMap是WeakMap类型，depsMap是Map类型，dep是Set类型
    // targetMap的key值是target，value值是depsMap
    // depsMap的key值是key，value值是dep
    // dep的key值是effect，也就是ReactiveEffect
    // 因此形成了相对应的依赖集合，这个会细说
    let depsMap = targetMap.get(target)
    // 不存在时，初始化依赖集合
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    // 不存在时，初始化依赖集合
    if (!dep) {
      // From track:
      // To createDep:
      // Return From createDep: 创建一个set集合，并且set集合有两个关于响应式性能优化的属性w和n
      depsMap.set(key, (dep = createDep()))
    }
    // DEV忽略
    const eventInfo = __DEV__
      ? { effect: activeEffect, target, type, key }
      : undefined
    // 执行trackEffects，进行依赖的添加
    trackEffects(dep, eventInfo)
  }
}


 
  
track方法做了什么？
 
  
     
   
  1. 判断shouldTrack和activeEffect
    2.  
   
  2. 创建获取依赖集合
    3.  
   
  3. 执行trackEffects方法
    4.  
  
 
  
track内部最主要的一件事就是创建和获取依赖集合了
 
  
所谓的依赖集合，是一个三层结构的集合 target -> key -> dep -> effect，这样的依赖集合可以很清晰的知道依赖的对应关系
 
  
 
   
targetMap是WeakMap类型，depsMap是Map类型，dep是Set类型
 
  
 
  
     
   
  1. targetMap的key值是target，value值是depsMap
    2.  
   
  2. depsMap的key值是key，value值是dep
    3.  
   
  3. dep的key值是effect(可以叫做依赖也可以叫做副作用函数)，也就是ReactiveEffect
    4.  
  
 
  
创建获取依赖集合后，会执行trackEffects方法，来看其实现
 
  
trackEffects
 
  
 
   
trackEffects方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// From track:
// Return To track: 将activeEffect添加到dep中，并且将dep添加到activeEffect.deps中,deps就是一个与当前副作用函数存在联系的依赖集合，为了在清理时能够知道是否需要清理
export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // 将shouldTrack置为false
  let shouldTrack = false
  //todo: 涉及响应式性能优化，后面一起来看，先不管，看else
  if (effectTrackDepth <= maxMarkerBits) {
    if (!newTracked(dep)) {
      dep.n |= trackOpBit // set newly tracked
      shouldTrack = !wasTracked(dep)
    }
  } else {
    // Full cleanup mode.
    // 完全清理模式。
    // 如果Dep有activeEffect，shouldTrack为false，代表不用收集，如果没有，则需要收集
    shouldTrack = !dep.has(activeEffect!)
  }
  // 判断shouldTrack
  if (shouldTrack) {
    // 如果shouldTrack为true，则将activeEffect添加到dep中
    dep.add(activeEffect!)
    // 并且将dep添加到activeEffect.deps中， deps就是一个与当前副作用函数存在联系的依赖集合，为了在清理时能够知道是否需要清理
    activeEffect!.deps.push(dep)
    // DEV忽略
        if (__DEV__ && activeEffect!.onTrack) {
      activeEffect!.onTrack(
        Object.assign(
          {
            effect: activeEffect!
          },
          debuggerEventExtraInfo
        )
      )
    }
  }
}

 
  
trackEffects方法做了什么？
 
  
     
   
  1. 响应式性能优化相关(todo)
    2.  
   
  2. 如果shouldTrack是true，将activeEffect添加到Dep中，这一步就叫做收集依赖
    3.  
   
  3. 将dep添加到activeEffect.deps中，deps就是一个与当前副作用函数存在联系的依赖集合，为了在清理时能够拿到依赖集合进行清理(todo)
    4.  
  
 
  
可以看到，trackEffects才是真正的将依赖收集起来的方法！
 
  
 
   
所以track会创建依赖集合确定对应关系，trackEffects将依赖添加到dep中，完成依赖收集
 
  
 
  
数组方法的重写
 
  
知道了track方法会收集依赖之后，我们回来看数组方法的重写
 
  
在createGetter中，还留下了一个todo: 如果不是只读，并且target是数组类型，并且arrayInstrumentations对象上拥有对应的key，这种情况就是对数组的方法进行处理了
 
  
现在来看createArrayInstrumentations方法
 
  
 
   
createArrayInstrumentations方法 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From createGetter:
// Return To createGetter: // 返回一个包含了重写的几个数组方法'push', 'pop', 'shift', 'unshift', 'splice'，'includes', 'indexOf', 'lastIndexOf'的对象
function createArrayInstrumentations() {
  const instrumentations: Record<string, Function> = {}
  // instrument identity-sensitive Array methods to account for possible reactive
  // values
  // includes indexOf lastIndexOf它们都根据给定的值返回查找结果
  ;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
    // this是代理数组
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 获取原始数组
      const arr = toRaw(this) as any
      // 循环代理数组
      for (let i = 0, l = this.length; i < l; i++) {
        // 对原始数组的每个值进行track依赖收集
        track(arr, TrackOpTypes.GET, i + '')
      }
      // we run the method using the original args first (which may be reactive)
      // 执行includes indexOf lastIndexOf方法，将返回值赋值给res
      const res = arr[key](...args)
      // 如果返回值是-1或false，代表没找到
      if (res === -1 || res === false) {
        // if that didn't work, run it again using raw values.
        // 如果不起作用，返回用原始值调用的结果
        return arr[key](...args.map(toRaw))
      } else {
        // 如果找到了，返回方法的返回结果res
        return res
      }
    }
  })
  // instrument length-altering mutation methods to avoid length being tracked
  // which leads to infinite loops in some cases (#2137)
  // 会隐式修改数组长度的方法 当调用push时，会读取数组的length属性值，也会设置数组的length属性值，会导致两个独立的副作用函数互相影响，会导致栈溢出
  // 所以只要屏蔽这些方法对length属性值的读取，就可以了
  ;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    // this是代理数组
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // From: createArrayInstrumentations
      // To pauseTracking:
      // Return From pauseTracking: 停止依赖收集
      pauseTracking()
      // toRaw获取原始数组，并执行相应方法 push pop shift unshift splice，将结果赋值给res
      const res = (toRaw(this) as any)[key].apply(this, args)
      // From: createArrayInstrumentations
      // To resetTracking:
      // Return From resetTracking: 重启依赖收集
      resetTracking()
      // 将执行结果res返回
      return res
    }
  })
  // 返回instrumentations对象，包含了重写的几个数组方法'push', 'pop', 'shift', 'unshift', 'splice'，'includes', 'indexOf', 'lastIndexOf'
  return instrumentations
}

 
  
重写方法做了什么？
 
  
     
   
  1. 对 includes、indexOf、lastIndexOf它们都根据给定的值返回查找结果的方法进行重写，因为会在代理数组中查找，但是用户的本意肯定是在原始数组中查找，所以在代理数组中找不到，就继续去原始数组中招
    2.  
   
  2. 对会隐式修改数组长度的方法push、pop、shift、unshift、splice进行重写，修改数组长度的方法会读取数组的length属性和改变数组的length属性，这两个变化对应的是两个副作用函数: 当读取数组的length属性的副作用函数执行时，改变数组的length属性的副作用函数也会执行，而其内部又会触发读取数组的length属性的副作用函数执行，因此会导致栈溢出(Maximun call stack size)，所以要重写这几个方法。
    3.  
  
 
  
这一步的注释在: 数组方法重写
 
  
set -> createSetter
 
  
此时get看完了，来看set
 
  
 
   
createSetter方法 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From set:
// Return To Set: 返回set方法，内部会触发依赖，执行相关联的副作用函数
function createSetter(shallow = false) {
  // 返回set方法
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    // 获取旧值
    let oldValue = (target as any)[key]
    // From createSetter:
    // To isReadonly:
    // Return From isReadonly: 判断是否是只读类型 根据据value上是否有ReactiveFlags.IS_READONLY属性判断
    // To isRef:
    // Return From isRef: 判断是否是Ref类型 根据value上是否有__v_isRef属性判断
    // 如果是只读并且Ref并且新值不是Ref，返回false
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false
    }
    // 如果shallow是false(浅响应式)，并且新值不是只读
    if (!shallow && !isReadonly(value)) {
      // From createSetter:
      // To isShallow:
      // Return From isShallow: 判断是否是浅响应式 根据value上是否有ReactiveFlags.IS_SHALLOW属性判断
      // 如果新值也不是浅响应式
      if (!isShallow(value)) {
        // From createSetter:
        // To: toRaw
        // Return From toRaw: 返回原始的代理对象
        value = toRaw(value)
        oldValue = toRaw(oldValue)
      }
      // 如果target不是数组，并且老值是Ref并且新值不是Ref
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        // 直接把新值赋值给老值的value
        oldValue.value = value
        return true
      }
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
      // 在浅模式下，无论是否反应，对象都按原样设置
    }

    const hadKey =
      // From createSetter:
      // To isIntegerKey:
      // Return From isIntegerKey: 判断是否是数字索引
      // 如果target是数组，并且key是数字(索引)
      isArray(target) && isIntegerKey(key)
        ? // 如果索引小于数组长度，代表没有新增，就是SET类型，如果不小于数组长度，代表新增了，就是ADD类型
          Number(key) < target.length
        : // 如果拥有对应的key，是SET类型，如果没有对应的key，代表要新增，就是ADD类型
          hasOwn(target, key)
    // 使用Reflect.set方法，receiver为了this
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    // target === toRaw(receiver)就说明receiver就是target的代理对象,此目的是为了屏蔽由原型引起的更新
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        // From createSetter:
        // To: trigger
        // Return From trigger: 将相对应的副作用函数(effect)推入到deps数组中，然后triggerEffects去遍历执行副作用函数
        // 如果hadkey为false，那么Trigger类型为ADD
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        // From createSetter:
        // To hasChanged:
        // Return From hasChanged: 比较新值和旧值是否发生了变化，包含对 NaN的判断。
        // 如果新旧值发生了变化，那么以SET操作执行trigger，以key做关联
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    // 返回Reflect.set方法的返回值
    return result
  }
}

 
  
createSetter方法做了什么？
 
  
     
   
  1. 判断旧值是否是只读，并且旧值是Ref并且新值不是Ref，返回false
    2.  
   
  2. 判断shallow，并且判断新值不是只读
    3.  
   
  3. 如果shallow是false并且新值不是只读，如果新值不是shallow，新旧值都toRaw
    4.  
   
  4. 如果shallow是false并且新值不是只读,如果target不是数组，并且老值是Ref并且新值不是Ref,直接把新值赋值给老值的value
    5.  
   
  5. 如果target是数组，并且key是数字(索引),如果索引小于数组长度，代表没有新增，就是SET类型，如果不小于数组长度，代表新增了，就是ADD类型
    6.  
   
  6. 如果target不是数组，并且key不是数字，如果拥有对应的key，是SET类型，如果没有对应的key，代表要新增，就是ADD类型
    7.  
   
  7. 执行Reflect.set方法
    8.  
   
  8. 判断target是否等于toRaw(receiver),target === toRaw(receiver)就说明receiver就是target的代理对象,此目的是为了屏蔽由原型引起的更新
    9.  
   
  9. 判断hadkey，如果hadkey为false，那么Trigger类型为ADD
    10.  
   
  10. 如果新旧值发生了变化，就以SET操作执行trigger，以key做关联
    11.  
   
  11. 返回Reflect.set方法的返回值
    12.  
  
 
  
set内部会触发trigger触发依赖
 
  
trigger
 
  
 
   
trigger方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// From createSetter:
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)
  // 如果depsMap不存在
  if (!depsMap) {
    // never been tracked
    // 从未被追踪，返回
    return
  }
  // 创建deps数组
  let deps: (Dep | undefined)[] = []
  // 如果type为CLEAR
  if (type === TriggerOpTypes.CLEAR) {
    // collection being cleared
    // trigger all effects for target
    // 集合被清空
    // 触发所有的依赖
    // 展开target里的所有值，并values执行get，触发所有依赖
    deps = [...depsMap.values()]
    // 如果target是数组并且修改了数组的length属性
  } else if (key === 'length' && isArray(target)) {
    // 遍历副作用函数，找出需要的副作用函数
    depsMap.forEach((dep, key) => {
      // 只有索引值大于等于length时，才需要添加到deps数组中 例如 一个数组有5个元素，你通过arr.length = 3改变数组，此时数组需要更新，但是arr.length = 7，不需要更新 
      if (key === 'length' || key >= (newValue as number)) {
        deps.push(dep)
      }
    })
  } else {
    // schedule runs for SET | ADD | DELETE
    if (key !== void 0) {
      deps.push(depsMap.get(key))
    }

    // also run for iteration key on ADD | DELETE | Map.SET
    switch (type) {
      // 当类型为ADD时，新增
      case TriggerOpTypes.ADD:
        // 如果target不是数组
        if (!isArray(target)) {
          // ADD操作会使对象的键变多，会影响到for in循环的此处，因此取出与ITERATE_KEY关联的副作用函数，推入到deps数组中 (这里的ITERATE_KEY涉及ownKeys for in循环)
          deps.push(depsMap.get(ITERATE_KEY))
          // 如果target是map类型
          if (isMap(target)) {
            // ADD操作会使map的size属性变化，因此取出与MAP_KEY_ITERATE_KEY关联的副作用函数，推入到deps数组中
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        } else if (isIntegerKey(key)) {
          // target是数组，并且key是正整数
          // ADD操作会使数组的length属性变化，因此取出与length属性相关的副作用函数，推入到deps数组中
          // new index added to array -> length changes
          deps.push(depsMap.get('length'))
        }
        break
      // 当类型为DELETE时
      case TriggerOpTypes.DELETE:
        // 如果target不是数组
        if (!isArray(target)) {
          // DELETE操作会使对象的键变少，会影响到for in循环的次数， 因此又要取出取出与ITERATE_KEY关联的副作用函数，推入到deps数组中
          deps.push(depsMap.get(ITERATE_KEY))
          // 如果target是map类型
          if (isMap(target)) {
            // DELETE操作会使map的size属性变化，因此取出与MAP_KEY_ITERATE_KEY关联的副作用函数，推入到deps数组中
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY))
          }
        }
        break
      // 当类型为SET时 
      case TriggerOpTypes.SET:
        // 如果target是map类型
        if (isMap(target)) {
          // SET操作会使map的变化，因此取出与ITERATE_KEY关联的副作用函数，推入到deps数组中
          deps.push(depsMap.get(ITERATE_KEY))
        }
        break
    }
  }
  // DEV忽略
  const eventInfo = __DEV__
    ? { target, type, key, newValue, oldValue, oldTarget }
    : undefined
  // 判断deps数组是否只有一个，也就是只有一个副作用函数
  if (deps.length === 1) {
    if (deps[0]) {
      // DEV忽略
      if (__DEV__) {
        triggerEffects(deps[0], eventInfo)
      } else {
        // 执行triggerEffects
        triggerEffects(deps[0])
      }
    }
  } else {
    // 如果不止一个副作用函数
    const effects: ReactiveEffect[] = []
    // 遍历deps数组
    for (const dep of deps) {
      if (dep) {
        // 将dep推入到effects中
        effects.push(...dep)
      }
    }
    // DEV忽略
    if (__DEV__) {
      triggerEffects(createDep(effects), eventInfo)
    } else {
      // 涉及到set规范 执行triggerEffects
      triggerEffects(createDep(effects))
    }
  }
}

 
  
trigger方法做了什么？
 
  
     
   
  1. 通过依赖集合获取相对应的副作用函数
    2.  
   
  2. 判断类型，如果为clear，清空并触发依赖
    3.  
   
  3. 如果是数组类型并且修改了length属性，只有索引值大于等于length时，才需要添加到deps数组中
    4.  
   
  4. 接着判断操作
    5.  
   
  5. 如果是ADD操作: 如果不是数组类型(那就是对象)，ADD操作会使对象的键变多，会影响到for-in循环的次数，因此取出与ITERATE_KEY(与for-in循环有关)关联的副作用函数，推入到deps数组中。如果是map类型，ADD操作会使map的size属性变化，因此取出与MAP_KEY_ITERATE_KEY关联的副作用函数，推入到deps数组中。如果是数组类型，ADD操作会使数组的length属性变化，因此取出与length属性相关的副作用函数，推入到deps数组中
    6.  
   
  6. 如果是DELETE操作: 如果不是数组类型，DELETE操作会使对象的键变少，会影响到for-in循环的次数， 因此又要取出取出与ITERATE_KEY关联的副作用函数，推入到deps数组中。如果是map类型，DELETE操作会使map的size属性变化，因此取出与MAP_KEY_ITERATE_KEY关联的副作用函数，推入到deps数组中
    7.  
   
  7. 当类型为SET操作: 如果是map类型，SET操作会使map的size变化，因此取出与ITERATE_KEY关联的副作用函数，推入到deps数组中
    8.  
   
  8. 接着根据deps中的副作用函数的多少进行对应的triggerEffects
    9.  
  
 
  
所以trigger方法就是将相对应变化的操作关联的副作用函数添加到deps数组中，然后将deps数组交给triggerEffects方法
 
  
这一步的注释在trigger
 
  
triggerEffects
 
  
 
   
triggerEffects方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// From trigger:
// Return To createSetter: 循环所用的副作用函数，根据有无调度器，使用不同方式执行副作用函数
export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  // 找到相关依赖，循环所有的副作用函数
  for (const effect of isArray(dep) ? dep : [...dep]) {
    // 如果trigger触发执行的副作用函数与现在正在执行的副作用函数相同，则不触发执行
    if (effect !== activeEffect || effect.allowRecurse) {
      // DEV忽略
      if (__DEV__ && effect.onTrigger) {
        effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
      }
      // 如果一个副作用函数存在调度器
      if (effect.scheduler) {
        // 则调用该调度器，并将副作用函数作为参数传递
        effect.scheduler()
      } else {
        // 否则直接执行副作用函数
        effect.run()
      }
    }
  }
}

 
  
triggerEffects方法做了什么？
 
  
     
   
  1. 遍历deps数组
    2.  
   
  2. 判断trigger触发的副作用函数是否与正在执行的函数相同，如果相同，则不执行(这是为了避免栈溢出， 例如obj.count++这种，会触发get和set操作，会互相调用，因此要进行这一层判断)
    3.  
   
  3. 判断副作用函数是否存在调度器
    4.  
   
  4. 如果存在调度器，则调用该调度器effect.scheduler，并将副作用函数作为参数传递，否则effect.run直接执行副作用函数
    5.  
  
 
  
现在知道triggerEffects会取出对应的副作用函数，并将其执行就可以了，effect.run先留着，之后来说
 
  
这一步的注释在triggerEffects
 
  
get和set总结
 
  
get会对那几个数组方法进行重写，会执行track创建获取依赖集合，会执行trackEffects进行响应式性能优化(todo)并进行依赖收集
 
  
set，会执行trigger经过一系列判断，将相对应变化的依赖推入到deps数组中，triggerEffects会对deps数组中的依赖的副作用函数进行执行(通过effect.run或scheduler todo)
 
  
这一步的注释在: 返回get、set
 
  
此时mutableHandlers的get和set方法已经看完，现在来看剩下的方法:has、ownkeys、deleteProperty
 
  
has
 
  
 
   
has方法 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From mutableHandlers:
// Return To mutableHandlers: 如果不是Symbol值，就以HAS类型执行track收集依赖，并返回has操作的结果(has操作来自 in操作符)
function has(target: object, key: string | symbol): boolean {
  // key是否在target上，如果在，返回true，否则返回false
  const result = Reflect.has(target, key)
  // From has:
  // To: builtInSymbols
  // Return From builtInSymbols: 13个内置的Symbol值
  // 如果key不是Symbol类型 或者 key不在builtInSymbols集合上
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    // 以HAS类型进行track依赖收集，关联为key
    track(target, TrackOpTypes.HAS, key)
  }
  // 返回has操作的结果
  return result
}

 
  
has方法是in操作符触发的，做了什么？
 
  
     
   
  1. 判断是否是symbol类型或者是否是内置的symbol
    2.  
   
  2. 如果不是，就以HAS操作进行track依赖收集，关联为key
    3.  
   
  3. 返回has操作的结果
    4.  
  
 
  
这一步的注释在: has
 
  
deleteProperty
 
  
 
   
deleteProperty方法 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From mutableHandlers:
// Return To mutableHandlers: 如果target有相应的key值，并且删除成功，就以DELETE类型执行trigger触发依赖，key为关联，并将删除的老值传过去，并返回deleteProperty的操作结果
function deleteProperty(target: object, key: string | symbol): boolean {
  // hasOwn target上是否有相应的key，有则ture，无则false
  const hadKey = hasOwn(target, key)
  // 获取key值赋值给oldValue
  const oldValue = (target as any)[key]
  // 执行Reflect.deleteProperty操作删除key属性，并将返回值返回给result
  const result = Reflect.deleteProperty(target, key)
  // 如果hadKey为true result为true，代表有相应的key并成功删除
  if (result && hadKey) {
    // 以DELETE类型执行trigger触发依赖，key为关联，并将删除的老值传过去
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  // 返回deleteProperty的操作结果
  return result
}

 
  
deleteProperty由delete操作触发，做了什么？
 
  
     
   
  1. 判断target上是否有对应的key
    2.  
   
  2. 执行Reflect.deleteProperty方法删除key
    3.  
   
  3. 如果有对应的key并且删除成功
    4.  
   
  4. 以DELETE类型执行trigger触发依赖，key为关联，并将删除的老值传过去
    5.  
   
  5. 返回deleteProperty的操作结果
    6.  
  
 
  
这一步的注释在: deleteProperty
 
  
ownKeys
 
  
 
   
ownKeys方法 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From mutableHandlers:
// Return To mutableHandlers: 以ITERATE类型执行track收集依赖，如果操作目标是数组，则使用length属性作为key建立关联，如果不是数组是对象，则使用ITERATE_KEY建立关联
function ownKeys(target: object): (string | symbol)[] {
  // 以ITERATE类型执行track收集依赖
  // 如果操作目标是数组，则使用length属性作为key建立关联，如果不是数组，则使用ITERATE_KEY建立关联
  // 对象时，删除和增加属性值都会影响for in循环，所以用ITERATE_KEY为key做关联
  // 但是数组不一样，数组添加新元素或者修改长度都会影响for in循环，而添加新元素和修改长度都是修改length属性，因此要用length属性为key建立关联
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  // 返回ownkeys的操作结果
  return Reflect.ownKeys(target)
}

 
  
ownKeys由for in触发，做了什么？
 
  
     
   
  1. 以ITERATE类型执行track收集依赖，如果操作目标是数组，则使用length属性作为key建立关联，如果不是数组是对象，则使用ITERATE_KEY建立关联
    2.  
   
  2. 返回ownkeys的操作结果
    3.  
  
 
  
这一步的注释在: ownKeys
 
  
mutableHandlers总结
 
  
此时五个方法都看完了，总结如下:
 
  
 
   
get(触发自读取操作): 触发track创建获取依赖集合，与副作用函数建立联系，能清楚的知道副作用函数的对应关系，然后通过trackEffects将其添加到deps中，进行依赖收集
 
  
 
  
 
   
set(触发自赋值操作): 触发trigger获取对应的副作用函数，根据类型判断是什么操作，添加相关的副作用函数到deps中，然后通过triggerEffects触发这deps中的副作用函数执行(通过effect.run或effect.scheduler)
 
  
 
  
 
   
has(触发自in操作): 如果不是Symbol值，就以HAS类型执行track收集依赖，并返回has操作的结果
 
  
 
  
 
   
deleteProperty(触发自delete操作): 如果target有相应的key值，并且删除成功，就以DELETE类型执行trigger触发依赖，key为关联，并将删除的老值传过去，并返回deleteProperty操作的结果
 
  
 
  
 
   
ownKeys(触发自for-in操作): 以ITERATE类型执行track收集依赖，如果操作目标是数组，则使用length属性作为key建立关联，如果不是数组是对象，则使用ITERATE_KEY建立关联
 
  
 
  
接下来我们回到effect.run的执行
 
  
此时是triggerEffects触发依赖通过effect.run执行相对应的副作用函数这一步
 
  
effect.run
 
  
 
   
effect.run方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
  // From triggerEffects:
  run() {
    // 如果当前不是活跃的
    if (!this.active) {
      // 返回fn fn是effect函数传入的参数，通常是更新函数也就是副作用函数
      return this.fn()
    }
    //todo parent的操作涉及effectScrop
    let parent: ReactiveEffect | undefined = activeEffect
    let lastShouldTrack = shouldTrack
    while (parent) {
      if (parent === this) {
        return
      }
      parent = parent.parent
    }
    try {
      // 取得effect
      this.parent = activeEffect
      // 将this赋给activeEffect
      activeEffect = this
      // 将shouldTrack置为true
      shouldTrack = true
      //todo 涉及响应式性能优化
      trackOpBit = 1 << ++effectTrackDepth
      // 响应式性能优化的地方，先看else
      if (effectTrackDepth <= maxMarkerBits) {
        initDepMarkers(this)
      } else {
        // 执行cleanupEffect
        cleanupEffect(this)
      }
      // 返回fn fn是effect函数传入的参数，通常是更新函数也就是副作用函数
      return this.fn()
    } finally {
      // 响应式性能优化
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this)
      }

      trackOpBit = 1 << --effectTrackDepth
      // 涉及effectScope
      activeEffect = this.parent
      shouldTrack = lastShouldTrack
      this.parent = undefined
    }
  }

 
  
run方法做了什么？
 
  
     
   
  1. 判断active，如果是false，返回fn
    2.  
   
  2. 对effectScope的处理
    3.  
   
  3. 对响应式性能的优化 (todo)
    4.  
   
  4. cleanupEffects 清除依赖
    5.  
   
  5. 返回fn(这个fn就是前面说的相对应的副作用函数哦)执行结果
    6.  
  
 
  
这一步的注释在: effect.run
 
  
可以看到在执行fn副作用函数之前，先执行了cleanupEffects方法清除依赖，但为什么要清除依赖呢？
 
  
举个例子:
 
  
 
   
例子来自《Vuejs设计与实现》 p50
 
  
 
  
effect(function effectFn() {
    document.body.innerText = obj.ok ? obj.text : 'not'
})

 
  
当obj.ok的值为true时，会收集obj.ok和obj.text的依赖，当改变obj.ok为false后，我们期望的是，去改变obj.text值时，obj.text收集的依赖的副作用函数不会去执行。
 
  
但是如果没有清除依赖这一步的话，当我们将obj.ok设为false后，对obj.text的依赖还存在，那么当我们修改obj.text的值时，obj.text依赖的副作用函数还是会执行，这不是我们所期望的
 
  
因此每次副作用函数执行前，都会执行一次清除依赖。而在副作用函数执行时，会重新建立依赖
 
  
那么来看cleanupEffects的实现
 
  
cleanupEffects
 
  
 
   
cleanupEffects方法 路径:
 
  
 
  
// From effect.run:
// Return To run: 清空deps中所有依赖
function cleanupEffect(effect: ReactiveEffect) {
  // 解构出deps数组，trackEffects中activeEffect!.deps.push(dep)这一步就是为了这里
  const { deps } = effect
  // 如果deps不为空
  if (deps.length) {
    // 遍历deps
    for (let i = 0; i < deps.length; i++) {
      // 将每一个dep中的effect依赖(副作用函数)移除
      deps[i].delete(effect)
    }
    // 长度置为0
    deps.length = 0
  }
}

 
  
cleanupEffects方法做了什么？
 
  
     
   
  1. 解构deps数组，trackEffects中activeEffect!.deps.push(dep)这一步就是为了这里
    2.  
   
  2. 遍历deps去删除依赖(副作用函数)
    3.  
   
  3. deps数组也重置为0
    4.  
  
 
  
这一步就是清空deps中所有的依赖
 
  
这一步的注释在: cleanupEffect
 
  
知道了这个清除依赖之后，是时候来看看响应式优化相关的处理了，这个优化就是对清除依赖进行的优化
 
  
我们来看看之前留下的响应式优化相关吧
 
  
响应式优化(位运算 针对清除依赖)
 
  
在Vue3.2.0之前，每次副作用函数执行前，都会触发cleanupEffect清空deps中所有依赖，然后在副作用函数执行过程中重新收集依赖，此过程中涉及到大量的对set的增删操作
 
  
来看看是怎么进行优化的吧
 
  
dep的两个属性
 
  
 
   
createDep方法 路径: core\packages\reactivity\src\dep.ts
 
  
 
  
// From track:
// Return To track: 创建一个set集合，并且set集合有两个关于响应式性能优化的属性w和n
export const createDep = (effects?: ReactiveEffect[]): Dep => {
  //todo: 创建一个新的set集合dep，并添加两个属性w,n (涉及到响应式性能优化，会细说)
  const dep = new Set<ReactiveEffect>(effects) as Dep
  // w表示是否已经被收集
  dep.w = 0
  // n表示是否是新收集的
  dep.n = 0
  return dep
}

 
  
回到createDep方法中，创建dep时，初始化了两个属性:其中 w 表示是否已经被收集(可以这么理解: 老依赖)，n 表示是否新收集(新依赖)。
 
  
三个全局变量
 
  
 
   
三个全局变量 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// The number of effects currently being tracked recursively.
// 当前正在递归跟踪的effects数。
let effectTrackDepth = 0
// 递归嵌套层数
export let trackOpBit = 1

/**
 * The bitwise track markers support at most 30 levels of recursion.
 * This value is chosen to enable modern JS engines to use a SMI on all platforms.
 * When recursion depth is greater, fall back to using a full cleanup.
 * 按位跟踪标记最多支持 30 级递归。
 * 选择此值是为了使现代 JS 引擎能够在所有平台上使用 SMI。
 * 当递归深度更大时，回退到使用完全清理。
 */
const maxMarkerBits = 30

 
  
 
   
effectTrackDepth: 当前正在递归跟踪的effects数
 
  
 
  
 
   
trackOpBit: 递归嵌套层数
 
  
 
  
 
   
maxMarkerBits: 最大嵌套层数
 
  
 
  
回到effect.run
 
  
现在继续回到effect.run中
 
  
 
   
effect.run 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
 try {
      // 取得effect
      this.parent = activeEffect
      // 将this赋给activeEffect
      activeEffect = this
      // 将shouldTrack置为true
      shouldTrack = true
      // 使用左移运算符来表示递归的层数
      // effectTrackDepth初始为0 ++之后为1  1 << 1 = 2
      // 位运算如下: 0000001 左移一位   0000010 此时代表调用了一次effect 0000100 代表递归嵌套了两层
      // 使用位运算可以处理嵌套的effect
      trackOpBit = 1 << ++effectTrackDepth
      // 如果effectTrackDepth <= 30 调用initDepMarkers，否则降级到cleanupEffect
      if (effectTrackDepth <= maxMarkerBits) {
        initDepMarkers(this)
      } else {
        // 执行cleanupEffect
        // From: run
        // To: cleanupEffect
        // Return From cleanupEffect: 清空依赖
        cleanupEffect(this)
      }
      // 返回fn fn是effect函数传入的参数，通常是更新函数也就是副作用函数
      return this.fn()
    } finally {
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this)
      }
      trackOpBit = 1 << --effectTrackDepth

 
  
可以看到中间使用了左移位运算，那么这操作是为了什么？
 
  
使用trackOpBit来代表递归嵌套的层数，通过左移，可以知道现在嵌套了几层，这样就能处理嵌套的effect
 
  
当effectTrackDepth小于等于30时，就调用initDepMarkers而不是cleanupEffects了
 
  
initDepMarkers
 
  
 
   
initDepMarkers方法 路径: core\packages\reactivity\src\dep.ts
 
  
 
  
// From effect.run:
// Return To effect.run: 初始化deps的w属性，代表已经收集依赖
export const initDepMarkers = ({ deps }: ReactiveEffect) => {
  // 如果deps不为空
  if (deps.length) {
    // 遍历dpes
    for (let i = 0; i < deps.length; i++) {
      // 给每个dep的w属性与trackOpBit(记录递归嵌套的层数)进行 | 运算，代表相对应层次的已经收集依赖
      deps[i].w |= trackOpBit // set was tracked
    }
  }
}

 
  
initDepMarkers方法做了什么？
 
  
     
   
  1. 如果deps不为空，遍历deps
    2.  
   
  2. 给每个dep的w属性与trackOpBit(记录递归嵌套的层数)进行 | 运算，举例: w最开始的时候为0，tarckOpBit假设为000100,他们进行 | 运算，得到结果还是000100，这样就代表递归嵌套两次的依赖已经被收集，这样就能清晰的知道哪些依赖被收集了，也代表着这是老依赖
    3.  
  
 
  
主要就是将现在deps的依赖全部用w属性表示，代表收集了的老依赖
 
  
执行完initDepMarkers，不要忘了还有最重要的fn副作用函数要执行
 
  
fn执行，会执行到trackEffects(这一步为什么会执行到这里，之后会在何时触发依赖收集里面说到，现在只要先知道会触发就行)
 
  
现在回到trackEffects之前留下的todo
 
  
回到trackEffects
 
  
 
   
trackEffects方法 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
// From track:
// Return To track: 将activeEffect添加到dep中，并且将dep添加到activeEffect.deps中,deps就是一个与当前副作用函数存在联系的依赖集合，为了在清理时能够知道是否需要清理
export function trackEffects(
  dep: Dep,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // 将shouldTrack置为false
  let shouldTrack = false
  // 如果effectTrackDepth <= 30 没有超过最大递归层数
  if (effectTrackDepth <= maxMarkerBits) {
    // From trackEffects:
    // To newTracked:
    // Retrun From newTracked: 判断是否是新的依赖
    // 如果不是新的依赖
    if (!newTracked(dep)) {
      // 设置为新的依赖
      dep.n |= trackOpBit // set newly tracked
      // From trackEffects:
      // To wasTracked:
      // Reutrn from wasTracked: 看dep.w和递归层数是否相同，如果相同，则说明dep.w已经被收集，返回true，如果不同，返回false
      // 如果已经收集了，shouldTrack为false，如果没有收集shuoldTrack为true
      shouldTrack = !wasTracked(dep)
    }
  } else {
    // Full cleanup mode.
    // 完全清理模式。
    // 如果Dep有activeEffect，shouldTrack为false，代表不用收集，如果没有，则需要收集
    shouldTrack = !dep.has(activeEffect!)
  }
}

 
  
trackEffects方法做了什么？
 
  
     
   
  1. 将shouldTrack置为false
    2.  
   
  2. 如果effectTrackDepth <= 30 没有超过最大递归层数，判断dep是否是新的依赖
    3.  
   
  3. 如果不是是新的依赖，dep.n与trackOpBit进行 | 运算，代表新设置的依赖
    4.  
   
  4. 如果已经收集了，shouldTrack为false，如果没有收集shuoldTrack为true
    5.  
  
 
  
使用dep.n属性表示新收集的依赖
 
  
effect.run finally
 
  
现在回到effct.run执行的finally这里
 
  
 
   
effct.run finally 路径: core\packages\reactivity\src\effect.ts
 
  
 
  
finally {
      // 如果effectTrackDepth <= 30 调用finalizeDepMarkers
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this)
      }
      // 递归层数恢复到上一级
      trackOpBit = 1 << --effectTrackDepth

 
  
finally里面做了什么？
 
  
     
   
  1. 如果effectTrackDepth <= 30 调用finalizeDepMarkers
    2.  
   
  2. 递归层数恢复到上一级
    3.  
  
 
  
finalizeDepMarkers
 
  
 
   
finalizeDepMarkers方法 路径: core\packages\reactivity\src\dep.ts
 
  
 
  
// From effect.run:
// Return To effect.run: 遍历deps，删除曾经被收集过但不是新的依赖，将新的依赖添加到deps中，最后得到的就是删除不必要的旧依赖后的deps
export const finalizeDepMarkers = (effect: ReactiveEffect) => {
  // 解构出effect中的deps
  const { deps } = effect
  // 如果deps不为空
  if (deps.length) {
    // 索引
    let ptr = 0
    // 遍历deps
    for (let i = 0; i < deps.length; i++) {
      // 取得dep
      const dep = deps[i]
      // 曾经被收集过但不是新的依赖，需要删除
      if (wasTracked(dep) && !newTracked(dep)) {
        // 删除依赖
        dep.delete(effect)
      } else {
        // 如果是新收集的依赖，则放入deps中
        deps[ptr++] = dep
      }
      // clear bits
      // 清空状态
      dep.w &= ~trackOpBit
      dep.n &= ~trackOpBit
    }
    // deps数组长度等于删除不必要依赖之后的长度
    deps.length = ptr
  }
}

 
  
finalizeDepMarkers方法做了什么？
 
  
     
   
  1. 解构出effect中的deps，如果deps不为空，遍历deps
    2.  
   
  2. 对每个dep进行判断，判断是否是曾经被收集过但不是新的依赖
    3.  
   
  3. 如果是，删除依赖
    4.  
   
  4. 如果不是，则放入deps中
    5.  
   
  5. 清空状态
    6.  
   
  6. deps数组长度等于删除不必要依赖之后的长度
    7.  
  
 
  
其实就是将之前initDepMarkers中收集的w老依赖和trackEffects中收集的n新依赖进行对比，如果老依赖在新依赖里面没有，就需要删除，如果有就不需要删除，最后得到删除了不需要的老依赖的依赖数组
 
  
 
   
cleanupEffect会删除deps中所有的依赖，而优化后只需要删除不需要的老依赖，减少了对set的增删，因此就得到了相对应的优化
 
  
 
  
这一步的注释在: 响应式优化
 
  
reactive总结
 
  
     
   
  1. 通过createReativeObject方法创建拥有get、set、has、ownkeys、deleteProperty的代理对象
    2.  
   
  2. get、set来自createGetter、createSetter方法
    3.  
   
  3. get会触发track创建获取依赖集合，track会触发trackEffects进行依赖收集
    4.  
   
  4. set会触发trigger获取相对应的依赖集合，trigger会触发triggerEffects进行调用相对应的副作用函数，也就是effect.run
    5.  
   
  5. effect.run内部会执行initDepMarkers，使用dep.w标记老依赖
    6.  
   
  6. 执行fn也就是副作用函数，内部会执行get，get会执trackEffects
    7.  
   
  7. trackEffects中使用dep.n标记新的依赖
    8.  
   
  8. 最后在finally中通过dep.w和dep.n的对比，删除曾经被收集过但不是新的依赖，将新的依赖添加到deps中，最后得到的就是删除不必要的旧依赖后的deps
    9.  
   
  9. 递归层数恢复到上一级
    10.  
  
 
  
这就是reactive的一些操作了，其实看起来挺简单的是吧
 
  
看完了reactive，那我们就接着把其他三个一起看看吧
 
  
之前我们看的是mutableHandlers
 
  
现在在baseHandlers中还剩下:
 
  
     
   
  1. shallowReactiveHandlers对象
    2.  
   
  2. readonlyHandlers对象
    3.  
   
  3. shallowReadonlyHandlers对象
    4.  
  
 
  
这三个对象分别对应三个响应式方法:
 
  
 
   
shallowReactiveHandlers: shallowReactive
 
  
 
  
 
   
readonlyHandlers: readonly
 
  
 
  
 
   
shallowReadonlyHandlers: shallowReadonlyHandlers
 
  
 
  
shallowReactive
 
  
shallowReactiveHandlers对象
 
  
 
   
shallowReactiveHandlers对象 路径: core-main\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From createReactiveObject:
// To extend: 
// Return From extend: extend就是Object.assign方法
// Return To createReactiveObject: 返回如下方法
export const shallowReactiveHandlers = /*#__PURE__*/ extend(
  {},
  mutableHandlers,
  {
    get: shallowGet,
    set: shallowSet
  }
)

 
  
extend就是Object.assign
 
  
因此shallowReactiveHandlers对象是这样的
 
  
const shallowReactiveHandlers = {
    get: shallowGet,
    set: shallowSet,
    deleteProperty,
    has,
    ownKeys
}

 
  
可以看到deleteProperty、has、ownKeys方法和reactive的是一样的
 
  
get和set则是shallowGet和shallowSet
 
  
shallowGet
 
  
 
   
shallowGet 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
const shallowGet = /*#__PURE__*/ createGetter(false, true)
// 传入参数后 shallow为true
function createGetter(isReadonly = false, shallow = false) 

 
  
可以看到createGetter此次的shallow为true
 
  
这里的createGetter代码就不放上来了，可以自己去看一下，当shallow为true时，只会执行一次最表面的track，不会去判断是否是对象从而递归
 
  
因此shallowGet只会收集一次表面的依赖
 
  
shallowSet
 
  
 
   
shallowSet 路径: core\packages\reactivity\src\baseHandlers.ts
 
  
 
  
const shallowSet = /*#__PURE__*/ createSetter(true)
// 传入参数后 shallow为true
function createSetter(shallow = false)

 
  
可以看到createSetter此次的shallow为true
 
  
看看createSetter内部怎么处理的
 
  
    // 如果shallow是false，并且新值不是只读
    if (!shallow && !isReadonly(value)) {
    } else {
      // in shallow mode, objects are set as-is regardless of reactive or not
      // 在shallow模式下，无论是否是reactive，对象都按原样设置
    }

 
  
之后的操作都还是一样的，只是shallow模式下面，对象都按原样设置
 
  
readonly
 
  
readonlyHandlers对象
 
  
 
   
readonlyHandlers对象 路径: core-main\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From createReactiveObject:
// Return To createReactiveObject: 返回如下方法
export const readonlyHandlers: ProxyHandler<object> = {
  get: readonlyGet,
  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
  }
}

 
  
可以看到readonlyHandlers只有三个方法: get、set、deleteProperty
 
  
不过set和deleteProperty都只是返回true，不会执行其他操作
 
  
因此来看get
 
  
readonlyGet
 
  
const readonlyGet = /*#__PURE__*/ createGetter(true)
// 传入参数后 isReadonly为true
function createGetter(isReadonly = false, shallow = false)

 
  
将isReadonly为true代入进createGetter中
 
  
    // 如果是只读，不会进行数组方法的重写
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 如果是只读，不会进行track收集依赖
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    // 如果是对象，递归遍历执行readonly
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res)
    }

 
  
可以看到isReadonly为true时，并不会收集依赖，不会进行数组方法的重写，如果是对象的话，还会递归执行readonly，都不会收集依赖
 
  
所以readonly不会收集依赖，只能读取值
 
  
shallowReadonly
 
  
shallowReadonlyHandlers对象
 
  
 
   
shallowReadonlyHandlers对象 路径: core-main\packages\reactivity\src\baseHandlers.ts
 
  
 
  
// From createReactiveObject:
// Return To createReactiveObject: 返回如下方法
export const shallowReadonlyHandlers = /*#__PURE__*/ extend(
  {},
  readonlyHandlers,
  {
    get: shallowReadonlyGet
  }
)

 
  
经过extends之后的shallowReadonlyHandlers对象
 
  
const shallowReadonlyHandlers = {
  get: shallowReadonlyGet,
  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
  }
}

 
  
可以看到shallowReadonlyHandlers只有三个方法: get、set、deleteProperty
 
  
不过set和deleteProperty都只是返回true，不会执行其他操作
 
  
因此来看get
 
  
shallowReadonlyGet
 
  
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)
// 传入参数后 isReadonly为true shallow为true
function createGetter(isReadonly = false, shallow = false)

 
  
将isReadonly为true shallow为true代入进createGetter中
 
  
    // 如果是只读，不会进行数组方法的重写
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    // 如果是只读，不会进行track收集依赖
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    // 如果是shallow浅响应式，返回没有经过依赖收集的res
    if (shallow) {
      return res
    }

 
  
可以看到，如果isReadonly为true、shallow为true，不会进行数组方法的重写，不会进行track收集依赖，并且在shallow这里返回后，不会进行对象的递归
 
  
所以shallowReadonly不会进行数组方法的重写，不会进行track收集依赖，并且不会进行对象的递归，形成浅只读
 
  
集合类型
 
  
集合类型里面涉及的方法较多，也不是很常用，所以我这里放了代码逐行注释，想了解的可以看一看，觉得繁琐的可以跳到下一段
 
  
现在分析完了baseHandlers，其实这只是一部分，让我们回到createReactiveObject方法中
 
  
const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )

 
  
可以看到，我们之前分析的是baseHandlers，现在如果是集合类型，就会走collectionHandlers
 
  
现在就来到collectionHandlers，而collectionHandlers其实是传进来的mutableCollectionHandlers
 
  
mutableCollectionHandlers
 
  
 
   
mutableCollectionHandlers 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From createReactiveObject
export const mutableCollectionHandlers: ProxyHandler<CollectionTypes> = {
  // get方法来自createInstrumentationGetter方法
  get: /*#__PURE__*/ createInstrumentationGetter(false, false)
}

 
  
可以看到mutableCollectionHandlers是一个包含get方法的对象，这个get方法来自createInstrumentationGetter方法
 
  
createInstrumentationGetter
 
  
 
   
createInstrumentationGetter方法 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableCollectionHandlers get:
function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
  // 经过一系列判断获得instrumentations对象
  const instrumentations = shallow
    ? isReadonly
      ? shallowReadonlyInstrumentations
      : shallowInstrumentations
    : isReadonly
    ? readonlyInstrumentations
    : mutableInstrumentations
  // 返回一个函数，这个函数就是get
  return (
    target: CollectionTypes,
    key: string | symbol,
    receiver: CollectionTypes
  ) => {
    // 如果key是ReactiveFlags.IS_REACTIVE
    if (key === ReactiveFlags.IS_REACTIVE) {
      // 返回!isReadonly
      return !isReadonly
      // 如果key是ReactiveFlags.IS_READONLY
    } else if (key === ReactiveFlags.IS_READONLY) {
      // 返回isReadonly
      return isReadonly
      // 如果key是ReactiveFlags.RAW
    } else if (key === ReactiveFlags.RAW) {
      // 返回target
      return target
    }
    // 返回Reflect.get操作结果
    return Reflect.get(
      // 如果instrumentations对象是否有key 并且key在target上，返回instrumentations[key]，否则返回target[key]
      hasOwn(instrumentations, key) && key in target
        ? instrumentations
        : target,
      key,
      receiver
    )
  }
}

 
  
createInstrumentationGetter方法做了什么？
 
  
     
   
  1. 一系列判断
    2.  
   
  2. 返回Reflect.get的操作结果，其中涉及判断 两处都涉及了instrumentations对象
    3.  
  
 
  
instrumentations对象
 
  
 
   
instrumentations对象 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From createInstrumentationGetter:
const [
  mutableInstrumentations,
  readonlyInstrumentations,
  shallowInstrumentations,
  shallowReadonlyInstrumentations
] = /* #__PURE__*/ createInstrumentations()

 
  
可以看到这几个对象都来自createInstrumentations方法
 
  
createInstrumentations
 
  
 
   
createInstrumentations方法 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From createInstrumentationGetter:
function createInstrumentations() {
  // mutableInstrumentations是键类型为string，值类型为Function的对象
  const mutableInstrumentations: Record<string, Function> = {
    // get方法
    get(this: MapTypes, key: unknown) {
      return get(this, key)
    },
    // size的getter
    get size() {
      return size(this as unknown as IterableCollections)
    },
    // has
    has,
    // add
    add,
    // set
    set,
    // delte
    delete: deleteEntry,
    // clear
    clear,
    // forEach
    forEach: createForEach(false, false)
  }
  // shallowInstrumentations对象
  const shallowInstrumentations: Record<string, Function> = {
    get(this: MapTypes, key: unknown) {
      return get(this, key, false, true)
    },
    get size() {
      return size(this as unknown as IterableCollections)
    },
    has,
    add,
    set,
    delete: deleteEntry,
    clear,
    forEach: createForEach(false, true)
  }
  // readonlyInstrumentations对象
  const readonlyInstrumentations: Record<string, Function> = {
    get(this: MapTypes, key: unknown) {
      return get(this, key, true)
    },
    get size() {
      return size(this as unknown as IterableCollections, true)
    },
    has(this: MapTypes, key: unknown) {
      return has.call(this, key, true)
    },
    add: createReadonlyMethod(TriggerOpTypes.ADD),
    set: createReadonlyMethod(TriggerOpTypes.SET),
    delete: createReadonlyMethod(TriggerOpTypes.DELETE),
    clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
    forEach: createForEach(true, false)
  }
  // shallowReadonlyInstrumentations对象
  const shallowReadonlyInstrumentations: Record<string, Function> = {
    get(this: MapTypes, key: unknown) {
      return get(this, key, true, true)
    },
    get size() {
      return size(this as unknown as IterableCollections, true)
    },
    has(this: MapTypes, key: unknown) {
      return has.call(this, key, true)
    },
    add: createReadonlyMethod(TriggerOpTypes.ADD),
    set: createReadonlyMethod(TriggerOpTypes.SET),
    delete: createReadonlyMethod(TriggerOpTypes.DELETE),
    clear: createReadonlyMethod(TriggerOpTypes.CLEAR),
    forEach: createForEach(true, true)
  }
  // 通过createIterableMethod方法操作keys values entries Symbol.iterator迭代器方法
  const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
  iteratorMethods.forEach(method => {
    mutableInstrumentations[method as string] = createIterableMethod(
      method,
      false,
      false
    )
    readonlyInstrumentations[method as string] = createIterableMethod(
      method,
      true,
      false
    )
    shallowInstrumentations[method as string] = createIterableMethod(
      method,
      false,
      true
    )
    shallowReadonlyInstrumentations[method as string] = createIterableMethod(
      method,
      true,
      true
    )
  })
  // 返回这四个对象
  return [
    mutableInstrumentations,
    readonlyInstrumentations,
    shallowInstrumentations,
    shallowReadonlyInstrumentations
  ]
}

 
  
createInstrumentations方法做了什么？
 
  
     
   
  1. 创建了四个对象，对象内部有很多方法
    2.  
   
  2. 通过createIterableMethod方法操作keys、values、entries、Symbol.iterator迭代器方法
    3.  
   
  3. 返回这四个对象
    4.  
  
 
  
现在来看mutableInstrumentations内部的方法
 
  
get
 
  
 
   
get 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
function get(
  target: MapTypes,
  key: unknown,
  isReadonly = false,
  isShallow = false
) {
  // #1772: readonly(reactive(Map)) should return readonly + reactive version
  // of the value
  target = (target as any)[ReactiveFlags.RAW]
  // 获取原始target
  const rawTarget = toRaw(target)
  // 获取原始key
  const rawKey = toRaw(key)
  // 如果key不等于原始key
  if (key !== rawKey) {
    // 如果不是只读，以GET类型执行track,以key为关联
    !isReadonly && track(rawTarget, TrackOpTypes.GET, key)
  }
  // 以GET类型执行track,以key为关联，以rawKey为关联
  !isReadonly && track(rawTarget, TrackOpTypes.GET, rawKey)
  // From get:
  // To getProto:
  // Return From getProto: 返回对象原型
  // 从rawTarget获取原型，并从原型中解构出has方法
  const { has } = getProto(rawTarget)
  // From get:
  // To toShallow:
  // Return From toShallow: 啥也没做，返回value值
  // To toReadOnly:
  // Return From toReadOnly: 如果是对象，返回readonly(value)，如果不是对象，返回value
  // To toReactive:
  // Return From toReactive: 如果是对象，返回reactive(value)，如果不是对象，返回value
  const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
  // 如果rawTraget上有key
  if (has.call(rawTarget, key)) {
    // 这里wrap是包裹一层响应式数据，避免数据污染
    // 返回包裹响应式的target.get(key)
    return wrap(target.get(key))
    // 如果rawTraget上有rawKey
  } else if (has.call(rawTarget, rawKey)) {
    // 这里wrap是包裹一层响应式数据，避免数据污染
    // 返回包裹响应式的target.get(rawKey)
    return wrap(target.get(rawKey))
    // 如果target不等于rawTarget 不等于原始target
  } else if (target !== rawTarget) {
    // #3602 readonly(reactive(Map))
    // ensure that the nested reactive `Map` can do tracking for itself
    // 确保嵌套的响应式 `Map` 可以自己进行跟踪
    target.get(key)
  }
}

 
  
get做了什么？
 
  
     
   
  1. 如果不是只读，以GET类型执行track,以key为关联
    2.  
   
  2. 并根据target上是否有key或rawKey返回经过wrap包裹的值
    3.  
  
 
  
size
 
  
 
   
size 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To mutableInstrumentations: 如果不是只读，以TrackOpTypes.ITERATE类型执行track，以ITERATE_KEY为关联 因为改变size会影响for in循环，因此用ITERATE_KEY，并返回Reflect.get size的返回值
function size(target: IterableCollections, isReadonly = false) {
  // 获取原始target
  target = (target as any)[ReactiveFlags.RAW]
  // 如果不是只读 以TrackOpTypes.ITERATE类型执行track，以ITERATE_KEY为关联 因为改变size会影响for in循环，因此用ITERATE_KEY
  !isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
  // 返回Reflect.get size的返回值
  return Reflect.get(target, 'size', target)
}

 
  
size做了什么？
 
  
     
   
  1. 如果不是只读 以TrackOpTypes.ITERATE类型执行track，以ITERATE_KEY为关联 因为改变size会影响for-in循环，因此用ITERATE_KEY
    2.  
   
  2. 返回Reflect.get size的返回值
    3.  
  
 
  
has
 
  
 
   
has 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To has: 根据key是否等于原始key，以GET类型执行track,以key或rawKey作为关联，判断key和rawKey是否相等，相等返回target.has(key)的结果，不相等返回target.has(key) || target.has(rawKey)的结果
function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
  // 获取原始target
  const target = (this as any)[ReactiveFlags.RAW]
  // 原始traget
  const rawTarget = toRaw(target)
  // 原始key
  const rawKey = toRaw(key)
  // 如果key不等于原始key
  if (key !== rawKey) {
    // 如果不是只读，以GET类型执行track,以key为关联
    !isReadonly && track(rawTarget, TrackOpTypes.HAS, key)
  }
  // 以GET类型执行track,以key为关联，以rawKey为关联
  !isReadonly && track(rawTarget, TrackOpTypes.HAS, rawKey)
  // 判断是否相等，相等返回target.has(key)的结果，不相等返回target.has(key) || target.has(rawKey)的结果
  return key === rawKey
    ? target.has(key)
    : target.has(key) || target.has(rawKey)
}

 
  
has做了什么？
 
  
     
   
  1. 根据key是否等于原始key，以GET类型执行track,以key为关联以key或rawKey作为关联
    2.  
   
  2. 判断key和rawKey是否相等，相等返回target.has(key)的结果，不相等返回target.has(key) || target.has(rawKey)的结果
    3.  
  
 
  
add
 
  
 
   
add 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To mutableInstrumentations: 如果value不在target上，执行target.add添加，以ADD类型执行trigger，以value为关联，将value值传过去，返回添加后的集合
function add(this: SetTypes, value: unknown) {
  // 原始value
  value = toRaw(value)
  // 原始集合
  const target = toRaw(this)
  // 获取target的原型对象
  const proto = getProto(target)
  // 调用原型对象的has方法，判断value是否在target中，在的话为true，不在为fasle
  const hadKey = proto.has.call(target, value)
  // 判断hadKey
  if (!hadKey) {
    // 如果hadKey为false,执行target.add方法
    target.add(value)
    // 以ADD类型执行trigger，以value为关联，将value值传过去
    trigger(target, TriggerOpTypes.ADD, value, value)
  }
  // 返回添加后的集合
  return this
}

 
  
add做了什么？
 
  
     
   
  1. 调用原型对象的has方法，判断value是否在target中
    2.  
   
  2. 如果hadKey为false,执行target.add方法，以ADD类型执行trigger，以value为关联，将value值传过去
    3.  
   
  3. 返回添加后的集合
    4.  
  
 
  
set
 
  
 
   
set 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To set: 判断key是否在target上，如果不在，用原始key去判断，之后执行set方法，
// 在判断key是否在target上，如果在，并且新旧值发生改变，以SET类型执行trigger，以key为关联，将新旧值都传过去，
// 如果不在，以ADD类型执行trigger，以key为关联，将value值传过去
function set(this: MapTypes, key: unknown, value: unknown) {
  // 获取原始value
  value = toRaw(value)
  // 获取原始集合
  const target = toRaw(this)
  // getProto获取target的原型对象，并从中解构出has和get方法
  const { has, get } = getProto(target)
  // hadKey target是否有key，如果有为true，否则为false
  let hadKey = has.call(target, key)
  // 判断hadKey
  if (!hadKey) {
    // 如果hadKey为false,获取原始key
    key = toRaw(key)
    // 再用原始key去判断hadKey
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    // DEV忽略
    checkIdentityKeys(target, has, key)
  }
  // 获取oldValue
  const oldValue = get.call(target, key)
  // 调用set方法
  target.set(key, value)
  // 再判断hadKey
  if (!hadKey) {
    // 如果为false，以ADD类型执行trigger，以key为关联，将value值传过去
    trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    // 如果hadKey为true，并且新旧值发生改变，以SET类型执行trigger，以key为关联，将新旧值都传过去
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
  // 返回执行后的集合
  return this
}

 
  
set做了什么？
 
  
     
   
  1. 判断key是否在target上，如果不在，用原始key再去判断
    2.  
   
  2. 用get获取旧值，调用set
    3.  
   
  3. 再判断hadkey，如果为false，以ADD类型执行trigger，以key为关联，将value值传过去
    4.  
   
  4. 如果hadKey为true，并且新旧值发生改变，以SET类型执行trigger，以key为关联，将新旧值都传过去
    5.  
   
  5. 返回执行后的集合
    6.  
  
 
  
delete
 
  
 
   
delete 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To mutableInstrumentations: 判断key是否在target上，如果不在，用原始key去判断，之后执行delete方法
// 如果key在target上，以DELETE类型执行trigger，以key为关联，将undefined，oldValue传过去
// 返回delete执行的结果
function deleteEntry(this: CollectionTypes, key: unknown) {
  // 获取原始集合
  const target = toRaw(this)
  // 解构出原型对象上的has和get方法
  const { has, get } = getProto(target)
  // 判断key是否在target上，如果在，hadKey为true，如果不在hadKey为false
  let hadKey = has.call(target, key)
  // 判断hadKey
  if (!hadKey) {
    // 如果hadKey为false,获取原始key
    key = toRaw(key)
    // 用原始key再去判断hadKey
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    // DEV忽略
    checkIdentityKeys(target, has, key)
  }
  // 获取oldValue
  const oldValue = get ? get.call(target, key) : undefined
  // forward the operation before queueing reactions
  // 在queue reactions之前调用delete方法
  const result = target.delete(key)
  // 判断hadKey
  if (hadKey) {
    // 如果key在target上，以DELETE类型执行trigger，以key为关联，将undefined，oldValue传过去
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  // 返回delete执行的结果
  return result
}

 
  
delete做了什么？
 
  
     
   
  1. 判断key是否在target上，如果不在，用原始key去判断
    2.  
   
  2. 执行delete方法
    3.  
   
  3. 如果key在target上，以DELETE类型执行trigger，以key为关联，将undefined，oldValue传过去
    4.  
   
  4. 返回delete执行的结果
    5.  
  
 
  
clear
 
  
 
   
clear 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To mutableInstrumentations: 执行clear，判断hadItems，如果为true,以CLEAR类型执行trigger，以undefined为关联，将undefined，oldTarget传过去,返回clear执行的结果
function clear(this: IterableCollections) {
  // 获取原始集合
  const target = toRaw(this)
  // 判断是否有值  size !== 0 为true  size === 0 为fasle
  const hadItems = target.size !== 0
  const oldTarget = __DEV__
    ? // DEV忽略
      isMap(target)
      ? new Map(target)
      : new Set(target)
    : undefined
  // forward the operation before queueing reactions
  // 在queue reactions之前调用clear方法
  const result = target.clear()
  // 判断hadItems
  if (hadItems) {
    // 如果hadItems为true，以CLEAR类型执行trigger，以undefined为关联，将undefined，oldTarget传过去
    trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)
  }
  // 返回clear执行的结果
  return result
}

 
  
clear做了什么？
 
  
     
   
  1. 执行clear
    2.  
   
  2. 判断hadItems，如果为true,以CLEAR类型执行trigger，以undefined为关联，将undefined，oldTarget传过去
    3.  
   
  3. 返回clear执行的结果
    4.  
  
 
  
forEach
 
  
 
   
forEach 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From mutableInstrumentations:
// Return To mutableInstrumentations: 如果不是只读  以ITERATE类型执行track，以ITERATE_KEY为关联，返回forEach执行的结果
function createForEach(isReadonly: boolean, isShallow: boolean) {
  return function forEach(
    this: IterableCollections,
    callback: Function,
    thisArg?: unknown
  ) {
    // 获取集合
    const observed = this as any
    // 获取原始集合
    const target = observed[ReactiveFlags.RAW]
    // 获取原始target
    const rawTarget = toRaw(target)
    // wrap包裹响应式
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
    // 如果不是只读  以ITERATE类型执行track，以ITERATE_KEY为关联
    !isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
    // 返回forEach执行的结果
    return target.forEach((value: unknown, key: unknown) => {
      // important: make sure the callback is
      // 1. invoked with the reactive map as `this` and 3rd arg
      // 2. the value received should be a corresponding reactive/readonly.
      // 重要：确保回调是
      // 1. 使用反应映射作为 `this` 和 3rd arg 调用
      // 2. 收到的值应该是相应的反应/只读。
      return callback.call(thisArg, wrap(value), wrap(key), observed)
    })
  }
}

 
  
forEach做了什么？
 
  
     
   
  1. 如果不是只读 以ITERATE类型执行track，以ITERATE_KEY为关联
    2.  
   
  2. 返回forEach执行的结果
    3.  
  
 
  
createIterableMethod
 
  
 
   
createIterableMethod方法 路径: core\packages\reactivity\src\collectionHandlers.ts
 
  
 
  
// From createInstrumentations:
// Return To createInstrumentations: 如果不是只读，以ITERATE类型执行track，根据isKeyOnly决定以ITERATE_KEY或MAP_KEY_ITERATE_KEY为关联，返回一个包装的迭代器，它返回观察到的版本，实现可迭代协议
function createIterableMethod(
  method: string | symbol,
  isReadonly: boolean,
  isShallow: boolean
) {
  return function (
    this: IterableCollections,
    ...args: unknown[]
  ): Iterable & Iterator {
    // 获取原始对象
    const target = (this as any)[ReactiveFlags.RAW]
    const rawTarget = toRaw(target)
    // From createIterableMethod:
    // Return From createIterableMethod: 判断是否是map类型
    const targetIsMap = isMap(rawTarget)
    // 如果是entries或是Sybol.iterator方法并且是map类型 为true
    const isPair =
      method === 'entries' || (method === Symbol.iterator && targetIsMap)
    const isKeyOnly = method === 'keys' && targetIsMap
    // 获取原始迭代器方法
    const innerIterator = target[method](...args)
    // wrap包裹函数
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
    // 如果不是只读，以ITERATE类型执行track，根据isKeyOnly决定以ITERATE_KEY或MAP_KEY_ITERATE_KEY为关联
    !isReadonly &&
      track(
        rawTarget,
        TrackOpTypes.ITERATE,
        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
      )
    // return a wrapped iterator which returns observed versions of the
    // values emitted from the real iterator
    // 返回一个包装的迭代器，它返回观察到的版本
    // 从实际迭代器发出的值
    return {
      // iterator protocol
      next() {
        // 调用原始迭代器的next方法获取value和done
        const { value, done } = innerIterator.next()
        return done
        // 如果done存在返回value和done
          ? { value, done }
          : { // 如果done不存在，value根据isPair决定返回什么 使用wrap包裹
              value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
              done
            }
      },
      // iterable protocol
      // 实现可迭代协议
      [Symbol.iterator]() {
        return this
      }
    }
  }
}

 
  
createIterableMethod做了什么？
 
  
     
   
  1. 如果不是只读，以ITERATE类型执行track，根据isKeyOnly决定以ITERATE_KEY或MAP_KEY_ITERATE_KEY为关联
    2.  
   
  2. 返回一个包装的迭代器，它返回观察到的版本，实现可迭代协议
    3.  
  
 
  
集合类型总结
 
  
集合类型还有其他三个，和之前看的那些handlers对象其实差不多，就是在我们分析的这些方法上通过传入shallow,readonly参数改变方法的执行结果，我就不多去看了，大家可以自己结合上面的代码去分析分析
 
  
ref
 
  
现在来看ref
 
  
 
   
ref方法 路径: core\packages\reactivity\src\ref.ts
 
  
 
  
// ref
export function ref<T extends object>(
  value: T
): [T] extends [Ref] ? T : Ref<UnwrapRef<T>>
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value, false)
}

 
  
ref方法做了什么？
 
  
     
   
  1. 返回createRef方法的调用返回值
    2.  
  
 
  
可以看到ref其实内部是返回的createRef方法的调用返回值
 
  
createRef
 
  
 
   
createRef方法 路径: core\packages\reactivity\src\ref.ts
 
  
 
  
// From ref:
function createRef(rawValue: unknown, shallow: boolean) {
  // 判断是否是ref
  if (isRef(rawValue)) {
    // 如果是ref，直接返回
    return rawValue
  }
  // 返回一个RefImpl对象
  return new RefImpl(rawValue, shallow)
}


 
  
createRef方法做了什么？
 
  
     
   
  1. 判断是否是ref，如果是，直接返回
    2.  
   
  2. 如果不是，返回一个RefImpl对象
    3.  
  
 
  
class RefImpl
 
  
 
   
class RefImpl 路径:core\packages\reactivity\src\ref.ts
 
  
 
  
// From createRef:
class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly __v_isShallow: boolean) {
    // 根据是否是shallow赋值
    // 如果不是shallow rawValue就是原始的value
    this._rawValue = __v_isShallow ? value : toRaw(value)
    // From RefImpl:
    // To: toReactive
    // Retrun From toReactive: 如果是对象，返回reactive(value)，如果不是对象，返回value
    // 如果不是shaollw 如果value是对象，_value是toReactive(value)，如果不是对象，_value是value
    this._value = __v_isShallow ? value : toReactive(value)
  }
  // 对value的getter
  get value() {
    // 执行trackRefValue
    trackRefValue(this)
    // 返回_value
    return this._value
  }
  // 对value的setter
  set value(newVal) {
    // 如果不是shallow newVal就是newVal的原始值
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)
    // 如果新、旧值发生改变
    if (hasChanged(newVal, this._rawValue)) {
      // 赋值
      this._rawValue = newVal
      // 如果不是shaollw 如果value是对象，_value是toReactive(newVal)，如果不是对象，_value是newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      // 执行triggerRefValue
      triggerRefValue(this, newVal)
    }
  }
}

 
  
class RefImpl做了什么？
 
  
     
   
  1. 构造函数内部初始化 _rawValue、_value
    2.  
   
  2. 对value属性的getter设置，getter会触发trackRefValue，并返回_value值
    3.  
   
  3. 对value属性的setter设置，setter会根据新旧值是否改变，去改变值，并触发triggerRefValue
    4.  
  
 
  
这一步的注释在: class RefImpl
 
  
 
   
触发get时会触发trackRefValue
 
  
 
  
 
   
触发set时会触发triggerRefValue
 
  
 
  
因此来看这两个方法
 
  
trackRefValue
 
  
 
   
trackRefValue方法 路径: core\packages\reactivity\src\ref.ts
 
  
 
  
// From RefImpl:
// Return To RefImpl: 调用trackEffects收集依赖
export function trackRefValue(ref: RefBase<any>) {
  // 判断shouldTrack和activeEffect
  if (shouldTrack && activeEffect) {
    // 如果shouldTrack为true，并且activeEffect不为null，使用toRaw获取原始ref
    ref = toRaw(ref)
    // DEV忽略
    if (__DEV__) {
      trackEffects(ref.dep || (ref.dep = createDep()), {
        target: ref,
        type: TrackOpTypes.GET,
        key: 'value'
      })
    } else {
      // 调用trackEffects方法收集依赖，这个依赖是收集到dep上的
      trackEffects(ref.dep || (ref.dep = createDep()))
    }
  }
}

 
  
trackRefValue方法做了什么？
 
  
     
   
  1. 如果shouldTrack为true，并且activeEffect不为null，使用toRaw获取原始ref
    2.  
   
  2. 调用trackEffects收集依赖，这个依赖是收集到dep上的
    3.  
  
 
  
 
   
trackRefValue也是调用了trackEffects进行依赖收集
 
  
 
  
triggerValue
 
  
 
   
triggerValue方法 路径: core\packages\reactivity\src\ref.ts
 
  
 
  
// From RefImpl:
// Return To RefImpl: 调用triggerEffects触发依赖，执行副作用函数
export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
  // toRaw获取原始ref
  ref = toRaw(ref)
  // 如果ref.dep存在
  if (ref.dep) {
    // DEV忽略
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: 'value',
        newValue: newVal
      })
    } else {
      // 调用triggerEffects触发依赖，执行副作用函数
      triggerEffects(ref.dep)
    }
  }
}

 
  
triggerValue方法做了什么？
 
  
     
   
  1. toRaw获取原始ref，判断ref.dep是否存在
    2.  
   
  2. 存在的话，调用triggerEffects触发依赖，执行副作用函数
    3.  
  
 
  
 
   
triggerValue也是调用triggerEffects触发依赖
 
  
 
  
ref总结
 
  
     
   
  1. createRef返回一个RefImpl对象
    2.  
   
  2. class RefImpl对value属性设置getter、setter，还做了对对象的处理
    3.  
   
  3. getter内部trackRefValue，通过trackEffects收集依赖
    4.  
   
  4. setter内部triggerRefValue，通过triggerEffects触发依赖
    5.  
  
 
  
computed
 
  
现在来看computed
 
  
 
   
computed方法 路径: core\packages\reactivity\src\computed.ts
 
  
 
  
// computed
export function computed<T>(
  getter: ComputedGetter<T>,
  debugOptions?: DebuggerOptions
): ComputedRef<T>
export function computed<T>(
  options: WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions
): WritableComputedRef<T>
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions,
  isSSR = false
) {
  // getter
  let getter: ComputedGetter<T>
  // setter
  let setter: ComputedSetter<T>
  // From computed:
  // To isFunction:
  // Return From isFunction: 判断是否是function类型
  // 判断getterOrOptions是否是函数，如果是函数就是get，如果不是就是get和set
  const onlyGetter = isFunction(getterOrOptions)
  if (onlyGetter) {
    // 如果是函数,就将get函数赋值给getter
    getter = getterOrOptions
    // setter不用
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    // 如果不是函数
    // 将对象的get赋给getter
    getter = getterOrOptions.get
    // 将对象的set赋给setter
    setter = getterOrOptions.set
  }
  // 创建一个新的computedRefImpl对象
  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)
  // DEV忽略
  if (__DEV__ && debugOptions && !isSSR) {
    cRef.effect.onTrack = debugOptions.onTrack
    cRef.effect.onTrigger = debugOptions.onTrigger
  }
  // 返回cRef对象
  return cRef as any
}


 
  
computed方法做了什么？
 
  
     
   
  1. 判断getterOrOptions是否是函数
    2.  
   
  2. 如果是函数，代表是get函数，赋值给getter
    3.  
   
  3. 如果不是函数，代表是对象，将对象的get赋值给getter，将对象的set赋值给setter
    4.  
   
  4. 创建一个新的computedRefImpl对象
    5.  
   
  5. 返回cRef对象
    6.  
  
 
  
因此来看class computedRefImpl
 
  
class computedRefImpl
 
  
 
   
class computedRefImpl 路径: core\packages\reactivity\src\computed.ts
 
  
 
  
// From computed:
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined

  private _value!: T
  public readonly effect: ReactiveEffect<T>

  public readonly __v_isRef = true
  public readonly [ReactiveFlags.IS_READONLY]: boolean

  public _dirty = true
  public _cacheable: boolean

  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    // 通过new ReactiveEffect创建effect副作用函数，第二个参数是scheduler
    this.effect = new ReactiveEffect(getter, () => {
      // 当值发生变化时，判断dirty，使用调度器将dirty重置为true
      if (!this._dirty) {
        // 如果dirty为false，则设置dirty为true
        this._dirty = true
        // 手动调用triggerRefValue 避免嵌套的effect
        triggerRefValue(this)
      }
    })
    // 给effect设置computed
    this.effect.computed = this
    // 给effect设置active 如果是ssr则为false，如果不是就是true
    this.effect.active = this._cacheable = !isSSR
    this[ReactiveFlags.IS_READONLY] = isReadonly
  }
  // value的getter
  get value() {
    // the computed ref may get wrapped by other proxies e.g. readonly() #3376
    // 计算的 ref 可能会被其他代理包裹，例如 只读（）
    // 通过toRaw获取原始的值
    const self = toRaw(this)
    // 手动调用trackRefValue，去收集依赖 避免嵌套的effect
    trackRefValue(self)
    // 判断dirty和_cacheable 只有脏了才计算值，
    if (self._dirty || !self._cacheable) {
      // 如果dirty为true或者_cacheable为false 代表脏了
      // 则设置dirty为false
      self._dirty = false
      // 执行self.effect.run()
      self._value = self.effect.run()!
    }
    // 返回value
    return self._value
  }
  // value的setter
  set value(newValue: T) {
    this._setter(newValue)
  }
}

 
  
class computedRefImpl做了什么？
 
  
     
   
  1. 通过new ReactiveEffect创建effect副作用函数，第二个参数是scheduler，当发生改变时，会去执行调度器，也就是改变dirty的值，和手动调用triggerRefValue
    2.  
   
  2. 对value属性设置getter，手动调用trackRefValue，通过dirty判断值是否改变，没改变就不需要计算，改变了就设置
    3.  
  
 
  
computed总结
 
  
     
   
  1. 处理getter和setter
    2.  
   
  2. class computedRefImpl通过dirty和调度器完成了计算属性的缓存功能，当值发生改变时，执行调度器里面的dirty = true，之后执行get时就会重新计算，反之不会计算，就完成了缓存。
    3.  
   
  3. 当发生改变时，会去执行调度器，也就是改变dirty的值，和手动调用triggerRefValue,对value属性设置getter，手动调用trackRefValue
    4.  
  
 
  
一些关于响应式的问题
 
  
关于响应式模块的分析已经差不多结束了，现在消化一些问题吧！
 
  
何时进行首次收集依赖？
 
  
首先，要触发响应式，肯定要收集依赖，才能触发依赖执行副作用函数，那么首次的依赖收集是什么时候发生的呢？不可能等到我们手动调用才会去收集依赖吧
 
  
在我的Vue3组件初始化流程文章中说过调用update方法执行componentUpdateFn更新函数实现首次视图更新
 
  
componentUpdateFn更新函数内部会去执行template通过compile(编译器 之后文章会说) 生成的render方法，而render方法会读取属性，执行get操作，因此会进行收集依赖，所以首次依赖收集是在mountComponent中的setupRenderEffect方法中的update中发生的。
 
  
结合我的mini-vue来看看首次依赖收集的过程
 
  
Vue3响应式原理 [Vue3源码系列_xiaolu]_第1张图片
 
  
当data和setup一起时，谁优先级高
 
  
前面提到过Vue2的兼容发生在applyOptions中，那么当data和setup中存在同名属性时，谁的优先级更高呢？
 
  
 
   
路径: packages\runtime-core\src\componentPublicInstance.ts
 
  
 
  
// 可以看到setup的优先级大于data
else if (setupState !== EMPTY_OBJ && hasOwn(setupState, key)) {
    accessCache![key] = AccessTypes.SETUP
    return setupState[key]
} else if (data !== EMPTY_OBJ && hasOwn(data, key)) {
    accessCache![key] = AccessTypes.DATA
    return data[key]
}

 
  
可以看到setup优先级大于data，因此setup和data一起使用时，同名优先级setup大于data
 
  
ref的value
 
  
ref在setup内要加上.value，而在模板中，只需要用ref就行了，这是在哪做了处理呢？
 
  
 
   
来自 handleSetupResult方法 路径: core\packages\runtime-core\src\component.ts
 
  
 
  
// From handleSetupResult:
// To proxyRefs:
// Return From proxyRefs: 如果是ref类型，返回一个新的ref代理对象，此代理对象上拥有get set方法，get方法返回ref.value，set方法赋值给ref.value，做一次代理，也就是模板内ref不用.value的原因
// 如果是对象，直接把值赋给instance.setupState，这就是用户的setup内部的状态
// 并对ref做一层代理
instance.setupState = proxyRefs(setupResult)

 
  
可以看到在handleSetupResult方法中，对setup调用的结果执行了proxyRefs
 
  
 
   
proxyRefs方法 路径: core\packages\reactivity\src\ref.ts
 
  
 
  
// From handleSetupResult:
// Return To handleSetupResult: 如果是ref类型，返回一个新的ref代理对象，此代理对象上拥有get set方法，get方法返回ref.value，set方法赋值给ref.value，做一次代理，也就是模板内ref不用.value的原因
export function proxyRefs<T extends object>(
  objectWithRefs: T
): ShallowUnwrapRef<T> {
  // From proxyRefs:
  // To isReactive:
  // Return From isReactive: 根据value上是否有ReactiveFlags.IS_REACTIVE属性判断是否是只读
  return isReactive(objectWithRefs)
    ? // 如果是reactive对象，原样返回
      objectWithRefs
    : // From proxyRefs:
      // To shallowUnwrapHandlers:
      // Return From shallowUnwrapHandlers: 返回一个拥有get set方法的对象，get方法返回ref.value，set方法赋值给ref.value，做一次代理
      new Proxy(objectWithRefs, shallowUnwrapHandlers)
}

// From shallowUnwrapHandlers:
// Return To shallowUnwrapHandlers: 脱ref，也就是如果是ref类型，就返回ref.value，等于做了一层代理，也就是模板中的ref可以不用.value的原因
export function unref<T>(ref: T | Ref<T>): T {
  // 判断是否是ref类型  如果是的话返回ref.value 如果不是的话原样返回
  return isRef(ref) ? (ref.value as any) : ref
}
// From proxyRefs:
// Return To proxyRefs: 
const shallowUnwrapHandlers: ProxyHandler<any> = {
  // From shallowUnwrapHandlers:
  // To unref:
  // Return From unref: 对ref做一层代理，也就是模板中的ref可以不用.value的原因
  // get方法会返回ref.value  unref对ref做了一层代理，也就是模板中的ref可以不用.value的原因
  get: (target, key, receiver) => unref(Reflect.get(target, key, receiver)),
  // 
  set: (target, key, value, receiver) => {
    // 获取老值
    const oldValue = target[key]
    // 如果老值是ref类型 并且新值不是ref类型
    if (isRef(oldValue) && !isRef(value)) {
      // 将新值赋值给老值的value
      oldValue.value = value
      return true
    } else {
      // 返回Reflect.set的返回结果
      return Reflect.set(target, key, value, receiver)
    }
  }
}

 
  
proxyRefs方法做了什么？
 
  
如果是ref类型的话，就返回一个拥有get和set方法的代理对象，get方法通过unref进行脱ref处理，也就是返回ref.value，set方法赋值给ref.value
 
  
 
   
也就是说在proxyRefs中，完成了对ref类型的代理，因此在模板中使用的是经过代理后的ref了，因此不需要使用.value
 
  
 
  
总结
 
  
Vue3响应式原理 [Vue3源码系列_xiaolu]_第2张图片
 
  
来看看目录结构，这些都不多已经逐行注释分析完了，除了deferredComputed，但这个不是我们需要分析的，尤大关于deferredComputed解释
 
  
 
   
注意：这不是 Vue API 的一部分，仅作为特定于 @vue/reactivity 的较低级别的 API
 
  
 
  
这一篇响应式原理文章，几乎是行行有注释，大家有不理解的地方可以参考我的github，也感谢大家支持！
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(vue,源码,vue,源码,vue.js)

        

            

                
    
                    
  • MediaCrawler 小红书爬虫源码分析
                        

                        
    前言MediaCrawler是最近冲上Github热搜的开源多社交平台爬虫。虽然现在已删库，但还好我眼疾手快，有幸还Fork了一份，乘着周末，简单分析了下小红书平台的相关代码。爬虫难点一般写爬虫，都需要面对以下几个问题如果app/网页需要登录，如何获取登录态（cookie/jwt）大部分app/网页都会对请求参数进行sign，如果有，如何获取sign逻辑绕过其它遇到的反爬措施我将带着这三个问题，阅
    
                    
    • 
                    
  • vue 前端优化性能优化方法
                        lfl18326162160
vue.js前端javascript
                        
    1.列表使用唯一keyv-for="iteminactiveList":key="item.id"原因是不使用key或者列表的index作为key的时候，每个元素对应的位置关系都是index，直接导致我们插入的元素到后面的全部元素，对应的位置关系都发生了变更，所以在patch过程中会将它们全都执行更新操作，再重新渲染。这可不是我们想要的，我们希望的是渲染添加的那一个元素，其他四个元素不做任何变更，
    
                    
    • 
                    
  • QML学习 —— 34、视频媒体播放器（附源码）
                        [無限進步]
QMLqml音视频媒体播放器
                        
    效果 说明     您可以单独使用MediaPlayer播放音频内容（如音频），也可以将其与VideoOutput结合使用以渲染视频。VideoOutput项支持未转换、拉伸和均匀缩放的视频演示。有关拉伸均匀缩放演示文稿的描述，请参见fillMode属性描述。 播放可能出错问题出现的问题:     DirectShowPlayerService::doRender:Unresolvederrorc
    
                    
    • 
                    
  • Spark 源码分析(一) SparkRpc中序列化与反序列化Serializer的抽象类解读 （正在更新中~）别人能写出来的，你也能行！多学习别人的思路，形成自己的思路，高薪工作奔你而来！
                        小白的大数据历程
Spark源码解析开发语言spark大数据分布式scala
                        
    后一篇链接在这接上一章请先看解读序列化抽象类第一部分（这是一个链接）目录接上一章请先看解读序列化抽象类第一部分2.Java序列化实现类JavaSerializer(1)JavaSerializationStream类代码实际例子1：序列化(2)JavaDeserializationStream代码实际例子2：反序列化Spark源码下类图在学习过程中，抓住主要问题，请思考问题为什么Kryo序列化更加
    
                    
    • 
                    
  • Spark 源码分析(一) SparkRpc中序列化与反序列化Serializer的抽象类解读 （java序列化部分完结，正在更新RpcEnv部分~）
                        小白的大数据历程
Spark源码解析sparkjavapython
                        
    目录(3)JavaSerializerInstance定义了一个Java序列化实例(1)构造方法参数(2)方法1：serializeStream(3)方法2：deserializeStreamdefaultClassLoader(4)方法3：deserializeStreamloader(5)方法4：serialize(6)方法5：deserializeloader(7)方法6：deseriali
    
                    
    • 
                    
  • 《leetcode-runner》【图解】【源码】如何手搓一个debug调试器——架构
                        飞哥不鸽
leetcode-runnerdebug调试器编写架构图分析
                        
    前文：《leetcode-runner》如何手搓一个debug调试器——引言文章目录设计引入为什么这么设计存在难点1.环境准备2.调试程序仓库地址：leetcode-runner本文主要聚焦leetcode-runner对于debug功能的整体设计，并讲述设计原因以及存在的难点设计引入让我们来思考一下，一个最简单的调试器需要哪些内容首先，它能够接受用户的输入其次，它能够读懂用户想让调试器干嘛，并做
    
                    
    • 
                    
  • 设计模式之命令模式：从原理到实战，深入解析及源码应用
                        coffee_baby
设计模式原理和实战设计模式命令模式java
                        
    命令模式什么是命令模式？命令模式（CommandPattern）是一种行为设计模式，它将一个请求封装为一个对象，从而允许使用不同的请求、队列或者日志来参数化对象，并支持可撤销的操作。命令模式的核心思想是将命令的发起者和执行者解耦，从而使得命令的发起者不必关心命令是如何被执行的。命令模式的关键组成部分：命令（Command）：定义命令的接口，声明执行方法。具体命令（ConcreteCommand）：
    
                    
    • 
                    
  • pyinstaller 打包生成.exe 可执行文件报错 “IndexError: tuple index out of range”
                        静妍
PythonPythonpyqtguiPyinstaller.exe
                        
    想把pyqt写的GUI程序打包成.exe文件，以便在Windows下运行，不想因为使用Python3.6，出现兼容问题：IndexError:tupleindexoutofrangePyinstaller官网目前的版本是3.2.1只支持到Python2.7，Python3.3~Python3.5需自己在官网源码里
    
                    
    • 
                    
  • 在electron中实现一个桌面悬浮球
                        

                        
    概要在electron+vue3搭建的应用中实现了一个桌面悬浮球/mini窗口的功能，支持任意拖拽、丝滑的菜单折叠展开动画效果。在实现过程中需要关注的一些点：1、管理悬浮球窗口创建以及配置：需要一个透明的窗口来承载视图。2、解决electron拖拽和点击事件冲突（核心）：因为使用-webkit-app-region:drag样式的方式会导致拖拽和点击事件冲突，所以需要通过渲染进程和主进程的通信来解
    
                    
    • 
                    
  • 1.Spring AI 从入门到实践
                        laopeng301
SpringAIspring人工智能java
                        
    SpringAI从入门到实践1.什么是SpringAI2.使用SpringBoot&SpringAI快速构建AI应用程序3.ChatClient&ChatModel简化与AI模型的交互4.SpringAIPrompt:与大模型进行有效沟通5.结构化输出大模型响应6.实战:AI聊天机器人Ben技术站关注Java技术，LLM，计算机科学等内容。关注会持续更新推送详细教程内容和源码。
    
                    
    • 
                    
  • 【第十章——数据可视化之地图构建】【最新！黑马程序员Python自学课程笔记】课上笔记+案例源码+作业源码
                        嗯哈！
信息可视化python笔记pycharm
                        
    第十章-数据可视化之地图构建10.1数据可视化-地图-基础地图使用注意！！！现在的版本，需要加：省，市"""演示地图可视化的基本使用"""frompyecharts.chartsimportMapfrompyecharts.optionsimportVisualMapOpts#准备地图对象map=Map()#准备数据data=[("北京市",9),("上海市",8),("湖南省",5),("台湾省
    
                    
    • 
                    
  • 华为OD机试E卷 --跳格子3 --24年OD统一考试（Java & JS & Python & C & C++）
                        飞码创造者
最新华为OD机试题库2024华为odjavajavascriptpythonc语言
                        
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c++算法源码题目描述小明和朋友们一起玩跳格子游戏，每个格子上有特定的分数score=[1,-1,-6,7,-17,7]，从起点score[0]开始，每次最大的步长为k，请你返回小明跳到终点score[n-1]时，能得到的最大得分。输入描述第一行输入总的格子数量n第二行输入每个格子的分数score[i]第三
    
                    
    • 
                    
  • vant组件库的按需导入导出
                        ordinary90
VUE前端全栈开发vue.js前端
                        
    vant是一个基于Vue的移动端UI组件库，它提供了丰富的组件和样式，可以帮助我们快速构建移动端应用。在使用vant组件库时，可以通过按需导入导出的方式来减小打包体积，提高应用的性能。按需导入导出的原理是根据需要只加载使用到的组件和样式，而不是将整个组件库都打包到应用中。下面是一个使用vant组件库实现按需导入导出的详细解析和代码实例。安装vant组件库首先，在命令行中使用npm或者yarn安装v
    
                    
    • 
                    
  • 【Bluedroid】HFP连接流程源码分析（一）
                        byte轻骑兵
解读AndroidjavaC++Android
                        
    Bluedroid蓝牙HFP（HFP,Hands-FreeProfile）连接流程涵盖多个环节，从前期准备到连接建立、状态管理以及维护与断开，各环节紧密相扣，确保蓝牙免提连接稳定可靠。一、概述1.1.连接前准备用户操作：用户需在Android设备上开启蓝牙功能。同时，目标蓝牙设备（如车载蓝牙）要进入配对模式，Android设备通过搜索发现目标设备并完成配对，此过程可能需用户输入PIN码或确认配对请
    
                    
    • 
                    
  • ubuntu18.04安装grpc及使用grpc时遇到的问题总结
                        烟酒僧_

                        
    #安装pkg-configsudoapt-getinstallpkg-config#安装依赖文件sudoapt-getinstallautoconfautomakelibtoolmakeg++unzipsudoapt-getinstalllibgflags-devlibgtest-devsudoapt-getinstallclanglibc++-dev克隆grpc源码gitclonehttps:/
    
                    
    • 
                    
  • Spring-@Configuration注解简析
                        

                        
    大家好，我是半夏之沫一名金融科技领域的JAVA系统研发我希望将自己工作和学习中的经验以最朴实，最严谨的方式分享给大家，共同进步写作不易，期待大家的关注和点赞关注微信公众号【技术探界】前言Spring中的@Configuration注解修饰的类被称为配置类，通过配置类可以向容器注册bean以及导入其它配置类，本篇文章将结合例子和源码对@Configuration注解原理进行学习，并引出对Spring
    
                    
    • 
                    
  • uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机
                        沐雨MUYU_
uni-app微信小程序android
                        
    1、全局定义底部安全距离//前提：项目中安装了vuex或其他状态管理工具//文件位置src/store/index.tsimport{createStore}from'vuex';exportdefaultcreateStore({state(){return{safeBottom:''//底部安全距离};},mutations:{...},actions:{...},getters:{safeB
    
                    
    • 
                    
  • 百万架构师第二十二课：源码分析：Spring 源码分析：Spring经典面试答疑｜JavaGuide
                        
后端
                        
    Spring面试解答上半节：面试中需要注意的细节动脑子，面试是一种交流面试的时候，要用心去感受当时面试场景了解自己，自己的长处、自己的短处（巧妙地扬长避短）了解1.公司的业务场景2.你是去面试什么岗位的？Java高级工程师实际工作经验是1年（如实填写）1、请描述SpringIOC的工作原理答：定位加载注册BeanFactoryBeanDefintion...1-3年1+ApplicationCon
    
                    
    • 
                    
  • 华为OD机试E卷 --堆栈中的剩余数字--24年OD统一考试（Java & JS & Python & C & C++）
                        飞码创造者
最新华为OD机试题库2024java华为odjavascriptpythonjsc语言
                        
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码题目描述向一个空栈中依次存入正整数，假设入栈元素n(1<=n<=2^31-1)按顺序依次为nx…n4、n3、n2、n1,每当元素入栈时，如果n1=n2+…+ny(y的范围[2,x]，1<=x<=1000)，则n1~ny全部元素出栈，重新入栈新元素m(m=2n1)。如：依次向栈存入6、1、2、3,当
    
                    
    • 
                    
  • 华为OD机试E卷 --机器人活动区域--24年OD统一考试（Java & JS & Python & C & C++）
                        飞码创造者
最新华为OD机试题库2024华为od机器人javajavascriptpythonjs
                        
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述现有一个机器人，可放置于M×N的网格Q中任意位置，每个网格包含一个非负整数编号。当相邻网格的数字编号差值的绝对值小于等于1时，机器人可在网格间移动问题:求机器人可活动的最大范围对应的网格点数目。说明:1)网格左上角坐标为(0,0)，右下角坐标为(m-1,n-1)2）机器人只能
    
                    
    • 
                    
  • opencv图像基础学习
                        yzx991013
OpenCV基础全集opencv人工智能计算机视觉
                        
    2.3图像的加密解密源码如下：importcv2importnumpyasnpimportmatplotlib.pyplotaspltdefpassImg():img=cv2.imread('./image/cat.jpg',0)h,w=img.shape#生成一个密码，加密key_img=np.random.randint(0,256,size=(h,w),dtype=np.uint8)img_
    
                    
    • 
                    
  • Vue+ArcGIS API for JS实现地图邮编分区以及定位的区域高亮
                        小伙伴123456
arcgisjavascript开发语言vue.js前端
                        
    前言最近公司开发国际物流系统，如果使用国内地图，类似百度，腾讯，高德地图，那么国外的地理信息不会那么全，而且获取邮编api只对国内生效，所以考虑使用esri公司的arcgis地图，但是这个地图在国内社区并不完善，踩过很多坑，在网上也找不到相关的解决办法。在此分享给需要做类似需求的小伙伴，希望能帮到大家。官网：https://www.esri.com/zh-cn/arcgis/products/de
    
                    
    • 
                    
  • android原生乐视made,乐视Pro3 lineage16 安卓9.0 极致省电 纯净原生 完美root Xposed 经典版...
                        小6加油
android原生乐视made
                        
    乐视系列可刷上lineageos16，再次开启享受类原生的乐趣。乐视Max2和Pro3支持PT项目，也就是说必须刷入支持PT版本TWRP后Vendor分区才可以正常启动LOS16.0特色介绍源于lineage16.0最新源码制作，稳定靠谱默认添加开机语音中文，时区为正常北京超级纯净，非常流畅。它有电话、信息、相机、时钟、录音录屏、邮件、文件管理器和音乐播放器等几个最基本的功能，无谷歌服务和全家桶l
    
                    
    • 
                    
  • Mac pnpm安装
                        是二牙
前端vue.js
                        
    安装pnpm的时候一定要把npm更新到最新版不然pnpm下载不成功。（更新npm）：sudonpminstall-gnpm(安装pnpm:)sudonpminstall-gpnpm检验安装是否成功：pnpm--version项目内安装依赖：pnpminstall/运行项目：pnpmdev最近在开发vue3的项目后续应该会更新一些关于v3的笔记以往都是开发的v2现在开始学习v3如果写的不对的地方可以
    
                    
    • 
                    
  • Vue.js组件开发-如何实现表头搜索
                        LCG元
前端vue.js
                        
    在Vue.js组件开发中，实现表头搜索通常涉及在表格组件的表头添加输入框，并让用户能够输入搜索关键字来过滤表格数据。以下是一个使用ElementUI的el-table组件实现表头搜索的示例：一、准备阶段‌确保ElementUI已安装‌：确保Vue项目中已经安装了ElementUI，并且已经在项目中引入。‌准备表格数据‌：在Vue组件中准备一份表格数据，通常是一个数组。二、实现表头搜索‌定义搜索关键
    
                    
    • 
                    
  • 大数据毕业设计—基于python+Django自然灾害频发地区情况数据分析系统
                        qq_1406299528
python计算机毕业设计python大数据课程设计
                        
    一、项目技术开发语言：Pythonpython框架：Django软件版本：python3.7/python3.8数据库：mysql5.7或更高版本数据库工具：Navicat11开发软件：PyCharm/vscode前端框架:vue.js二、项目内容和项目介绍  1.项目内容  1.开发语言：该系统采用Python作为开发语言，Python具有优雅的语法和动态类型，以及解释型语言的本质，使其成为许多
    
                    
    • 
                    
  • 3、C#基于.net framework的应用开发实战编程 - 实现（三、一） - 编程手把手系列文章...
                        lzhdim
c#.netoracle开发语言数据库
                        
    三、实现；三．一、实现数据库操作；对于数据库的操作，以前都是有ODBC的接口，通过Helper类库进行的操作。此文主要介绍例子里对数据库操作的实现。1、SQLiteHelper；SQLite主要是用C编写的，但是对于C#来说提供了类库，但是还需要Helper类来进行高层次的处理。这个类库来源于网络，具体实现请自己阅读例子中的源码。2、SQL语句；例子的中的SQL语句在设计的时候数据表的操作都罗列了
    
                    
    • 
                    
  • vue 纯前端导出 Excel
                        陈大大小
1024程序员节
                        
    方法一：1、安装"file-saver"npmi-Sfile-saverxlsx2、引入在需要导出功能的.vue文件中引入importFileSaverfrom"file-saver";importXLSXfrom"xlsx";3、简单示例（复制即可食用）：导出excel文件importFileSaverfrom"file-saver";importXLSXfrom"xlsx";exportdef
    
                    
    • 
                    
  • 【2025最新计算机毕业设计】基于SSM的旅游与自然保护平台【提供源码+答辩PPT+文档+项目部署】
                        万码堂源码
计算机毕设精品实战案例实战项目源码课程设计vue.js前端计算机毕业设计毕设项目springboot
                        
    作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。业务范围：免费功能设计、开题报告、任务书
    
                    
    • 
                    
  • 【源码+文档】基于SpringBoot+Vue旅游网站系统【提供源码+答辩PPT+参考文档+项目部署】
                        万码堂源码
实战项目源码计算机毕设精品实战案例springbootvue.js旅游
                        
    作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。业务范围：免费功能设计、开题报告、任务书
    
                    
    • 
                                
  • 数据采集高并发的架构应用
                                    3golden
.net
                                    
    问题的出发点： 
 
         最近公司为了发展需要，要扩大对用户的信息采集，每个用户的采集量估计约2W。如果用户量增加的话，将会大量照成采集量成3W倍的增长，但是又要满足日常业务需要，特别是指令要及时得到响应的频率次数远大于预期。 
      &n
    
                                
    • 
                                
  • 不停止 MySQL 服务增加从库的两种方式
                                    brotherlamp
linuxlinux视频linux资料linux教程linux自学
                                    
    现在生产环境MySQL数据库是一主一从，由于业务量访问不断增大，故再增加一台从库。前提是不能影响线上业务使用，也就是说不能重启MySQL服务，为了避免出现其他情况，选择在网站访问量低峰期时间段操作。 
 一般在线增加从库有两种方式，一种是通过mysqldump备份主库，恢复到从库，mysqldump是逻辑备份，数据量大时，备份速度会很慢，锁表的时间也会很长。另一种是通过xtrabacku
    
                                
    • 
                                
  • Quartz——SimpleTrigger触发器
                                    eksliang
SimpleTriggerTriggerUtilsquartz
                                    
    转载请出自出处：http://eksliang.iteye.com/blog/2208166 一.概述 
SimpleTrigger触发器，当且仅需触发一次或者以固定时间间隔周期触发执行； 
  二.SimpleTrigger的构造函数 
 
 SimpleTrigger(String name, String group)：通过该构造函数指定Trigger所属组和名称； 
 Simpl
    
                                
    • 
                                
  • Informatica应用（1）
                                    18289753290
sqlworkflowlookup组件Informatica
                                    
    1.如果要在workflow中调用shell脚本有一个command组件，在里面设置shell的路径；调度wf可以右键出现schedule，现在用的是HP的tidal调度wf的执行。 
2.designer里面的router类似于SSIS中的broadcast（多播组件）;Reset_Workflow_Var：参数重置 （比如说我这个参数初始是1在workflow跑得过程中变成了3我要在结束时还要
    
                                
    • 
                                
  • python 获取图片验证码中文字
                                    酷的飞上天空
python
                                    
    根据现成的开源项目 http://code.google.com/p/pytesser/改写 
在window上用easy_install安装不上  看了下源码发现代码很少  于是就想自己改写一下 
  
添加支持网络图片的直接解析 
  
  
#coding:utf-8 
#import sys 
#reload(sys) 
#sys.s
    
                                
    • 
                                
  • AJAX
                                    永夜-极光
Ajax
                                    
    1.AJAX功能:动态更新页面,减少流量消耗,减轻服务器负担 
  
2.代码结构: 
   
<html>

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...

    
                                
    • 
                                
  • 创业OR读研
                                    随便小屋
创业
                                    
            现在研一，有种想创业的想法，不知道该不该去实施。因为对于的我情况这两者是矛盾的，可能就是鱼与熊掌不能兼得。 
       
        研一的生活刚刚过去两个月，我们学校主要的是
    
                                
    • 
                                
  • 需求做得好与坏直接关系着程序员生活质量
                                    aijuans
IT 生活
                                    
      
        这个故事还得从去年换工作的事情说起，由于自己不太喜欢第一家公司的环境我选择了换一份工作。去年九月份我入职现在的这家公司，专门从事金融业内软件的开发。十一月份我们整个项目组前往北京做现场开发，从此苦逼的日子开始了。 
       系统背景：五月份就有同事前往甲方了解需求一直到6月份，后续几个月也完
    
                                
    • 
                                
  • 如何定义和区分高级软件开发工程师
                                    aoyouzi

                                    
    在软件开发领域，高级开发工程师通常是指那些编写代码超过 3 年的人。这些人可能会被放到领导的位置，但经常会产生非常糟糕的结果。Matt Briggs 是一名高级开发工程师兼 Scrum 管理员。他认为，单纯使用年限来划分开发人员存在问题，两个同样具有 10 年开发经验的开发人员可能大不相同。近日，他发表了一篇博文，根据开发者所能发挥的作用划分软件开发工程师的成长阶段。 
　　初
    
                                
    • 
                                
  • Servlet的请求与响应
                                    百合不是茶
servletget提交java处理post提交
                                    
      
Servlet是tomcat中的一个重要组成,也是负责客户端和服务端的中介 
  
  
1,Http的请求方式(get  ,post); 
  客户端的请求一般都会都是Servlet来接受的,在接收之前怎么来确定是那种方式提交的,以及如何反馈,Servlet中有相应的方法,  http的get方式 servlet就是都doGet(
    
                                
    • 
                                
  • web.xml配置详解之listener
                                    bijian1013
javaweb.xmllistener
                                    
    一.定义 
<listener>  
	<listen-class>com.myapp.MyListener</listen-class>  
</listener> 
  
二.作用        该元素用来注册一个监听器类。可以收到事件什么时候发生以及用什么作为响
    
                                
    • 
                                
  • Web页面性能优化（yahoo技术）
                                    Bill_chen
JavaScriptAjaxWebcssYahoo
                                    
    1.尽可能的减少HTTP请求数 content 
2.使用CDN server 
3.添加Expires头(或者 Cache-control) server 
4.Gzip 组件 server 
5.把CSS样式放在页面的上方。 css 
6.将脚本放在底部(包括内联的) javascript 
7.避免在CSS中使用Expressions css 
8.将javascript和css独立成外部文
    
                                
    • 
                                
  • 【MongoDB学习笔记八】MongoDB游标、分页查询、查询结果排序
                                    bit1129
mongodb
                                    
    游标 
  
游标，简单的说就是一个查询结果的指针。游标作为数据库的一个对象，使用它是包括 
 
 声明 
 打开 
 循环抓去一定数目的文档直到结果集中的所有文档已经抓取完 
 关闭游标 
 
  
游标的基本用法，类似于JDBC的ResultSet(hasNext判断是否抓去完,next移动游标到下一条文档)，在获取一个文档集时，可以提供一个类似JDBC的FetchSize
    
                                
    • 
                                
  • ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
                                    白糖_
ORA-12514
                                    
     今天通过Oracle SQL*Plus连接远端服务器的时候提示“监听程序当前无法识别连接描述符中请求服务”，遂在网上找到了解决方案： 
 ①打开Oracle服务器安装目录\NETWORK\ADMIN\listener.ora文件，你会看到如下信息： 
  
# listener.ora Network Configuration File: D:\database\Oracle\net
    
                                
    • 
                                
  • Eclipse 问题 A resource exists with a different case
                                    bozch
eclipse
                                    
    在使用Eclipse进行开发的时候，出现了如下的问题： 
Description Resource Path Location TypeThe project was not built due to "A resource exists with a different case: '/SeenTaoImp_zhV2/bin/seentao'.&
    
                                
    • 
                                
  • 编程之美-小飞的电梯调度算法
                                    bylijinnan
编程之美
                                    
    

public class AptElevator {

	/**
	 * 编程之美 小飞 电梯调度算法
	 * 在繁忙的时间，每次电梯从一层往上走时，我们只允许电梯停在其中的某一层。
	 * 所有乘客都从一楼上电梯，到达某层楼后，电梯听下来，所有乘客再从这里爬楼梯到自己的目的层。
	 * 在一楼时，每个乘客选择自己的目的层，电梯则自动计算出应停的楼层。
	 * 问：电梯停在哪
    
                                
    • 
                                
  • SQL注入相关概念
                                    chenbowen00
sqlWeb安全
                                    
    SQL Injection：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。 
 
具体来说，它是利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。 
 
首先让我们了解什么时候可能发生SQ
    
                                
    • 
                                
  • [光与电]光子信号战防御原理
                                    comsci
原理
                                    
     
 
      无论是在战场上,还是在后方,敌人都有可能用光子信号对人体进行控制和攻击,那么采取什么样的防御方法,最简单,最有效呢? 
 
      我们这里有几个山寨的办法,可能有些作用,大家如果有兴趣可以去实验一下 
 
      根据光
    
                                
    • 
                                
  • oracle 11g新特性:Pending Statistics
                                    daizj
oracledbms_stats
                                    
    oracle 11g新特性:Pending Statistics 转 
 
从11g开始，表与索引的统计信息收集完毕后，可以选择收集的统信息立即发布，也可以选择使新收集的统计信息处于pending状态，待确定处于pending状态的统计信息是安全的，再使处于pending状态的统计信息发布，这样就会避免一些因为收集统计信息立即发布而导致SQL执行计划走错的灾难。 
 
在 11g 之前的版本中，D
    
                                
    • 
                                
  • 快速理解RequireJs
                                    dengkane
jqueryrequirejs
                                    
    RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 
 
 声明不同js文件之间的依赖 
 可以按需、并行、延时载入js库 
 可以让我们的代码以模块化的方式组织 
 
初看起来并不复杂。 在html中引入requirejs 
在HTML中，添加这样的 <script> 标签： 
<script src="/path/to
    
                                
    • 
                                
  • C语言学习四流程控制if条件选择、for循环和强制类型转换
                                    dcj3sjt126com
c
                                    
    # include <stdio.h>

int main(void)
{
	int i, j;

	scanf("%d %d", &i, &j);

	if (i > j)
		printf("i大于j\n");
	else
		printf("i小于j\n");

	retu
    
                                
    • 
                                
  • dictionary的使用要注意
                                    dcj3sjt126com
IO
                                    
    NSDictionary *dict = [NSDictionary dictionaryWithObjectsAndKeys:
                          user.user_id , @"id",
                          user.username , @"username",
         
    
                                
    • 
                                
  • Android 中的资源访问(Resource)
                                    finally_m
xmlandroidStringdrawablecolor
                                    
     
简单的说，Android中的资源是指非代码部分。例如，在我们的Android程序中要使用一些图片来设置界面，要使用一些音频文件来设置铃声，要使用一些动画来显示特效，要使用一些字符串来显示提示信息。那么，这些图片、音频、动画和字符串等叫做Android中的资源文件。 
在Eclipse创建的工程中，我们可以看到res和assets两个文件夹，是用来保存资源文件的，在assets中保存的一般是原生
    
                                
    • 
                                
  • Spring使用Cache、整合Ehcache
                                    234390216
springcacheehcache@Cacheable
                                    
    Spring使用Cache 
  
  
       从3.1开始，Spring引入了对Cache的支持。其使用方法和原理都类似于Spring对事务管理的支持。Spring Cache是作用在方法上的，其核心思想是这样的：当我们在调用一个缓存方法时会把该方法参数和返回结果作为一个键值对存放在缓存中，等到下次利用同样的
    
                                
    • 
                                
  • 当druid遇上oracle blob(clob)
                                    jackyrong
oracle
                                    
    http://blog.csdn.net/renfufei/article/details/44887371 
 
众所周知，Oracle有很多坑, 所以才有了去IOE。 
 
在使用Druid做数据库连接池后，其实偶尔也会碰到小坑，这就是使用开源项目所必须去填平的。【如果使用不开源的产品，那就不是坑，而是陷阱了，你都不知道怎么去填坑】 
 
用Druid连接池，通过JDBC往Oracle数据库的
    
                                
    • 
                                
  • easyui datagrid pagination获得分页页码、总页数等信息
                                    ldzyz007

                                    
    var grid = $('#datagrid');  
var options = grid.datagrid('getPager').data("pagination").options;  
var curr = options.pageNumber;  
var total = options.total;  
var max =
    
                                
    • 
                                
  • 浅析awk里的数组
                                    nigelzeng
二维数组array数组awk
                                    
    awk绝对是文本处理中的神器，它本身也是一门编程语言，还有许多功能本人没有使用到。这篇文章就单单针对awk里的数组来进行讨论，如何利用数组来帮助完成文本分析。 
  
有这么一组数据： 
   abcd,91#31#2012-12-31 11:24:00 
case_a,136#19#2012-12-31 11:24:00 
case_a,136#23#2012-12-31 1
    
                                
    • 
                                
  • 搭建 CentOS 6 服务器(6) - TigerVNC
                                    rensanning
centos
                                    
    安装GNOME桌面环境 
 
# yum groupinstall "X Window System" "Desktop" 
 
 
安装TigerVNC 
 
# yum -y install tigervnc-server tigervnc 
 
 
启动VNC服务 
 
# /etc/init.d/vncserver restart
# vncser
    
                                
    • 
                                
  • Spring 数据库连接整理
                                    tomcat_oracle
springbeanjdbc
                                    
    1、数据库连接jdbc.properties配置详解  　　jdbc.url=jdbc:hsqldb:hsql://localhost/xdb   　　jdbc.username=sa   　　jdbc.password=   　　jdbc.driver=不同的数据库厂商驱动，此处不一一列举   　　接下来，详细配置代码如下：   　　 
Spring连接池      
    
                                
    • 
                                
  • Dom4J解析使用xpath java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常
                                    xp9802

                                    
    用Dom4J解析xml,以前没注意,今天使用dom4j包解析xml时在xpath使用处报错 
     异常栈：java.lang.NoClassDefFoundError: org/jaxen/JaxenException异常  
     导入包 jaxen-1.1-beta-6.jar 解决; 
&nb
    
                                
    •