Vue3 源码分析reactive readonly实例

引言

上次一起阅读了watch和computed的源码，其实应该先看副作用effect，因为各个响应式的API里基本都用到了，等结束了reactive和readonly和ref，就一起看看effect。这次要说的是reactive和readonly，两者在实现上流程大体一致。尤其是对Map和Set的方法的代理拦截，多少有点妙。

一、reactive 和 readonly

Vue3使用Proxy来替代Vue2中Object.defineProperty。

const target = {
  name: 'onlyy~'
}
// 创建一个对target的代理
const proxy = new Proxy(target, {
  // ...各种handler，例如get，set...
  get(target, property, receiver){
    // 其它操作
    // ...
    return Reflect.get(target, property, receiver)
  }
})

1. reactive相关类型

reactive利用Proxy来定义一个响应式对象。

  • Target：目标对象，包含几个标志，以及__v_raw字段，该字段表示它原本的非响应式状态的值；
export interface Target {
  [ReactiveFlags.SKIP]?: boolean
  [ReactiveFlags.IS_REACTIVE]?: boolean
  [ReactiveFlags.IS_READONLY]?: boolean
  [ReactiveFlags.IS_SHALLOW]?: boolean
  [ReactiveFlags.RAW]?: any
}
export const reactiveMap = new WeakMap()
export const shallowReactiveMap = new WeakMap()
export const readonlyMap = new WeakMap()
export const shallowReadonlyMap = new WeakMap()
const enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2
}

2. 相关全局变量与方法

  • ReactiveFlags：定义了各种标志对应的字符串（作为reactive对象的属性）的枚举；
  • reactiveMap
  • shallowReactiveMap
  • readonlyMap
  • shallowReadonlyMap：这几个Map分别用于存放对应API生成的响应式对象（以目标对象为key，代理对象为value），便于后续判断某个对象是否存在已创建的响应式对象；
  • TargetType：枚举成员的内容分别用于区分代理目标是否校验合法、普通对象、Set或Map；
// 各个标志枚举
export const enum ReactiveFlags {
  SKIP = '__v_skip',
  IS_REACTIVE = '__v_isReactive',
  IS_READONLY = '__v_isReadonly',
  IS_SHALLOW = '__v_isShallow',
  RAW = '__v_raw'
}
// ...
export const reactiveMap = new WeakMap()
export const shallowReactiveMap = new WeakMap()
export const readonlyMap = new WeakMap()
export const shallowReadonlyMap = new WeakMap()
const enum TargetType {
  INVALID = 0,
  COMMON = 1,
  COLLECTION = 2
}

然后是两个函数：targetTypeMap用于判断各种JS类型属于TargetType中的哪种；getTargetType用于获取target对应的TargetType类型。

function targetTypeMap(rawType: string) {
  switch (rawType) {
    case 'Object':
    case 'Array':
      return TargetType.COMMON
    case 'Map':
    case 'Set':
    case 'WeakMap':
    case 'WeakSet':
      return TargetType.COLLECTION
    default:
      return TargetType.INVALID
  }
}
function getTargetType(value: Target) {
  return value[ReactiveFlags.SKIP] || !Object.isExtensible(value)
    ? TargetType.INVALID
    : targetTypeMap(toRawType(value))
}

3. reactive函数

reactive入参类型为object，返回值类型是UnwrapNestedRefs，对嵌套的Ref进行了解包。意味着即使reactive接收一个Ref，其返回值也不用再像Ref那样通过.value来读取值。源码的注释中也给出了示例。

/*
 * const count = ref(0)
 * const obj = reactive({
 *   count
 * })
 *
 * obj.count++
 * obj.count // -> 1
 * count.value // -> 1
 */

reactive内部调用createReactiveObject来创建响应式对象。瞄一眼入参有五个：

  • target：代理目标；
  • false：对应createReactiveObject的isReadonly参数；
  • mutableHandlers：普通对象和数组的代理处理程序；
  • mutableCollectionHandlers：Set和Map的代理处理程序；
  • reactiveMap：之前定义的全局变量，收集reactive对应的依赖。
export function reactive(target: T): UnwrapNestedRefs
export function reactive(target: object) {
  // if trying to observe a readonly proxy, return the readonly version.
  if (isReadonly(target)) {
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  )
}

4. 造物主createReactiveObject

不论是reactive，还是shallowReactive、readonly和shallowReadonly，都是内部调用createReactiveObject来创建代理的。createReactiveObject也没什么操作，主要判断了下target的类型，再决定是直接返回target还是返回一个新建的proxy。

以下情况直接返回target：

  • target不是对象；
  • target已经是一个响应式的对象，即由createReactiveObject创建的proxy；
  • target类型校验不合法，例如RegExp、Date等；

当参数proxyMap对应的实参（可能为reactiveMap、shallowReactiveMap、readonlyMap或shallowReadonlyMap，分别对应ractive、shallowReactive、readonly和shallowReadonly四个API）里已经存在了target的响应式对象时，直接取出并返回该响应式对象；

否则，创建一个target的响应式对象proxy，将proxy加入到proxyMap中，然后返回该proxy。

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler,
  proxyMap: WeakMap
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target is already a Proxy, return it.
  // exception: calling readonly() on a reactive object
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // target already has corresponding Proxy
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // only specific value types can be observed.
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy
}

我们知道，代理的重点其实在与代理的处理程序，createReactiveObject根据普通对象和数组类型、Set和Map类型来区分baseHandlers和collectionHandlers。

5. shallowReactive、readonly和shallowReadonly

事实上，ractive、shallowReactive、readonly和shallowReadonly这几个函数形式上基本一致，都是通过createReactiveObject来创建响应式对象，存储在对应的proxyMap里，但是对应的baseHandlers和collectionHandlers有区别。

// shallowReactive
export function shallowReactive(
  target: T
): ShallowReactive {
  return createReactiveObject(
    target,
    false,
    shallowReactiveHandlers,
    shallowCollectionHandlers,
    shallowReactiveMap
  )
}
// raedonly
// 注意readonly不是响应式的，而是一个原对象的只读的拷贝
// 具体实现在对应的handlers里
export function readonly(
  target: T
): DeepReadonly> {
  return createReactiveObject(
    target,
    true,
    readonlyHandlers,
    readonlyCollectionHandlers,
    readonlyMap
  )
}
// shallowReadonly
// 是响应式的
// 只有最外层是只读的
export function shallowReadonly(target: T): Readonly {
  return createReactiveObject(
    target,
    true,
    shallowReadonlyHandlers,
    shallowReadonlyCollectionHandlers,
    shallowReadonlyMap
  )
}

事实上，ractive、shallowReactive、readonly和shallowReadonly这几个函数形式上基本一致，都是通过createReactiveObject来创建响应式对象，存储在对应的proxyMap里，但是对应的baseHandlers和collectionHandlers有区别。那么我们就知道了，其实重点都在各种handlers里。

二、对应的 Handlers

baseHandlers用于普通对象和数组的代理，collectionHandlers用于Set、Map等的代理。对应ractive、shallowReactive、readonly和shallowReadonly四个API，每一个都有自己的baseHandlers和collectionHandlers。

1. baseHandlers

在packages/reactivity/src/baseHandlers.ts文件中。分别导出了这4个API对应的baseHandlers。

1.1 reactive

reactive的baseHandlers中有5个代理程序。

// reactive
export const mutableHandlers: ProxyHandler = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
}
 
  
 
在拦截过程中，在get、has和ownKey这几个访问程序中进行依赖捕获(track)，在set和deleteProperty这俩用于更改的程序中触发更新(trigger) 。
 
 
get和set分别由函数createGetter和createSetter创建，这俩函数根据入参的不同，返回不同的get和set，readonly等API的baseHandlers中的get和set也大都源于此，除了两种readonly中用于告警的set。
 
 
(1) get
 
 
createGetter两个入参：isReadonly和isShallow，两两组合正好对应四个API。
 
 
     
  
  • shallow：为true时不会进入递归环节，因此是浅层的处理；
    •  
  
  • isReadonly：在createGetter中影响proxyMap的选择和递归时API的选择，它主要发挥作用是在set中。
    •  
 
 
 
 
  
function createGetter(isReadonly = false, shallow = false) {
  return function get(target: Target, key: string | symbol, receiver: object) {
    // 以下几个if分支判断target是否已经是由这几个API创建的代理对象，代理得到的proxy才具有这些key
    if (key === ReactiveFlags.IS_REACTIVE) {
      // 是否是响应式对象
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      // 是否是只读对象
      return isReadonly
    } else if (key === ReactiveFlags.IS_SHALLOW) {
      // 是否是浅层的 响应式/只读 对象
      return shallow
    } else if (
      // __v_raw 属性对应 代理对象的目标对象
      // 当该属性有值，且在相应的proxyMap中存在代理对象时，说明target已经是一个proxy了
      // __v_raw 属性对应的值为target本身
      key === ReactiveFlags.RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target
    }
    const targetIsArray = isArray(target)
    // 对数组的几个方法进行代理，在'includes', 'indexOf', 'lastIndexOf'等方法中进行track捕获依赖
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver)
    }
    const res = Reflect.get(target, key, receiver)
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res
    }
    // 如果不是readonly，则捕获依赖，因此，readonly 为非响应式的
    if (!isReadonly) {
      track(target, TrackOpTypes.GET, key)
    }
    if (shallow) {
      return res
    }
    // 如果get到的值是一个Ref，会直接解包，无需再使用 .value 来获取真正需要的值
    // 除非目标对象target是数组，或者当前的key是整数
    // 例如，obj[0]，即使是一个Ref也不会直接解包，使用的时候依然要 obj[0].value
    // shallow没有走到这一步，因此也不会自动解包
    if (isRef(res)) {
      // ref unwrapping - skip unwrap for Array + integer key.
      return targetIsArray && isIntegerKey(key) ? res : res.value
    }
    // 当get到的值是对象时，根据是否是readonly来递归操作，需要防止对象循环引用
    // shallow没有走到这一步，因此shallow是浅层的
    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.
      return isReadonly ? readonly(res) : reactive(res)
    }
    return res
  }
}

 
 
 
 
(2) set
 
 
对于reactive，可以说最主要的任务就是在set中触发更新，set包括 新增 和 修改 属性值。如果当前的key对应的值是一个Ref，且其它条件满足时，则触发更新的操作是在Ref的内部。这些在后续讲解Ref的时候会提到。
 
 
 
  
function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
    let oldValue = (target as any)[key]
    // 当前值是Readonly的Ref，而新值不是Ref时，不允许修改
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false
    }
    // 如果是深层的修改
    if (!shallow) {
      // 解出原本的非proxy值
      if (!isShallow(value) && !isReadonly(value)) {
        oldValue = toRaw(oldValue)
        value = toRaw(value)
      }
      // 目标对象非数组，当前key的值是Ref而新值不是Ref，则通过 .value 赋值
      // 在Ref内部触发更新
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value
        return true
      }
    } else {
      // 浅层模式下，忽略对象是否是响应式的
      // in shallow mode, objects are set as-is regardless of reactive or not
    }
    // 然后是触发更新的部分了
    // 判断当前key是否已经存在于target上
    const hadKey =
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key)
    const result = Reflect.set(target, key, value, receiver)
    // don't trigger if target is something up in the prototype chain of original
    // 如果是原型链上的字段则不会触发更新
    if (target === toRaw(receiver)) {
      if (!hadKey) {
        // 当前的key已经存在，触发新增的更新
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        // 当前key不存在，触发修改的更新
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}

 
 
 
 
(3) deleteProperty
 
 
删除操作的代理程序，和set一样，deleteProperty拦截delete和Reflect.deleteProperty()操作，它也能触发更新。
 
 
 
  
function deleteProperty(target: object, key: string | symbol): boolean {
  const hadKey = hasOwn(target, key)
  const oldValue = (target as any)[key]
  const result = Reflect.deleteProperty(target, key)
  // 删除成功 且 target中原来有这个属性时，触发删除的更新
  if (result && hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

 
 
 
 
(4) has
 
 
has用于判断target中是否有当前的key，拦截a in obj、with(obj){(a)}、Reflect.has等操作，属于访问程序，在其中进行has操作的依赖收集。
 
 
 
  
function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}

 
 
 
 
(5) ownKeys
 
 
用于获取target所有自身拥有的key，拦截Object.getOwnPropertyNames、Object.getOwnPropertySymbols、Object.keys、Reflect.ownKeys，属于访问程序，在其中进行迭代的依赖收集。
 
 
 
  
function ownKeys(target: object): (string | symbol)[] {
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  return Reflect.ownKeys(target)
}

 
 
 
 
现在我们算是都弄明白了，对于普通对象和数组，reactive创建proxy，通过get、set、deleteProperty、has、ownKeys五个代理处理程序，来拦截其属性访问操作，在其中进行依赖收集，拦截其增删改操作，其中触发更新。
 
 
 
 
1.2 readonly
 
 
readonly的代理处理程序只有三个：
 
 
     
  
  • get：由createGetter(true)创建，还记得我们上面讲到的createSetter吗？
    •  
  
  • set
    •  
  
  • deleteProperty：这两个代理处理程序用于告警，毕竟readonly不可修改。
    •  
 
 
 
毕加思索一下createGetter(true)，传入的readonly=true，使得get中不会进行track操作来收集依赖，因而不具有响应性。
 
 
 
  
const readonlyGet = /*#__PURE__*/ createGetter(true)
export const readonlyHandlers: ProxyHandler = {
  get: readonlyGet,
  set(target, key) {
    if (__DEV__) {
      warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  },
  deleteProperty(target, key) {
    if (__DEV__) {
      warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      )
    }
    return true
  }
}
 
  
 
 
 
1.3 shallowReactive
 
 
shallowReactive移植了reactive的baseHandlers，并且更新了get和set。具体实现也可以回顾上面说到的createGetter和createSetter。
 
 
回过头来看看createGetter(false, true)，isReadonly = false，则在get中，可以进行track依赖收集；shallow = true，则在get中不会对顶层的Ref进行解包，也不会进行递归操作。
 
 
而在createSetter(true)中，参数shallow几乎只影响是否要解出原本的raw值。如果新值value不是浅层且不是只读的，则需要解出它的原本raw值，之后才能进行赋值操作，否则我们的shallowRef将不再是浅层的了。
 
 
 
  
const shallowGet = /*#__PURE__*/ createGetter(false, true)
const shallowSet = /*#__PURE__*/ createSetter(true)
export const shallowReactiveHandlers = /*#__PURE__*/ extend(
  {},
  mutableHandlers,
  {
    get: shallowGet,
    set: shallowSet
  }
)

 
 
 
 
 
 
1.4 shallowReadonly
 
 
移植了readonly的baseHandlers，更新了其中的get，这个get也试试由createGetter创建。我们知道，readonly的baseHandlers里，除了get，另外俩都是用来拦截修改操作并告警的。
 
 
回顾一下createGetter，当isReadonly===true时，不会进行track操作来收集依赖；shallow===true时，不会对Ref进行解包，也不会走到递归环节，即是浅层的readonly。
 
 
 
  
const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true)
// Props handlers are special in the sense that it should not unwrap top-level
// refs (in order to allow refs to be explicitly passed down), but should
// retain the reactivity of the normal readonly object.
export const shallowReadonlyHandlers = /*#__PURE__*/ extend(
  {},
  readonlyHandlers,
  {
    get: shallowReadonlyGet
  }
)

 
 
 
 
 
 
2. cellectionHandlers
 
 
对于Set和Map较为复杂的数据结构，他们有自己的方法，因此代理程序会有些差别。基本都是拦截它们原本的方法，然后进行track或trigger。可以看到这几个handlers中，都只有由createInstrumentationGetter创建的get。
 
 
 
  
export const mutableCollectionHandlers: ProxyHandler = {
  get: /*#__PURE__*/ createInstrumentationGetter(false, false)
}
export const shallowCollectionHandlers: ProxyHandler = {
  get: /*#__PURE__*/ createInstrumentationGetter(false, true)
}
export const readonlyCollectionHandlers: ProxyHandler = {
  get: /*#__PURE__*/ createInstrumentationGetter(true, false)
}
export const shallowReadonlyCollectionHandlers: ProxyHandler =
  {
    get: /*#__PURE__*/ createInstrumentationGetter(true, true)
  }

 
 
 
 
 
 
1.1 createInstrumentationGetter
 
 
因为是代理Set和Map，在拦截它们的实例方法之前，对实例的访问，即get，这个get并非Map或Set实例的get方法，而是表示对实例的访问操作。
 
 
例如：
 
 
 
  
const map = new Map([['name', 'cc']]);
 
  
map.set('age', 18);
 
 
 
 
这里map.set()首先就是访问map的set方法，对应的key就是字符串'set'，而这一步就会被代理的get程序拦截，而真正的对方法的拦截，都在相应的instrumentations里预设好了。拦截了之后，如果key在instrumentations里存在，返回预设的方法，在其中进行track和trigger操作，否则是其它属性/方法，直接返回即可，不会进行track和trigger。
 
 
 
  
const [
  mutableInstrumentations,
  readonlyInstrumentations,
  shallowInstrumentations,
  shallowReadonlyInstrumentations
] = /* #__PURE__*/ createInstrumentations()
function createInstrumentationGetter(isReadonly: boolean, shallow: boolean) {
  const instrumentations = shallow
    ? isReadonly
      ? shallowReadonlyInstrumentations
      : shallowInstrumentations
    : isReadonly
    ? readonlyInstrumentations
    : mutableInstrumentations
  return (
    target: CollectionTypes,
    key: string | symbol,
    receiver: CollectionTypes
  ) => {
    if (key === ReactiveFlags.IS_REACTIVE) {
      return !isReadonly
    } else if (key === ReactiveFlags.IS_READONLY) {
      return isReadonly
    } else if (key === ReactiveFlags.RAW) {
      return target
    }
    return Reflect.get(
      hasOwn(instrumentations, key) && key in target
        ? instrumentations
        : target,
      key,
      receiver
    )
  }
}

 
 
 
 
 
 
1.2 instrumentations
 
 
和baseHandlers相比，Proxy无法直接拦截Map和Set的方法的调用，而是通过get程序来拦截，再判断key是否为执行增删改查的方法，从而判断是否进行依赖收集或更新。因此，就需要先预设好，哪些key作为方法名时可以触发track和trigger。其实也就是Map和Set的那些实例方法和迭代器方法。而各种Instrumentations，就是这些预设的方法，track和trigger操作都在其中。
 
 
 
  
function createInstrumentations() {
  // 对应reactive
  const mutableInstrumentations: Record = {
    get(this: MapTypes, key: unknown) {
      return get(this, key)
    },
    get size() {
      return size(this as unknown as IterableCollections)
    },
    has,
    add,
    set,
    delete: deleteEntry,
    clear,
    forEach: createForEach(false, false)
  }
  // 对应shallowReactive
  const shallowInstrumentations: Record = {
    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)
  }
  // 对应readonly
  const readonlyInstrumentations: Record = {
    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)
  }
  // 对应shallowReadonly
  const shallowReadonlyInstrumentations: Record = {
    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 给这些 Instrumentations 挂上几个迭代器
  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分为两部分，前部分是利用已有的get、set、add、has、clear等等来得到各个instrumentations，后部分是对各个instrumentations中的迭代方法的更新。只要不是isReadonly不是真值，则无论是get、set等方法还是keys、values等迭代器接口，都在内部进行了track或trigger，当然，get、has、size等方法 和 几个迭代器方法都属于访问操作，因此内部是使用track来收集依赖，而trigger发生在增、删、改操作里，当然，也要根据isReadonly和shallow有所区分，思路基本和baseHandlers一致。
 
 
 
  
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]
  const rawTarget = toRaw(target)
  const rawKey = toRaw(key)
  if (!isReadonly) {
    if (key !== rawKey) {
      track(rawTarget, TrackOpTypes.GET, key)
    }
    track(rawTarget, TrackOpTypes.GET, rawKey)
  }
  const { has } = getProto(rawTarget)
  const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
  if (has.call(rawTarget, key)) {
    return wrap(target.get(key))
  } else if (has.call(rawTarget, rawKey)) {
    return wrap(target.get(rawKey))
  } else if (target !== rawTarget) {
    // #3602 readonly(reactive(Map))
    // ensure that the nested reactive `Map` can do tracking for itself
    target.get(key)
  }
}
function has(this: CollectionTypes, key: unknown, isReadonly = false): boolean {
  const target = (this as any)[ReactiveFlags.RAW]
  const rawTarget = toRaw(target)
  const rawKey = toRaw(key)
  if (!isReadonly) {
    if (key !== rawKey) {
      track(rawTarget, TrackOpTypes.HAS, key)
    }
    track(rawTarget, TrackOpTypes.HAS, rawKey)
  }
  return key === rawKey
    ? target.has(key)
    : target.has(key) || target.has(rawKey)
}
function size(target: IterableCollections, isReadonly = false) {
  target = (target as any)[ReactiveFlags.RAW]
  !isReadonly && track(toRaw(target), TrackOpTypes.ITERATE, ITERATE_KEY)
  return Reflect.get(target, 'size', target)
}
function add(this: SetTypes, value: unknown) {
  value = toRaw(value)
  const target = toRaw(this)
  const proto = getProto(target)
  const hadKey = proto.has.call(target, value)
  if (!hadKey) {
    target.add(value)
    trigger(target, TriggerOpTypes.ADD, value, value)
  }
  return this
}
function set(this: MapTypes, key: unknown, value: unknown) {
  value = toRaw(value)
  const target = toRaw(this)
  const { has, get } = getProto(target)
  let hadKey = has.call(target, key)
  if (!hadKey) {
    key = toRaw(key)
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    checkIdentityKeys(target, has, key)
  }
  const oldValue = get.call(target, key)
  target.set(key, value)
  if (!hadKey) {
    trigger(target, TriggerOpTypes.ADD, key, value)
  } else if (hasChanged(value, oldValue)) {
    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
  }
  return this
}
function deleteEntry(this: CollectionTypes, key: unknown) {
  const target = toRaw(this)
  const { has, get } = getProto(target)
  let hadKey = has.call(target, key)
  if (!hadKey) {
    key = toRaw(key)
    hadKey = has.call(target, key)
  } else if (__DEV__) {
    checkIdentityKeys(target, has, key)
  }
  const oldValue = get ? get.call(target, key) : undefined
  // forward the operation before queueing reactions
  const result = target.delete(key)
  if (hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}
function clear(this: IterableCollections) {
  const target = toRaw(this)
  const hadItems = target.size !== 0
  const oldTarget = __DEV__
    ? isMap(target)
      ? new Map(target)
      : new Set(target)
    : undefined
  // forward the operation before queueing reactions
  const result = target.clear()
  if (hadItems) {
    trigger(target, TriggerOpTypes.CLEAR, undefined, undefined, oldTarget)
  }
  return result
}

 
 
 
 
 
 
1.3 createIterableMethod
 
 
这里稍微提一下createIterableMethod，用于利用Map和Set本身的迭代器方法，并做了一点修改，在其中加入了track来收集依赖。
 
 
 
  
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)
    const targetIsMap = isMap(rawTarget)
    const isPair =
      method === 'entries' || (method === Symbol.iterator && targetIsMap)
    const isKeyOnly = method === 'keys' && targetIsMap
    const innerIterator = target[method](...args)
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
    !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() {
        const { value, done } = innerIterator.next()
        return done
          ? { value, done }
          : {
              value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
              done
            }
      },
      // iterable protocol
      [Symbol.iterator]() {
        return this
      }
    }
  }
}

 
 
 
 
 
 
小结
 
 
分析完各个部分，可以看到，无论是baseHandlers还是collectionHandlers，思路都是一致的。
 
 
但是collectionHandlers只有get这一个代理程序，通过拦截到的key判断是否是Map和Set实例自带的增删改查的方法，从而返回预设好的hack版本的方法或原本的属性值，然后继续后续的操作。在hack版本的方法里进行track和trigger。
 
 
以上就是Vue3 源码分析reactive readonly实例的详细内容，更多关于Vue3 reactive readonly的资料请关注脚本之家其它相关文章！
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(Vue3 源码分析reactive readonly实例)

        

            

                
    
                    
  • 四章-32-点要素的聚合
                        彩云飘过

                        
    本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
    
                    
    • 
                    
  • ES聚合分析原理与代码实例讲解
                        光剑书架上的书
大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLMJavaPython架构设计Agent程序员实现财富自由
                        
    ES聚合分析原理与代码实例讲解1.背景介绍1.1问题的由来在大规模数据分析场景中，特别是在使用Elasticsearch（ES）进行数据存储和检索时，聚合分析成为了一个至关重要的功能。聚合分析允许用户对数据集进行细分和分组，以便深入探索数据的结构和模式。这在诸如实时监控、日志分析、业务洞察等领域具有广泛的应用。1.2研究现状目前，ES聚合分析已经成为现代大数据平台的核心组件之一。它支持多种类型的聚
    
                    
    • 
                    
  • 用Python实现读取统计单词个数
                        程序媛了了
python游戏java
                        
    完整实例代码：fromcollectionsimportCounterdefpythonit():danci={}withopen("pythonit.txt","r",encoding="utf-8")asf:foriinf:words=i.strip().split()forwordinwords:ifwordnotindanci:danci[word]=1else:danci[word]+=
    
                    
    • 
                    
  • vue3中el-table中点击图片放大时，被表格覆盖
                        叫我小鹏呀
vue.jsjavascript前端
                        
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
    
                    
    • 
                    
  • C++ lambda闭包消除类成员变量
                        barbyQAQ
c++c++java算法
                        
    原文链接：https://blog.csdn.net/qq_51470638/article/details/142151502一、背景在面向对象编程时，常常要添加类成员变量。然而类成员一旦多了之后，也会带来干扰。拿到一个类，一看成员变量好几十个，就问你怕不怕？二、解决思路可以借助函数式编程思想，来消除一些不必要的类成员变量。三、实例举个例子：classClassA{public:...intfu
    
                    
    • 
                    
  • 阿里云服务器4核8G配置购买及价格类文章汇总（10篇）
                        阿里云最新优惠和活动汇总

                        
    阿里云服务器4核8G配置如何购买？价格是多少？4核8G配置的阿里云服务器可以通过云服务器产品页购买也可以通过阿里云活动去下单购买，一般通过活动购买的用户比较多，但是不同实例规格的阿里云服务器价格不一样，带宽不同价格也不一样，本文为大家汇总了10篇关于阿里云服务器4核8G配置购买教程文章和价格类文章，分为购买类文章和价格类文章，以供大家参考如何购买阿里云服务器4核8G配置和最新优惠价格是多少。阿里云
    
                    
    • 
                    
  • Python编程 - 初识面向对象
                        易辰君
Python核心编程python开发语言
                        
    目录前言一、面向对象二、类和对象（一）类简介定义类（二）对象简介创建对象（三）总结三、实例属性和实例方法（一）实例属性创建的基本语法使用示例（二）实例方法定义实例方法的基本语法调用示例方法的示例（三）总结四、类中的self（一）基本概念（二）作用访问实例属性调用其他实例方法在构造函数中初始化对象（三）总结五、__init__方法（一）__init__方法的特点（二）基本语法（三）示例（四）总结前言
    
                    
    • 
                    
  • 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模块，
    
                    
    • 
                    
  • 高性能javascript--算法和流程控制
                        海淀萌狗

                        
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    
                    
    • 
                    
  • JVM源码分析之堆外内存完全解读
                        HeapDump性能社区

                        
    概述广义的堆外内存说到堆外内存，那大家肯定想到堆内内存，这也是我们大家接触最多的，我们在jvm参数里通常设置-Xmx来指定我们的堆的最大值，不过这还不是我们理解的Java堆，-Xmx的值是新生代和老生代的和的最大值，我们在jvm参数里通常还会加一个参数-XX:MaxPermSize来指定持久代的最大值，那么我们认识的Java堆的最大值其实是-Xmx和-XX:MaxPermSize的总和，在分代算法
    
                    
    • 
                    
  • 【vite 自动配置路由】
                        CODER-V
前端javascriptvue.js前端软件构建
                        
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
    
                    
    • 
                    
  • 【java】怎么理解不同对象实例的对象锁是互不干扰的
                        晨春计
Androidjava
                        
    在Java中，synchronized关键字用于实现线程同步，它可以作用于实例方法、静态方法以及代码块。当synchronized应用于实例方法或实例变量时，它创建的是一个对象锁，这个锁是与特定的对象实例关联的。因此，每个对象实例都有其自己的锁。这里的关键点在于，对象锁是绑定到特定对象实例上的。这意味着对于不同的对象实例，即使它们属于同一个类，它们各自拥有独立的对象锁。当一个线程获取了一个对象实例
    
                    
    • 
                    
  • Vue3 vant组件库自动导入
                        不叫虎子
Vuevue.js前端javascript前端框架typescript
                        
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
    
                    
    • 
                    
  • 如何利用Samba跨平台分享Ubuntu文件夹
                        GottenZZP
部署相关ubuntulinux运维
                        
    1.安装Samba终端输入sudoaptinstallsamba2.配置Samba终端输入sudovim/etc/samba/smb.conf打开配置文件滑动文件到最底下输入以下内容[Share]#要共享的文件夹路径path=/home/xxx/sambasharereadonly=nobrowsable=yes编辑完成后按一下Esc按键后输入:wq回车保存3.重启Samba服务终端输入sudos
    
                    
    • 
                    
  • C#动态加载DLL程序集及使用反射创建实例-简记
                        不全
C#相关Asp.netWebFormAsp.netMVCc#Assembly反射程序集
                        
    Assembly动态加载程序集：分两种情况：1、需要加载的程序集已经在程序中被引用了，则直接从当前程序域中查找即可：Assemblyassembly=AppDomain.CurrentDomain.GetAssemblies().FirstOrDefault(x=>x.GetName().Name.Contains("theAssemblyName"));2、需要加载的程序集未被加载，则使用程序集
    
                    
    • 
                    
  • 六、全局锁和表锁：给表加个字段怎么有这么多阻碍
                        nieniemin

                        
    数据库锁设计的初衷是处理并发问题。作为多用户共享的资源，当出现并发访问的时候，数据库需要合理地控制资源的访问规则。而锁就是用来实现这些访问规则的重要数据结构。根据加锁的范围，MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类。6.1全局锁全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法，命令是Flushtableswithreadlock(FTWRL)。当你需要让整个库处于
    
                    
    • 
                    
  • linux下好用的任务管理器htop
                        WittXie
Linuxlinux服务器运维
                        
    给大家推荐个好用的任务管理器htop，简直好用的不得了。完虐top。不解释了，看文章！！！在Linux系统中，top命令用来显示系统中正在运行的进程的实时状态，它显示了一些非常有用的信息，比如CPU利用情况、内存消耗情况，以及每个进程情况等。但是，你知道吗？还有另外一个命令行工具'htop'，它与传统的top命令功能一样，但它有更加强大的功能及能显示更多的信息。这篇文章，我们会用实例来讨论这个'h
    
                    
    • 
                    
  • maven-assembly-plugin 打包实例
                        带着二娃去遛弯

                        
    1.先在pom.xml文件中添加assembly打包插件org.apache.maven.pluginsmaven-assembly-plugin2.6assembly/assembly.xmlmake-assemblypackagesingle说明:1.需要修改的可能就是descriptors标签下面的打包配置文件目录,指定assembly.xml的路径.2.可以添加多个打包配置文件,进行多种形
    
                    
    • 
                    
  • Cut, Paste and Learn方法解读
                        wangxinwei2000
深度学习人工智能
                        
    Abstract问题背景：标注数据的缺乏：在实例检测任务中，部署物体检测模型的一个主要障碍是缺乏大量标注数据。例如，在一个特定的厨房环境中找到包含实例的大型标注数据集是不太可能的。每当面对新的环境和新的物体实例时，都需要进行昂贵的数据收集和标注工作。研究贡献：解决方法：本文提出了一种简单的方法，可以以最小的努力生成大量标注的实例数据集。关键洞察：研究者的关键洞察是，仅仅确保“局部真实感”（patc
    
                    
    • 
                    
  • 阿里云服务器4核8G配置可选实例规格及最新优惠价格表（2023最新）
                        阿里云最新优惠和活动汇总

                        
    阿里云4核8G服务器有十几种实例规格可选，其中计算型c7、通用算力型u1和计算优化型c7（国外地域）三种实例规格有优惠，其中计算型c7实例4核8G配置1M带宽优惠价格为3127.61元1年、5M带宽优惠价格为3862.01元1年；通用算力型u1实例4核8G配置1M带宽1367.86元1年、5M带宽优惠价格为1735.06元1年；计算优化型c7（国外地域）实例4核8G配置1M带宽5907.19元1年
    
                    
    • 
                    
  • Golang Channel
                        PandaSkr
golang
                        
    Channel解析1.Channel源码分析1.1Channel数据结构typehchanstruct{qcountuint//channel的元素数量dataqsizuint//channel循环队列长度bufunsafe.Pointer//指向循环队列的指针elemsizeuint16//元素大小closeduint32//channel是否关闭0-未关闭elemtype*_type//元素类
    
                    
    • 
                    
  • [面试高频问题]关于多线程的单例模式
                        朱玥玥要每天学习
java单例模式开发语言
                        
    单例模式什么是设计模式?设计模式可以看做为框架或者是围棋中的”棋谱”,红方当头炮,黑方马来跳.根据一些固定的套路下,能保证局势不会吃亏.在日常的程序设计中,往往有许多业务场景,根据这些场景,大佬们总结出了一些固定的套路.按照这个套路来实现代码,也不会吃亏.什么是单例模式,保证某类在程序中只有一个实例,而不会创建多份实例.单例模式具体的实现方式:可分为”懒汉模式”,”饿汉模式”.饿汉模式类加载的同时
    
                    
    • 
                    
  • Three.js AnimationUtils 和 AnimationObjectGroup
                        灵魂清零
three前端web3javascript
                        
    AnimationObjectGroup接收共享动画状态的一组对象。在使用手册的“下一步”章节中，“动画系统”一文对three.js动画系统中的不同元素作出了概述用法:将本来要作为根对象传入构造器或者动画混合器(AnimationMixer)的clipAction方法中的对象加入组中，并将这个组对象作为根对象传递。注意，这个类的实例作为混合器中的一个对象，因此，必须对组内的单个对象做缓存控制。限制
    
                    
    • 
                    
  • 华为云分布式缓存服务DCS与开源服务差异对比
                        hcinfo_18
redis使用华为云Redis5.0分布式缓存服务Redis客户端
                        
    分布式缓存服务DCS提供单机、主备、集群等丰富的实例类型，满足用户高读写性能及快速数据访问的业务诉求。支持丰富的实例管理操作，帮助用户省去运维烦恼。用户可以聚焦于业务逻辑本身，而无需过多考虑部署、监控、扩容、安全、故障恢复等方面的问题。DCS基于开源Redis、Memcached向用户提供一定程度定制化的缓存服务，因此，除了拥有开源服务缓存数据库的优秀特性，DCS提供更多实用功能。一、与开源Red
    
                    
    • 
                    
  • Java集合类框架源码分析 之 RoleList源码解析 【6】
                        yunzhonghefei
Java集合类源码分析RoleList源码解析
                        
    该类继承于ArrayList，针对Role进行了一些扩展。其他方法和ArrayList中基本相同，源码不做针对性分析：看一下类简介：/***代表了一个roles的列表，作为方法setRoles()的参数，去创建一个关联关系，并且尝试在同一个关系中设置多个角色。*ARoleListrepresentsalistofroles(Roleobjects).Itisusedas*parameterwhen
    
                    
    • 
                    
  • 从简单到复杂：三种工厂模式的对比与应用
                        技术拾光者
设计模式java设计模式简单工厂模式抽象工厂模式工厂方法模式
                        
    在软件设计中，创建型设计模式用于处理对象创建的复杂性。本文将对比三种常见的创建型设计模式：简单工厂模式、工厂方法模式和抽象工厂模式。一，简单工厂模式定义：简单工厂模式（SimpleFactoryPattern）定义了一个工厂类，该类可以根据传入的参数决定创建哪一种产品实例。结构：产品（Product）：定义产品的接口。具体产品（ConcreteProduct）：实现具体产品。工厂（Factory）
    
                    
    • 
                    
  • Python静态方法@staticmethod和类方法@classmethod
                        西北小生_

                        
    Python静态方法@staticmethod和类方法@classmethod经常出现在类的定义中，二者和常规实例方法之间有什么区别呢？先看例子：classA:cnt=0val=1def__init__(self,cnt=0,val=1):self.val=valA.cnt+=1defnormal_fun(self,x):print(x+self.val)@classmethoddefget_cn
    
                    
    • 
                    
  • Spring Security定义多个过滤器链（10）
                        小黑屋说YYDS
spring
                        
    在SpringSecurity中可以同时存在多个过滤器链，一个WebSecurityConfigurerAdapter的实例就可以配置一条过滤器链。我们来看如下一个案例：@ConfigurationpublicclassSecurityConfig{@BeanUserDetailsServiceus(){InMemoryUserDetailsManagerusers=newInMemoryUser
    
                    
    • 
                                
  • html页面js获取参数值
                                    0624chenhong
html
                                    
    1.js获取参数值js 
function GetQueryString(name) 
 { 
      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
      var r = windo
    
                                
    • 
                                
  • MongoDB 在多线程高并发下的问题
                                    BigCat2013
mongodbDB高并发重复数据
                                    
    最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫 展，重复去看 MongoDB 的 API , 终于有了新发现 ： 
com.mongodb.DB 这个类有
    
                                
    • 
                                
  • c++ 用类模版实现链表(c++语言程序设计第四版示例代码)
                                    CrazyMizzz
数据结构C++
                                    
    #include<iostream>
#include<cassert>
using namespace std;
template<class T>
class Node
{
private:
	Node<T> * next;
public:
	T data;                                    
    
                                
    • 
                                
  • 最近情况
                                    麦田的设计者
感慨考试生活
                                    
       在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。 
  
    
                                
    • 
                                
  • linux系统中用pkill踢出在线登录用户
                                    被触发
linux
                                    
    由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 
1/#who   查出当前有那些终端登录（用 w 命令更详细） 
# who 
root     pts/0        2010-10-28 09:36 (192
    
                                
    • 
                                
  • 仿QQ聊天第二版
                                    肆无忌惮_
qq
                                    
    在第一版之上的改进内容: 
 第一版链接: 
http://479001499.iteye.com/admin/blogs/2100893 
  
用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 
增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑. 
  
信息修改后上传至服务器再告诉所有用户,自己的窗口
    
                                
    • 
                                
  • java读取配置文件
                                    知了ing

                                    
    1，java读取.properties配置文件 
 
InputStream in;
		try {
			in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径
		    Properties p = new Properties()
    
                                
    • 
                                
  • __attribute__ 你知多少？
                                    矮蛋蛋
C++gcc
                                    
    原文地址: 
http://www.cnblogs.com/astwish/p/3460618.html 
GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 
 
__attribute__ 书写特征是：
    
                                
    • 
                                
  • jsoup使用笔记
                                    alleni123
java爬虫JSoup
                                    
    <dependency>
	<groupId>org.jsoup</groupId>
	<artifactId>jsoup</artifactId>
	<version>1.7.3</version>
</dependency>
 
 
 
 
 
2014/08/28 
今天遇到这种形式， 
    
                                
    • 
                                
  • JAVA中的集合 Collectio 和Map的简单使用及方法
                                    百合不是茶
listmapset
                                    
             List ,set ,map的使用方法和区别 
java容器类类库的用途是保存对象，并将其分为两个概念： 
    Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素  ，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
    
                                
    • 
                                
  • 杀LINUX的JOB进程
                                    bijian1013
linuxunix
                                    
    今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉 
  
系统环境： 
   ORACLE 10G 
   Linux操作系统 
  
操作步骤如下： 
第一步.查询出来那个job在运行，找个对应的SID字段 
select * from dba_jobs_running--找到job对应的sid 
&n
    
                                
    • 
                                
  • Spring AOP详解
                                    bijian1013
javaspringAOP
                                    
            最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 
1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
    
                                
    • 
                                
  • [Gson六]Gson类型适配器(TypeAdapter)
                                    bit1129
Adapter
                                    
    TypeAdapter的使用动机 
 Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。 
  
以Date为例，在序列化和反序列化时，Gson默认使用java.
    
                                
    • 
                                
  • 【spark八十七】给定Driver Program， 如何判断哪些代码在Driver运行，哪些代码在Worker上执行
                                    bit1129
driver
                                    
    Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分 
 
 作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。 
 计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务 
 
    
                                
    • 
                                
  • nginx 经验总结
                                    ronin47
nginx 总结
                                    
    　　　深感nginx的强大，只学了皮毛，把学下的记录。 
　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写） 
           获取body,通过接口，再展开，根据Ｋ取Ｖ 
　　　获取uri,以$arg_XX 
     &n
    
                                
    • 
                                
  • 轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点
                                    bylijinnan
数组
                                    
    
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;


public class ExoWeb {

	public static void main(String[] args) {
		ExoWeb ew=new ExoWeb();
		
		System.out.pri
    
                                
    • 
                                
  • Netty源码学习-Java-NIO-Reactor
                                    bylijinnan
java多线程netty
                                    
    Netty里面采用了NIO-based Reactor Pattern 
了解这个模式对学习Netty非常有帮助 
 
参考以下两篇文章： 
 
http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html 
 
http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf 

    
                                
    • 
                                
  • AOP通俗理解
                                    cngolon
springAOP
                                    
    1.我所知道的aop     初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和 我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而 已。 2.为什么用aop&nb
    
                                
    • 
                                
  • cursor variable 实例
                                    ctrain
variable
                                    
    
create or replace procedure proc_test01
as 
type emp_row is record(
empno emp.empno%type,
ename emp.ename%type,
job emp.job%type,
mgr emp.mgr%type,
hiberdate emp.hiredate%type,
sal emp.sal%t
    
                                
    • 
                                
  • shell报bash: service: command not found解决方法
                                    daizj
linuxshellservicejps
                                    
    今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下： 
  
脚本报错如下： 
./olap_quick_intall.sh: line 57: service: command not found 
./olap_quick_intall.sh: line 59
    
                                
    • 
                                
  • 40个迹象表明你还是PHP菜鸟
                                    dcj3sjt126com
设计模式PHP正则表达式oop
                                    
    你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准 ，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
    
                                
    • 
                                
  • Android逐帧动画的实现
                                    dcj3sjt126com
android
                                    
    一、代码实现： 
private ImageView iv;
	private AnimationDrawable ad;
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout
    
                                
    • 
                                
  • java远程调用linux的命令或者脚本
                                    eksliang
linuxganymed-ssh2
                                    
    转载请出自出处：
http://eksliang.iteye.com/blog/2105862  
    
   Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)  
 使用步骤如下： 
1.导包 
官网下载: 
http://www.ganymed.ethz.ch/ssh2/ 
ma
    
                                
    • 
                                
  • adb端口被占用问题
                                    gqdy365
adb
                                    
    最近重新安装的电脑，配置了新环境，老是出现： 
 
 

 adb server is out of date.  killing...  
    ADB server didn't ACK  
    * failed to start daemon *  
 
百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。 
 
一个比较彻底的解决办法就是修改
    
                                
    • 
                                
  • ASP.NET使用FileUpload上传文件
                                    hvt
.netC#hovertreeasp.netwebform
                                    
    前台代码： 
<asp:FileUpload ID="fuKeleyi" runat="server" />
<asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
    
                                
    • 
                                
  • 代码之谜（四）- 浮点数（从惊讶到思考）
                                    justjavac
浮点数精度代码之谜IEEE
                                    
    在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说， 一点都不简单。 
单单是说明 IEEE浮点数 就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。 一次面试 
记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试， 多年以后，他已经称为了一名很出色的
    
                                
    • 
                                
  • 数据结构随记_1
                                    lx.asymmetric
数据结构笔记
                                    
    第一章 
  1.数据结构包括数据的
逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是
顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种，分别是
 查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性： 
输入、输出、可行性、确定性和有穷性。 5.算法分析的
    
                                
    • 
                                
  • linux的会话和进程组
                                    网络接口
linux
                                    
    会话： 一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？ 先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
    
                                
    • 
                                
  • 二维数组 元素的连续求解
                                    1140566087
二维数组ACM
                                    
    import java.util.HashMap;




public class Title {
	public static void main(String[] args){
		f();
	}

	// 二位数组的应用
	//12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。
	public static void f(){

    
                                
    • 
                                
  • 也谈什么时候Java比C++快
                                    windshome
javaC++
                                    
      
刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。 
  
你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？ 
  
我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C
    
                                
    •