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)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码
                        说私域
人工智能小程序
                        
    摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
    
                    
    • 
                    
  • 四章-32-点要素的聚合
                        彩云飘过

                        
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
    
                    
    • 
                    
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    
                    
    • 
                    
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    
                    
    • 
                    
  • libyuv之linux编译
                        jaronho
Linuxlinux运维服务器
                        
    文章目录一、下载源码二、编译源码三、注意事项1、银河麒麟系统（aarch64）（1）解决armv8-a+dotprod+i8mm指令集支持问题（2）解决armv9-a+sve2指令集支持问题一、下载源码到GitHub网站下载https://github.com/lemenkov/libyuv源码，或者用直接用git克隆到本地，如：gitclonehttps://github.com/lemenko
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • ArrayList 源码解析
                        程序猿进阶
Java基础ArrayListListjava面试性能优化架构设计idea
                        
    ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
    
                    
    • 
                    
  • Python神器！WEB自动化测试集成工具 DrissionPage
                        亚丁号
python开发语言
                        
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
    
                    
    • 
                    
  • vue3中el-table中点击图片放大时，被表格覆盖
                        叫我小鹏呀
vue.jsjavascript前端
                        
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
    
                    
    • 
                    
  • vue项目element-ui的table表格单元格合并
                        酋长哈哈
vue.jselementuijavascript前端
                        
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
    
                    
    • 
                    
  • Vue中table合并单元格用法
                        weixin_30613343
javascriptViewUI
                        
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • 笋丁网页自动回复机器人V3.0.0免授权版源码
                        希希分享
软希网58soho_cn源码资源笋丁网页自动回复机器人
                        
    笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安
    
                    
    • 
                    
  • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
    
                    
    • 
                    
  • ESP32-C3入门教程 网络篇⑩——基于esp_https_ota和MQTT实现开机主动升级和被动触发升级的OTA功能
                        小康师兄
ESP32-C3入门教程https服务器esp32OTAMQTT
                        
    文章目录一、前言二、软件流程三、部分源码四、运行演示一、前言本文基于VSCodeIDE进行编程、编译、下载、运行等操作基础入门章节请查阅：ESP32-C3入门教程基础篇①——基于VSCode构建HelloWorld教程目录大纲请查阅：ESP32-C3入门教程——导读ESP32-C3入门教程网络篇⑨——基于esp_https_ota实现史上最简单的ESP32OTA远程固件升级功能二、软件流程
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • 【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码）
                        疯狂的机器人
Python搞定车载自动化pythonDoIPUDSISO142291SO13400Bootloadertcp/ip
                        
    系列文章目录【Python搞定车载自动化测试】系列文章目录汇总文章目录系列文章目录前言一、环境搭建1.软件环境2.硬件环境二、目录结构三、源码展示1.DoIP诊断基础函数方法2.DoIP诊断业务函数方法3.27服务安全解锁4.DoIP自动化刷写四、测试日志1.测试日志五、完整源码链接前言随着智能电动汽车行业的发展，汽车=智能终端+四个轮子，各家车企都推出了各自的OTA升级方案，本章节主要介绍如何使
    
                    
    • 
                    
  • vue+el-table 可输入表格使用上下键进行input框切换
                        以对_
vue学习记录vue.jsjavascript前端
                        
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
    
                    
    • 
                    
  • vue + Element UI table动态合并单元格
                        我家媳妇儿萌哒哒
elementUIvue.js前端javascript
                        
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
    
                    
    • 
                    
  • vue 创建项目报错：command failed: npm install --loglevel error
                        那鱼、会飞
vue.jsvue-cli3
                        
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
    
                    
    • 
                    
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开
                        摸鱼小号
php
                        
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
    
                    
    • 
                    
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）
                        java毕设程序源码王哥
php课程设计vue.js
                        
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • vue render 函数详解 (配参数详解)
                        你的眼睛會笑
vue2vue.jsjavascript前端
                        
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
                        焚木灵
node.jsvue
                        
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
    
                    
    • 
                    
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
    
                    
    • 
                    
  • JVM源码分析之堆外内存完全解读
                        HeapDump性能社区

                        
    概述广义的堆外内存说到堆外内存，那大家肯定想到堆内内存，这也是我们大家接触最多的，我们在jvm参数里通常设置-Xmx来指定我们的堆的最大值，不过这还不是我们理解的Java堆，-Xmx的值是新生代和老生代的和的最大值，我们在jvm参数里通常还会加一个参数-XX:MaxPermSize来指定持久代的最大值，那么我们认识的Java堆的最大值其实是-Xmx和-XX:MaxPermSize的总和，在分代算法
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                                
  • 数据采集高并发的架构应用
                                    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
    
                                
    •