听说你很了解 Vue3 响应式？

前言

<< 温馨提醒 >> 本文内容偏干，建议边喝水边食用，如有不适请及时点赞！ 055D9C0B.png

【A】：能不能说说 Vue3 响应式都处理了哪些数据类型？都怎么处理的呀？

【B】：能，只能说一点点...

听说你很了解 Vue3 响应式？_第1张图片

【A】：...

只要问到 Vue 相关的内容，似乎总绕不过 响应式原理 的话题，随之而来的回答必然是围绕着 Object.defineProperty 和 Proxy 来展开（即 Vue2 和 Vue3），但若继续追问某些具体实现是不是就仓促结束回答了（你跑我追，你不跑我还追）。

本文就不再过多介绍 Vue2 中响应式的处理，感兴趣可以参考 从 vue 源码看问题 —— 如何理解 Vue 响应式？，但是会有简单提及，下面就来看看 Vue3 中是如何处理 原始值、Object、Array、Set、Map 等数据类型的响应式。

听说你很了解 Vue3 响应式？_第2张图片

从 Object.defineProperty 到 Proxy

一切的一切还得从 Object.defineProperty 开始讲起，那是一个不一样的 API ... 听说你很了解 Vue3 响应式？_第3张图片（bgm 响起，自行体会）

Object.defineProperty

Object.defineProperty(obj, prop, descriptor) 方法会直接在一个对象上定义一个 新属性，或修改一个 对象 的 现有属性，并返回此对象，其参数具体为：

  • obj：要定义属性的对象
  • prop：要定义或修改的 属性名称 或 Symbol 
  • descriptor：要定义或修改的 属性描述符

从以上的描述就可以看出一些限制，比如：

  • 目标是 对象属性，不是 整个对象

  • 一次只能 定义或修改一个属性

    • 当然有对应的一次处理多个属性的方法 Object.defineProperties()，但在 vue 中并不适用，因为 vue 不能提前知道用户传入的对象都有什么属性，因此还是得经过类似 Object.keys() + for 循环的方式获取所有的 key -> value，而这其实是没有必要使用 Object.defineProperties()

在 Vue2 中的缺陷

Object.defineProperty() 实际是通过 定义 或 修改 对象属性 的描述符来实现 数据劫持，其对应的缺点也是没法被忽略的：

  • 只能拦截对象属性的 get 和 set 操作，比如无法拦截 delete、in、方法调用 等操作

  • 动态添加新属性（响应式丢失）

    • 保证后续使用的属性要在初始化声明 data 时进行定义
    • 使用 this.$set() 设置新属性

  • 通过 delete 删除属性（响应式丢失）

    • 使用 this.$delete() 删除属性

  • 使用数组索引 替换/新增 元素（响应式丢失）

    • 使用 this.$set() 设置新元素

  • 使用数组 push、pop、shift、unshift、splice、sort、reverse 等 原生方法 改变原数组时（响应式丢失）

    • 使用 重写/增强 后的 push、pop、shift、unshift、splice、sort、reverse 方法
  • 一次只能对一个属性实现 数据劫持，需要遍历对所有属性进行劫持
  • 数据结构复杂时（属性值为 引用类型数据），需要通过 递归 进行处理

【扩展】Object.defineProperty 和 Array ？

它们有啥关系，其实没有啥关系，只是大家习惯性的会回答 Object.defineProperty 不能拦截 Array 的操作，这句话说得对但也不对1AE7D8B2.gif。

使用 Object.defineProperty 拦截 Array

Object.defineProperty 可用于实现对象属性的 get 和 set 拦截，而数组其实也是对象，那自然是可以实现对应的拦截操作，如下：

听说你很了解 Vue3 响应式？_第4张图片
听说你很了解 Vue3 响应式？_第5张图片

Vue2 为什么不使用 Object.defineProperty 拦截 Array？

尤大在曾在 GitHub 的 Issue 中做过如下回复：

听说你很了解 Vue3 响应式？_第6张图片

说实话性能问题到底指的是什么呢？听说你很了解 Vue3 响应式？_第7张图片 下面是总结了一些目前看到过的回答：

  • 数组 和 普通对象 在使用场景下有区别，在项目中使用数组的目的大多是为了 遍历，即比较少会使用 array[index] = xxx 的形式，更多的是使用数组的 Api 的方式
  • 数组长度是多变的，不可能像普通对象一样先在 data 选项中提前声明好所有元素，比如通过 array[index] = xxx 方式赋值时，一旦 index 的值超过了现有的最大索引值，那么当前的添加的新元素也不会具有响应式
  • 数组存储的元素比较多，不可能为每个数组元素都设置 getter/setter
  • 无法拦截数组原生方法如 push、pop、shift、unshift 等的调用，最终仍需 重写/增强 原生方法

Proxy & Reflect

由于在 Vue2 中使用 Object.defineProperty 带来的缺陷，导致在 Vue2 中不得不提供了一些额外的方法（如：Vue.set、Vue.delete()）解决问题，而在 Vue3 中使用了 Proxy 的方式来实现 数据劫持，而上述的问题在 Proxy 中都可以得到解决。

Proxy

Proxy 主要用于创建一个 对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等），本质上是通过拦截对象 内部方法 的执行实现代理，而对象本身根据规范定义的不同又会区分为 常规对象 和 异质对象（这不是重点，可自行了解）。

Reflect

Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法，这些方法与 Proxy handlers") 提供的的方法是一一对应的，且 Reflect 不是一个函数对象，即不能进行实例化，其所有属性和方法都是静态的。

更多方法点此可见

Proxy 为什么需要 Reflect 呢？

在 Proxy 的 get(target, key, receiver)、set(target, key, newVal, receiver) 的捕获器中都能接到前面所列举的参数：

  • target 指的是 原始数据对象
  • key 指的是当前操作的 属性名
  • newVal 指的是当前操作接收到的 最新值
  • receiver 指向的是当前操作 正确的上下文
怎么理解 Proxy handler 中 receiver 指向的是当前操作正确上的下文呢？

  • 正常情况下，receiver 指向的是 当前的代理对象

    听说你很了解 Vue3 响应式？_第8张图片

  • 特殊情况下，receiver 指向的是 引发当前操作的对象

    • 通过 Object.setPrototypeOf() 方法将代理对象 proxy 设置为普通对象 obj 的原型
    • 通过 obj.name 访问其不存在的 name 属性，由于原型链的存在，最终会访问到 proxy.name 上，即触发 get 捕获器

    听说你很了解 Vue3 响应式？_第9张图片

在 Reflect 的方法中通常只需要传递 target、key、newVal 等，但为了能够处理上述提到的特殊情况，一般也需要传递 receiver 参数，因为 Reflect 方法中传递的 receiver 参数代表执行原始操作时的 this 指向，比如：Reflect.get(target, key , receiver)、Reflect.set(target, key, newVal, receiver)。

总结：Reflect 是为了在执行对应的拦截操作的方法时能 传递正确的 this 上下文。

Vue3 如何使用 Proxy 实现数据劫持？

Vue3 中提供了 reactive() 和 ref() 两个方法用来将 目标数据 变成 响应式数据，而通过 Proxy 来实现 数据劫持（或代理） 的具体实现就在其中，下面一起来看看吧！

听说你很了解 Vue3 响应式？_第10张图片

reactive 函数

从源码来看，其核心其实就是 createReactiveObject(...) 函数，那么继续往下查看对应的内容

源码位置：packages\reactivity\src\reactive.ts

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, // 对象类型的 handlers
    mutableCollectionHandlers, // 集合类型的 handlers
    reactiveMap
  )
}

createReactiveObject() 函数

源码的体现也是非常简单，无非就是做一些前置判断处理：

  • 若目标数据是 原始值类型，直接向返回 原数据
  • 若目标数据的 __v_raw 属性为 true，且是【非响应式数据】或 不是通过调用 readonly() 方法，则直接返回 原数据
  • 若目标数据已存在相应的 proxy 代理对象，则直接返回 对应的代理对象

  • 若目标数据不存在对应的 白名单数据类型 中，则直接返回原数据，支持响应式的数据类型如下：

    • 可扩展的对象，即是否可以在它上面添加新的属性
    • __v_skip 属性不存在或值为 false 的对象
    • 数据类型为 Object、Array、Map、Set、WeakMap、WeakSet 的对象
    • 其他数据都统一被认为是 无效的响应式数据对象
  • 通过 Proxy 创建代理对象，根据目标数据类型选择不同的 Proxy handlers

看来具体的实现又在不同数据类型的 捕获器 中，即下面源码的 collectionHandlers 和 baseHandlers ，而它们则对应的是在上述 reactive() 函数中为 createReactiveObject() 函数传递的 mutableCollectionHandlers 和 mutableHandlers 参数。

源码位置：packages\reactivity\src\reactive.ts

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
  }

  // 目标数据的 __v_raw 属性若为 true，且是【非响应式数据】或 不是通过调用 readonly() 方法，则直接返回
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }

  // 目标对象已存在相应的 proxy 代理对象，则直接返回
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

  // 只有在白名单中的值类型才可以被代理监测，否则直接返回
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target     
  }

  // 创建代理对象
  const proxy = new Proxy(
    target,
    // 若目标对象是集合类型（Set、Map）则使用集合类型对应的捕获器，否则使用基础捕获器
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers 
  )

  // 将对应的代理对象存储在 proxyMap 中
  proxyMap.set(target, proxy)

  return proxy
}

捕获器 Handlers

对象类型的捕获器 — mutableHandlers

这里的对象类型指的是 数组 和 普通对象

源码位置：packages\reactivity\src\baseHandlers.ts

export const mutableHandlers: ProxyHandler = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
} 
 
以上这些捕获器其实就是我们在上述 Proxy 部分列举出来的捕获器，显然可以拦截对普通对象的如下操作：
 
 
     
  
  • 读取，如 obj.name
    •  
  
  • 设置，如 obj.name = 'zs'
    •  
  
  • 删除属性，如 delete obj.name
    •  
  
  • 判断是否存在对应属性，如 name in obj
    •  
  
  • 获取对象自身的属性值，如 obj.getOwnPropertyNames() 和 obj.getOwnPropertySymbols()
    •  
 
 
 
get 捕获器
 
 
具体信息在下面的注释中，这里只列举核心内容：
 
 
     
  
  • 若当前数据对象是 数组，则 重写/增强 数组对应的方法
     
   
       
    
    • 数组元素的 查找方法：includes、indexOf、lastIndexOf
      •  
    
    • 修改原数组 的方法：push、pop、unshift、shift、splice
      •  
   
    •  
  
  • 若当前数据对象是 普通对象，且非 只读 的则通过 track(target, TrackOpTypes.GET, key) 进行 依赖收集
     
   
       
    
    • 若当前数据对象是 浅层响应 的，则直接返回其对应属性值
      •  
    
    • 若当前数据对象是 ref 类型的，则会进行 自动脱 ref
      •  
   
    •  
  
  • 若当前数据对象的属性值是 对象类型
     
   
       
    
    • 若当前属性值属于 只读的，则通过 readonly(res) 向外返回其结果
      •  
    
    • 否则会将当前属性值以 reactive(res) 向外返回 proxy 代理对象
      •  
   
     
   
       
    
    • 否则直接向外返回对应的 属性值
      •  
   
    function createGetter(isReadonly = false, shallow = false) {
return function get(target: Target, key: string | symbol, receiver: object) {
  // 当直接通过指定 key 访问 vue 内置自定义的对象属性时，返回其对应的值
  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 (
    key === ReactiveFlags.RAW &&
    receiver ===
      (isReadonly
        ? shallow
          ? shallowReadonlyMap
          : readonlyMap
        : shallow
        ? shallowReactiveMap
        : reactiveMap
      ).get(target)
  ) {
    return target
  }

  // 判断是否为数组类型
  const targetIsArray = isArray(target)

  // 数组对象
  if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
    // 重写/增强数组的方法： 
    //  - 查找方法：includes、indexOf、lastIndexOf
    //  - 修改原数组的方法：push、pop、unshift、shift、splice
    return Reflect.get(arrayInstrumentations, key, receiver)
  }

  // 获取对应属性值
  const res = Reflect.get(target, key, receiver)

  if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
    return res
  }

  // 依赖收集
  if (!isReadonly) {
    track(target, TrackOpTypes.GET, key)
  }

  // 浅层响应
  if (shallow) {
    return res
  }

  // 若是 ref 类型响应式数据，会进行【自动脱 ref】，但不支持【数组】+【索引】的访问方式
  if (isRef(res)) {
    const shouldUnwrap = !targetIsArray || !isIntegerKey(key)
    return shouldUnwrap ? res.value : res
  }

  // 属性值是对象类型：
  //  - 是只读属性，则通过 readonly() 返回结果，
  //  - 且是非只读属性，则递归调用 reactive 向外返回 proxy 代理对象
  if (isObject(res)) {
    return isReadonly ? readonly(res) : reactive(res)
  }

  return res
}
}
    set 捕获器
    除去额外的边界处理，其实核心还是 更新属性值，并通过 trigger(...) 触发依赖更新
    function createSetter(shallow = false) {
return function set(
  target: object,
  key: string | symbol,
  value: unknown,
  receiver: object
): boolean {
  // 保存旧的数据
  let oldValue = (target as any)[key]

  // 若原数据值属于 只读 且 ref 类型，并且新数据值不属于 ref 类型，则意味着修改失败
  if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
    return false
  }

  if (!shallow && !isReadonly(value)) {
    if (!isShallow(value)) {
      value = toRaw(value)
      oldValue = toRaw(oldValue)
    }
    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
  const hadKey =
    isArray(target) && isIntegerKey(key)
      ? Number(key) < target.length
      : hasOwn(target, key)

  // 设置对应值
  const result = Reflect.set(target, key, value, receiver)

  // 若目标对象是原始原型链上的内容（非自定义添加），则不触发依赖更新
  if (target === toRaw(receiver)) {
    if (!hadKey) {
      // 目标对象不存在对应的 key，则为新增操作
      trigger(target, TriggerOpTypes.ADD, key, value)
    } else if (hasChanged(value, oldValue)) {
      // 目标对象存在对应的值，则为修改操作
      trigger(target, TriggerOpTypes.SET, key, value, oldValue)
    }
  }

  // 返回修改结果
  return result
}
}
    •  
 
 
 
deleteProperty & has & ownKeys 捕获器
 
 
这三个捕获器内容非常简洁，其中 has 和 ownKeys 本质也属于 读取操作，因此需要通过 track() 进行依赖收集，而 deleteProperty 相当于修改操作，因此需要 trigger() 触发更新
 
 
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)
  // 目标对象上存在对应的 key ，并且能成功删除，才会触发依赖更新
  if (result && hadKey) {
    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
  }
  return result
}

function has(target: object, key: string | symbol): boolean {
  const result = Reflect.has(target, key)
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, TrackOpTypes.HAS, key)
  }
  return result
}

function ownKeys(target: object): (string | symbol)[] {
  track(target, TrackOpTypes.ITERATE, isArray(target) ? 'length' : ITERATE_KEY)
  return Reflect.ownKeys(target)
}
 
 
数组类型捕获器 —— arrayInstrumentations
 
 
数组类型 和 对象类型 的大部分操作是可以共用的，比如 obj.name 和 arr[index] 等，但数组类型的操作还是会比对象类型更丰富一些，而这些就需要特殊处理。
 
 
 源码位置：packages\reactivity\src\collectionHandlers.ts 
 
 
 
处理数组索引 index 和 length
 
 
数组的 index 和 length 是会相互影响的，比如存在数组 const arr = [1] ：
 
 
     
  
  • arr[1] = 2 的操作会隐式修改 length 的属性值
    •  
  
  • arr.length = 0 的操作会导致原索引位的值发生变更
    •  
 
 
 
为了能够合理触发和 length 相关副作用函数的执行，在 set() 捕获器中会判断当前操作的类型：
 
 
     
  
  • 当 Number(key) < target.length 证明是修改操作，对应 TriggerOpTypes.SET 类型，即当前操作不会改变 length 的值，不需要 触发和 length 相关副作用函数的执行
    •  
  
  • 当 Number(key) >= target.length 证明是新增操作，TriggerOpTypes.ADD 类型，即当前操作会改变 length 的值，需要 触发和 length 相关副作用函数的执行
    •  
 
 
 
function createSetter(shallow = false) {
  return function set(
    target: object,
    key: string | symbol,
    value: unknown,
    receiver: object
  ): boolean {
  
   省略其他代码
   
    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) {
        trigger(target, TriggerOpTypes.ADD, key, value)
      } else if (hasChanged(value, oldValue)) {
        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
      }
    }
    return result
  }
}
 
 
处理数组的查找方法
 
 
数组的查找方法包括 includes、indexOf、lastIndexOf，这些方法通常情况下是能够按预期进行工作，但还是需要对某些特殊情况进行处理：
 
 
     
  
  • 当查找的目标数据是响应式数据本身时，得到的就不是预期结果
    const obj = {}
const proxy = reactive([obj])
console.log(proxy.includs(proxy[0])) // false
     
   
       
    
    • 【产生原因】首先这里涉及到了两次读取操作，第一次 是 proxy[0] 此时会触发 get 捕获器并为 obj 生成对应代理对象并返回，第二次 是 proxy.includs() 的调用，它会遍历数组的每个元素，即会触发 get 捕获器，并又生成一个新的代理对象并返回，而这两次生成的代理对象不是同一个，因此返回 false
      •  
    
    • 【解决方案】源码中会在 get 中设置一个名为 proxyMap 的 WeakMap 集合用于存储每个响应式对象，在触发 get 时优先返回 proxyMap 存在的响应式对象，这样不管触发多少次 get 都能返回相同的响应式数据
      •  
   
    •  
  
  • 当在响应式对象中查找原始数据时，得到的就不是预期结果
    const obj = {}
const proxy = reactive([obj])
console.log(proxy.includs(obj)) // false
     
   
       
    
    • 【产生原因】proxy.includes() 会触发 get 捕获器并为 obj 生成对应代理对象并返回，而 includes 方法的参数传递的是 原始数据，相当于此时是 响应式对象 和 原始数据对象 进行比较，因此对应的结果一定是为 false
      •  
    
    • 【解决方案】核心就是将它们的数据类型统一，即统一都使用 原始值数据对比 或 响应式数据对比，由于 includes() 的方法本身并不支持对传入参数或内部响应式数据的处理，因此需要自定义以上对应的数组查找方法
       
     
         
      
      • 在 重写/增强 的 includes、indexOf、lastIndexOf 等方法中，会将当前方法内部访问到的响应式数据转换为原始数据，然后调用数组对应的原始方法进行查找，若查找结果为 true 则直接返回结果
        •  
      
      • 若以上操作没有查找到，则通过将当前方法传入的参数转换为原始数据，在调用数组的原始方法，此时直接将对应的结果向外进行返回
        •  
     
      •  
   
    •  
 
 
 
源码位置：packages\reactivity\src\baseHandlers.ts
 
 
;(['includes', 'indexOf', 'lastIndexOf'] as const).forEach(key => {
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      // 外部调用上述方法，默认其内的 this 指向的是代理数组对象，
      // 但实际上是需要通过原始数组中进行遍历查找
      const arr = toRaw(this) as any
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, TrackOpTypes.GET, i + '')
      }
      // we run the method using the original args first (which may be reactive)
      const res = arr[key](...args)
      if (res === -1 || res === false) {
        // if that didn't work, run it again using raw values.
        return arr[key](...args.map(toRaw))
      } else {
        return res
      }
    }
  })
 
 
处理数组影响 length 的方法
 
 
隐式修改数组长度的原型方法包括 push、pop、shift、unshift、splice 等，在调用这些方法的同时会间接的读取数组的 length 属性，又因为这些方法具有修改数组长度的能力，即相当于 length 的设置操作，若不进行特殊处理，会导致与 length 属性相关的副作用函数被重复执行，即 栈溢出，比如：
 
 
const proxy = reactive([])

// 第一个副作用函数
effect(() => {
  proxy.push(1) // 读取 + 设置 操作
})

// 第二个副作用函数
effect(() => {
  proxy.push(2) // 读取 + 设置 操作（此时进行 trigger 时，会触发包括第一个副作用函数的内容，然后循环导致栈溢出）
})
 
 
在源码中还是通过 重写/增强 上述对应数组方法的形式实现自定义的逻辑处理：
 
 
     
  
  • 在调用真正的数组原型方法前，会通过设置 pauseTracking() 方法来禁止 track 依赖收集
    •  
  
  • 在调用数组原生方法后，在通过 resetTracking() 方法恢复 track 进行依赖收集
    •  
  
  • 实际上以上的两个方法就是通过控制 shouldTrack 变量为 true 或 false，使得在 track 函数执行时是否要执行原来的依赖收集逻辑
    •  
 
 
 
源码位置：packages\reactivity\src\baseHandlers.ts
 
 
;(['push', 'pop', 'shift', 'unshift', 'splice'] as const).forEach(key => {
    instrumentations[key] = function (this: unknown[], ...args: unknown[]) {
      pauseTracking()
      const res = (toRaw(this) as any)[key].apply(this, args)
      resetTracking()
      return res
    }
  })
 
 
集合类型的捕获器 — mutableCollectionHandlers
 
 
集合类型 包括 Map、WeakMap、Set、WeakSet 等，而对 集合类型 的 代理模式 和 对象类型 需要有所不同，因为 集合类型 和 对象类型 的操作方法是不同的，比如：
 
 
 Map 类型 的原型 属性 和 方法 如下，详情可见： 
 
 
 
     
  
  • size
    •  
  
  • clear()
    •  
  
  • delete(key)
    •  
  
  • has(key)
    •  
  
  • get(key)
    •  
  
  • set(key)
    •  
  
  • keys()
    •  
  
  • values()
    •  
  
  • entries()
    •  
  
  • forEach(cb)
    •  
 
 
 
 Set 类型 的原型 属性 和 方法 如下，详情可见： 
 
 
 
     
  
  • size
    •  
  
  • add(value)
    •  
  
  • clear()
    •  
  
  • delete(value)
    •  
  
  • has(value)
    •  
  
  • keys()
    •  
  
  • values()
    •  
  
  • entries()
    •  
  
  • forEach(cb)
     
   
     源码位置：packages\reactivity\src\collectionHandlers.ts 
   
    •  
 
 
 
解决 代理对象 无法访问 集合类型 对应的 属性 和 方法
 
 
代理集合类型的第一个问题，就是代理对象没法获取到集合类型的属性和方法，比如：
 
 
听说你很了解 Vue3 响应式？_第11张图片
 
 
从报错信息可以看出 size 属性是一个访问器属性，所以它被作为方法调用了，而主要错误原因就是在这个访问器中的 this 指向的是 代理对象，在源码中就是通过为这些特定的 属性 和 方法 定义对应的 key 的 mutableInstrumentations 对象，并且在其对应的 属性 和 方法 中将 this指向为 原对象.
 
 
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 (key !== rawKey) {
    !isReadonly && track(rawTarget, TrackOpTypes.HAS, key)
  }
  !isReadonly && 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)
}

省略其他代码
 
 
处理集合类型的响应式
 
 
集合建立响应式核心还是 track 和 trigger，转而思考的问题就变成，什么时候需要 track、什么时候需要 trigger:
 
 
     
  
  • track 时机：get()、get size()、has()、forEach()
    •  
  
  • trigger 时机：add()、set()、delete()、clear()
    •  
 
 
 
这里涉及一些优化的内容，比如：
 
 
     
  
  • 在 add() 中通过 has() 判断当前添加的元素是否已经存在于 Set 集合中时，若已存在就不需要进行 trigger() 操作，因为 Set 集合本身的一个特性就是 去重
    •  
  
  • 在 delete() 中通过 has() 判断当前删除的元素或属性是否存在，若不存在就不需要进行 trigger() 操作，因为此时的删除操作是 无效的
    •  
 
 
 
function createInstrumentations() {
  const mutableInstrumentations: Record = {
    get(this: MapTypes, key: unknown) {// track
      return get(this, key)
    },
    get size() {// track
      return size(this as unknown as IterableCollections)
    },
    has,// track
    add,// trigger
    set,// trigger
    delete: deleteEntry,// trigger
    clear,// trigger
    forEach: createForEach(false, false) // track
  }
  省略其他代码
}
 
 
避免污染原始数据
 
 
通过重写集合类型的方法并手动指定其中的 this 指向为 原始对象 的方式，解决 代理对象 无法访问 集合类型 对应的 属性 和 方法 的问题，但这样的实现方式也带来了另一个问题：原始数据被污染 。
 
 
简单来说，我们只希望 代理对象（响应式对象） 才具备 依赖收集(track) 和 依赖更新(trigger) 的能力，而通过 原始数据 进行的操作不应该具有响应式的能力。
 
 
如果只是单纯的把所有操作直接作用到 原始对象 上就不能保证这个结果，比如：
 
 
听说你很了解 Vue3 响应式？_第12张图片
 
 
 // 原数数据 originalData1
  const originalData1 = new Map({});
  // 代理对象 proxyData1
  const proxyData1 = reactive(originalData1);

  // 另一个代理对象 proxyData2
  const proxyData2 = reactive(new Map({}));

  // 将 proxyData2 做为 proxyData1 一个键值
  // 【注意】此时的 set() 经过重写，其内部 this 已经指向 原始对象（originalData1），等价于 原始对象 originalData1 上存储了一个 响应式对象 proxyData2
  proxyData1.set("proxyData2", proxyData2);

  // 若不做额外处理，如下基于 原始数据的操作 就会触发 track 和 trigger
  originalData1.get("proxyData2").set("name", "zs");
 
 
在源码中的解决方案也是很简单，直接通过 value = toRaw(value) 获取当前设置值对应的 原始数据，这样旧可以避免 响应式数据对原始数据的污染。
 
 
处理 forEach 回调参数
 
 
首先 Map.prototype.forEach(callbackFn [, thisArg]) 其中 callbackFn 回调函数会接收三个参数：
 
 
     
  
  • 当前的 值 value
    •  
  
  • 当前的 键 key
    •  
  
  • 正在被遍历的 Map 对象（原始对象）
    •  
 
 
 
遍历操作 等价于 读取操作，在处理 普通对象 的 get() 捕获器中有一个处理，如果当前访问的属性值是 对象类型 那么就会向外返回其对应的 代理对象，目的是实现 惰性响应 和 深层响应，这个处理也同样适用于 集合类型。
 
 
因此，在源码中通过 callback.call(thisArg, wrap(value), wrap(key), observed) 的方式将 Map 类型的 键 和 值 进行响应式处理，以及进行 track 操作，因为 Map 类型关注的就是 键 和 值。
 
 
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]
    const rawTarget = toRaw(target)
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive
    !isReadonly && track(rawTarget, TrackOpTypes.ITERATE, ITERATE_KEY)
    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.
      return callback.call(thisArg, wrap(value), wrap(key), observed)
    })
  }
 
 
处理迭代器
 
 
集合类型的迭代器方法：
 
 
     
  
  • entries()
    •  
  
  • keys()
    •  
  
  • values()
    •  
 
 
 
Map 和 Set 都实现了 可迭代协议（即 Symbol.iterator 方法，而 迭代器协议 是指 一个对象实现了 next 方法），因此它们还可以通过 for...of 的方式进行遍历。
 
 
根据对 forEach 的处理，不难知道涉及遍历的方法，终究还是得将其对应的遍历的 键、值 进行响应式包裹的处理，以及进行 track 操作，而原本的的迭代器方法没办法实现，因此需要内部自定义迭代器协议。
 
 
const iteratorMethods = ['keys', 'values', 'entries', Symbol.iterator]
  iteratorMethods.forEach(method => {
    mutableInstrumentations[method as string] = createIterableMethod(
      method,
      false,
      false
    )
    省略其他代码
  })
 
 
这一部分的源码涉及的内容比较多，以上只是简单的总结一下，更详细的内容可查看对应的源码内容。
 
 
ref 函数 — 原始值的响应式
 
 
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，我们知道用 Object.defineProperty 肯定是不支持，因为它拦截的就是对象属性的操作，都说 Proxy 比 Object.defineProperty 强，那么它能不能直接支持呢？
 
 
直接支持是肯定不能的，别忘了 Proxy 代理的目标也还是对象类型呀，它的强是在自己的所属领域，跨领域也是遭不住的。
 
 
听说你很了解 Vue3 响应式？_第13张图片
 
 
因此在 Vue3 的 ref 函数中对原始值的处理方式是通过为 原始值类型 提供一个通过 new RefImpl(rawValue, shallow) 实例化得到的 包裹对象，说白了还是将原始值类型变成对象类型，但 ref 函数的参数并 不限制数据类型：
 
 
     
  
  • 原始值类型，ref 函数中会为原始值类型数据创建 RefImpl 实例对象（必须通过 .value 的方式访问数据），并且实现自定义的 get、set 用于分别进行 依赖收集 和 依赖更新，注意的是这里并不会通过 Proxy 为原始值类型创建代理对象，准确的说在 RefImpl 内部自定义实现的 get、set 就实现了对原始值类型的拦截操作，因为原始值类型不需要向对象类型设置那么多的捕获器
    •  
  
  • 对象类型，ref 函数中除了为 对象类型 数据创建 RefImpl 实例对象之外，还会通过 reactive 函数将其转换为响应式数据，其实主要还是为了支持类似如下的操作
    const refProxy = ref({name: 'zs'})
refProxy.value.name = 'ls'
    •  
  
  • 依赖容器 dep，在 ref 类型中依赖存储的位置就是每个 ref 实例对象上的 dep 属性，它本质就是一个 Set 实例，触发 get 时往 dep 中添加副作用函数（依赖），触发 set 时从 dep 中依次取出副作用函数执行
    •  
 
 
 
源码位置：packages\reactivity\src\ref.ts
 
 
export function ref(value?: unknown) {
  return createRef(value, false)
}

function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

class RefImpl {
  private _value: T
  private _rawValue: T

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

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value)
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    // 将依赖收集到 dep 中，实际上就是一个 Set 类型
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    // 获取原始数据
    newVal = this.__v_isShallow ? newVal : toRaw(newVal)

    // 通过 Object.is(value, oldValue) 判断新旧值是否一致，若不一致才需要进行更新
    if (hasChanged(newVal, this._rawValue)) {
      // 保存原始值
      this._rawValue = newVal
      // 更新为新的 value 值
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      // 依赖更新，从 dep 中取出对应的 effect 函数依次遍历执行
      triggerRefValue(this, newVal)
    }
  }
}

// 若当前 value 是 对象类型，才会通过 reactive 转换为响应式数据
export const toReactive = (value: T): T =>
  isObject(value) ? reactive(value) : value
 
 
Vue3 如何进行依赖收集？
 
 
在 Vue2 中依赖的收集方式是通过 Dep 和 Watcher 的 观察者模式 来实现的，是不是还能想起初次了解 Dep 和 Watcher 之间的这种 剪不断理还乱 的关系时的心情 ......
 
 

   关于 设计模式 部分感兴趣可查看 常见 JavaScript 设计模式 — 原来这么简单 一文，里面主要围绕着 Vue 中对应的设计模式来进行介绍，相信会有一定的帮助 
 
 
 
依赖收集 其实说的就是 track 函数需要处理的内容：
 
 
     
  
  • 声明 targetMap 作为一个容器，用于保存和当前响应式对象相关的依赖内容，本身是一个 WeakMap 类型
     
   
       
    
    • 选择 WeakMap 类型作为容器，是因为 WeakMap 对 键（对象类型）的引用是 弱类型 的，一旦外部没有对该 键（对象类型）保持引用时，WeakMap 就会自动将其删除，即 能够保证该对象能够正常被垃圾回收
      •  
    
    • 而 Map 类型对 键 的引用则是 强引用 ，即便外部没有对该对象保持引用，但至少还存在 Map 本身对该对象的引用关系，因此会导致该对象不能及时的被垃圾回收
      •  
   
    •  
  
  • 将对应的 响应式数据对象 作为 targetMap 的 键，存储和当前响应式数据对象相关的依赖关系 depsMap（属于 Map 实例），即 depsMap 存储的就是和当前响应式对象的每一个 key 对应的具体依赖
    •  
  
  • 将 deps（属于 Set 实例）作为 depsMap 每个 key 对应的依赖集合，因为每个响应式数据可能在多个副作用函数中被使用，并且 Set 类型用于自动去重的能力
    •  
 
 
 
可视化结构如下：
 
 
听说你很了解 Vue3 响应式？_第14张图片
 
 
源码位置：packages\reactivity\src\effect.ts
 
 
const targetMap = new WeakMap()

export function track(target: object, type: TrackOpTypes, key: unknown) {
  // 当前应该进行依赖收集 且 有对应的副作用函数时，才会进行依赖收集
  if (shouldTrack && activeEffect) {
    // 从容器中取出【对应响应式数据对象】的依赖关系
    let depsMap = targetMap.get(target)
    if (!depsMap) {
      // 若不存在，则进行初始化
      targetMap.set(target, (depsMap = new Map()))
    }

    // 获取和对【应响应式数据对象 key】相匹配的依赖
    let dep = depsMap.get(key)
    if (!dep) {
      // 若不存在，则进行初始化 dep 为 Set 实例
      depsMap.set(key, (dep = createDep()))
    }

    const eventInfo = __DEV__
      ? { effect: activeEffect, target, type, key }
      : undefined

    // 往 dep 集合中添加 effect 依赖
    trackEffects(dep, eventInfo)
  }
}

export const createDep = (effects?: ReactiveEffect[]): Dep => {
  const dep = new Set(effects) as Dep
  dep.w = 0
  dep.n = 0
  return dep
}
 
 
最后
 
 
以上就是针对 Vue3 中对不同数据类型的处理的内容，无论是 Vue2 还是 Vue3 响应式的核心都是 数据劫持/代理、依赖收集、依赖更新，只不过由于实现数据劫持方式的差异从而导致具体实现的差异，在 Vue3 中值得注意的是：
 
 
     
  
  • 普通对象类型 可以直接配合 Proxy 提供的捕获器实现响应式
    •  
  
  • 数组类型 也可以直接复用大部分和 普通对象类型 的捕获器，但其对应的查找方法和隐式修改 length 的方法仍然需要被 重写/增强
    •  
  
  • 为了支持 集合类型 的响应式，也对其对应的方法进行了 重写/增强
    •  
  
  • 原始值数据类型 主要通过 ref 函数来进行响应式处理，不过内容不会对 原始值类型 使用 reactive（或 Proxy） 函数来处理，而是在内部自定义 get value(){} 和 set value(){} 的方式实现响应式，毕竟原始值类型的操作无非就是 读取 或 设置，核心还是将 原始值类型 转变为了 普通对象类型
     
   
       
    
    • ref 函数可实现原始值类型转换为 响应式数据，但 ref 接收的值类型并没只限定为原始值类型，若接收到的是引用类型，还是会将其通过 reactive 函数的方式转换为响应式数据
      •  
   
    •  
 
 
 
肝了近 1W 字的内容，也是目前写得字数最多的文章，人有点麻了 ... 哈哈，希望对大家有所帮助！！！
 
 
听说你很了解 Vue3 响应式？_第15张图片
 

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    
                

            
        
    
    

        
你可能感兴趣的:(听说你很了解 Vue3 响应式？)

        

            

                
    
                    
  • 情绪觉察日记第37天
                        露露_e800

                        
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
    
                    
    • 
                    
  • 铭刻于星（四十二）
                        随风至

                        
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
    
                    
    • 
                    
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说
                        造命者说

                        
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
    
                    
    • 
                    
  • 2020-01-25
                        晴岚85

                        
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
    
                    
    • 
                    
  • 随笔 | 仙一般的灵气
                        海思沧海

                        
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
    
                    
    • 
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 10月|愿你的青春不负梦想-读书笔记-01
                        Tracy的小书斋

                        
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
    
                    
    • 
                    
  • 《投行人生》读书笔记
                        小蘑菇的树洞

                        
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
    
                    
    • 
                    
  • 《策划经理回忆录之二》
                        路基雅虎

                        
    话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
    
                    
    • 
                    
  • Long类型前后端数据不一致
                        igotyback
前端
                        
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    
                    
    • 
                    
  • swagger访问路径
                        igotyback
swagger
                        
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
    
                    
    • 
                    
  • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update
                        iBaoxing
github
                        
    如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
    
                    
    • 
                    
  • 2021-08-26
                        影幽

                        
    在生活中，女人与男人的感悟往往有所不同。人生最大的舞台就是生活，大幕随时都可能拉开，关键是你愿不愿意表演都无法躲避。在生活中，遇事不要急躁，不要急于下结论，尤其生气时不要做决断，要学会换位思考，大事化小小事化了，把复杂的事情尽量简单处理，千万不要把简单的事情复杂化。永远不要扭曲，别人善意，无药可救。昨天是张过期的支票，明天是张信用卡，只有今天才是现金，要善加利用！执着的攀登者不必去与别人比较自己的
    
                    
    • 
                    
  • 抖音乐买买怎么加入赚钱?赚钱方法是什么
                        测评君高省

                        
    你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
    
                    
    • 
                    
  • 开心
                        蒋泳频

                        
    从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
    
                    
    • 
                    
  • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿
                        小鹿_33

                        
    预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
    
                    
    • 
                    
  • 我的烦恼
                        余建梅

                        
    我的烦恼。女儿问我：“你给学生布置什么作文题目？”“《我的烦恼》。”“他们都这么大了，你觉得他们还有烦恼吗？”“有啊！每个人都会有自己烦恼。”“我不相信，大人是没有烦恼的，如果说一定有的话，你的烦恼和我写作业有关，而且是小烦恼。不像我，天天被你说，有这样的妈妈，烦恼是没完没了。”女儿愤愤不平。每个人都会有自己的烦恼，处在上有老下有小的年纪，烦恼多的数不完。想干好工作带好孩子，想孝顺父母又想经营好自
    
                    
    • 
                    
  • 放下是一段成长的修行
                        小莳玥

                        
    人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些
    
                    
    • 
                    
  • 活给自己看，笑容才灿烂
                        听着了么

                        
    白岩松说“有时候，我们活得很累，并非生活过于刻薄，而是我们太容易被外界的氛围所感染，被他人的情绪所左右。”心情是自己的。若只是活在别人的眼里、嘴里，便掌握不了让自己开心的主动权。人活着，不是为了活给别人看的，唯有做最真实的自己，活给自己看，笑容才灿烂。诚然，世事纷繁复杂，人人都有一张嘴，管也管不了。永远有人欣赏你，也永远有人批评你，不可能做到让所有人都满意，开心做自己才是最重要的。人生苦短，有太多
    
                    
    • 
                    
  • 2019-12-22-22:30
                        涓涓1016

                        
    今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
    
                    
    • 
                    
  • linux sdl windows.h,Windows下的SDL安装
                        奔跑吧linux内核
linuxsdlwindows.h
                        
    首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第
    
                    
    • 
                    
  • Python教程：一文了解使用Python处理XPath
                        旦莫
Python进阶python开发语言
                        
    目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
    
                    
    • 
                    
  • 相信相信的力量
                        孙丽_cdb3

                        
    孙丽中级十期坚持分享第345天有一个特别有哲理的故事：有一只老鹰下了蛋，这个蛋，不知怎的就滚到了鸡窝里去了，鸡也下了一窝蛋，然后鸡妈妈把这些蛋全都浮出来了，孵出来之后等小鸡长大一点了，就觉得鹰蛋孵出来的那只小鹰怪模怪样，这些小鸡都嘲笑它，真难看，真笨，丑死了，那只小鹰觉得自己真是谁也不像，真是不好看，后来鸡妈妈也不喜欢他，我怎么生出你这样的孩子来了？真烦人，后来这群小鸡和小鹰一起生活，有一天，老鹰
    
                    
    • 
                    
  • 从鸡肉高汤到记忆的魔法再到有效提示的艺术
                        步子哥
人工智能
                        
    还记得小时候那些天马行空的白日梦吗？也许只要按下键盘上的某个神奇组合，电脑就会发出滴滴的声响，一个隐藏的世界突然在你眼前展开，让你获得超凡的能力，摆脱平凡的生活。这听起来像是玩过太多电子游戏的幻想，但实际上，间隔重复系统给人的感觉惊人地相似。在最佳状态下，这些系统就像魔法一样神奇。本文将以一个看似平凡的鸡肉高汤食谱为例，深入浅出地探讨如何编写有效的间隔重复提示，让你像掌握烹饪技巧一样轻松地掌握记忆
    
                    
    • 
                    
  • 今日囧事
                        唯愿岁月可回首

                        
    今天晚上，房东打来电话说晚上过来取个东西。晚上到家后，洗了一下水果，把卧室的空调打开，在卧室的阳台叠衣服。不一会儿，听见了敲门声，老公和丫头出去开门，果然是房东来了。由于我在叠衣服，床上比较乱，老公随手就把卧室门带上了。我赶紧把衣服收在柜子里，一拧门，好吧，打不开。听见外面热热闹闹的，我喊老公帮我开门，开了几次都开不开。丫头说：妈妈，你先在里面休息一会，我们正在找钥匙。听见外面房东拿了自己东西，老
    
                    
    • 
                    
  • 谁家酒器最绝唱，藏在酒厂人未知？景阳冈酒厂先秦藏品大揭秘
                        李虓酒评论

                        
    文/王赛时中国的酒器酒具历史久远，举世闻名。从北京的故宫博物院、中国国家博物馆，到世界各国的大型博物馆，都以能够收藏中国古代酒具而夸耀。但很少有人知道，在山东阳谷景阳冈酒厂，默默地收藏了两千件中国酒器。这些酒器，就封藏在景阳冈的酒道馆里。其中有一些青铜酒器，一睡就是三、四千年，堪称无声国宝，堪作无字史书！今天，我将引领诸位首先窥视一下景阳冈酒道馆的9件先秦藏品，你自己来说震撼不震撼。提示：这只是景
    
                    
    • 
                    
  • 将cmd中命令输出保存为txt文本文件
                        落难Coder
Windowscmdwindow
                        
    最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
    
                    
    • 
                    
  • 我在意的
                        Yuexiaofeng

                        
    我所在意的，往往是你最容易忽略的，这让我感到为难。我所感动的，你却无动于衷，这使我感到惭愧。我所做的，你却视而不见，这让我不知如何是好。
    
                    
    • 
                    
  • 运城寻访重逢石头纪实【严建设老照片395 集】 我简直能把你想透， 当我走进运城的时候。 我已急得热汗直流， 访问了十九个老头， 把晋南的小城转了三周。 虽然是悠久的思旧， 我仍然是牛样的执...
                        严建设

                        
    运城寻访重逢石头纪实【严建设老照片395集】我简直能把你想透，当我走进运城的时候。我已急得热汗直流，访问了十九个老头，把晋南的小城转了三周。虽然是悠久的思旧，我仍然是牛样的执拗。说什么变换的世情，泛起了过去的逝流，你就是真正的故友。踏破铁鞋的淡愁，已化为不废功夫的范畴，是就像远在天涯近在咫尺，就像是梦乡的邂逅，我紧紧地攥着你的手。你已长成了高高的个头，俊逸的容颜却很清瘦，你那样顽皮的童音，已变到老
    
                    
    • 
                    
  • 万物难度不度己
                        边度512

                        
    你好，陌生人！你是否有过迷茫，在别人的面前自己却不曾展示！你是否自己承担着所有的痛苦，却又笑对人生！你是否在很多时候想找人诉说，翻开手机却发现，手机里面空无一人！你是否有很多事情想做，最后却因你自己拖延，最后发现自己什么都做不了！对没有错，我的名字就叫你是否！不要怀疑！不要悲伤！我们的生活可是还有很到要继续的呢！还有很多那个人，很多地方我们都没有去过！所以我们已经没有退路了！那就继续向前吧！加油！
    
                    
    • 
                                
  • 书其实只有三类
                                    西蜀石兰
类
                                    
    一个人一辈子其实只读三种书，知识类、技能类、修心类。 
 
知识类的书可以让我们活得更明白。类似十万个为什么这种书籍，我一直不太乐意去读，因为单纯的知识是没法做事的，就像知道地球转速是多少一样（我肯定不知道），这种所谓的知识，除非用到，普通人掌握了完全是一种负担，维基百科能找到的东西，为什么去记忆？ 
知识类的书，每个方面都涉及些，让自己显得不那么没文化，仅此而已。社会认为的学识渊博，肯定不是站在
    
                                
    • 
                                
  • 《TCP/IP 详解，卷1：协议》学习笔记、吐槽及其他
                                    bylijinnan
tcp
                                    
    《TCP/IP 详解，卷1：协议》是经典，但不适合初学者。它更像是一本字典，适合学过网络的人温习和查阅一些记不清的概念。 
 
这本书，我看的版本是机械工业出版社、范建华等译的。这本书在我看来，翻译得一般，甚至有明显的错误。如果英文熟练，看原版更好： 
http://pcvr.nl/tcpip/ 
 
下面是我的一些笔记，包括我看书时有疑问的地方，也有对该书的吐槽，有不对的地方请指正： 
 
1.
    
                                
    • 
                                
  • Linux—— 静态IP跟动态IP设置
                                    eksliang
linuxIP
                                    
    一.在终端输入 
vi /etc/sysconfig/network-scripts/ifcfg-eth0 
静态ip模板如下： 
DEVICE="eth0"      #网卡名称
BOOTPROTO="static" #静态IP（必须）
HWADDR="00:0C:29:B5:65:CA" #网卡mac地址
IPV6INIT=&q
    
                                
    • 
                                
  • Informatica update strategy transformation
                                    18289753290

                                    
    更新策略组件：   标记你的数据进入target里面做什么操作，一般会和lookup配合使用，有时候用0,1,1代表   forward  rejected rows被选中，rejected row是输出在错误文件里，不想看到reject输出，将错误输出到文件，因为有时候数据库原因导致某些column不能update，reject就会output到错误文件里面供查看，在workflow的
    
                                
    • 
                                
  • 使用Scrapy时出现虽然队列里有很多Request但是却不下载，造成假死状态
                                    酷的飞上天空
request
                                    
    现象就是： 
程序运行一段时间，可能是几十分钟或者几个小时，然后后台日志里面就不出现下载页面的信息，一直显示上一分钟抓取了0个网页的信息。 
刚开始已经猜到是某些下载线程没有正常执行回调方法引起程序一直以为线程还未下载完成，但是水平有限研究源码未果。 
经过不停的google终于发现一个有价值的信息，是给twisted提出的一个bugfix 
连接地址如下http://twistedmatrix.
    
                                
    • 
                                
  • 利用预测分析技术来进行辅助医疗
                                    蓝儿唯美
医疗
                                    
    2014年，克利夫兰诊所（Cleveland Clinic）想要更有效地控制其手术中心做膝关节置换手术的费用。整个系统每年大约进行2600例此类手术，所以，即使降低很少一部分成本，都可以为诊 所和病人节约大量的资金。为了找到适合的解决方案，供应商将视野投向了预测分析技术和工具，但其分析团队还必须花时间向医生解释基于数据的治疗方案意味着 什么。  
克利夫兰诊所负责企业信息管理和分析的医疗
    
                                
    • 
                                
  • java 线程(一)：基础篇
                                    DavidIsOK
java多线程线程
                                    
                                                            &nbs
    
                                
    • 
                                
  • Tomcat服务器框架之Servlet开发分析
                                    aijuans
servlet
                                    
    最近使用Tomcat做web服务器，使用Servlet技术做开发时，对Tomcat的框架的简易分析： 
 
疑问： 为什么我们在继承HttpServlet类之后，覆盖doGet(HttpServletRequest req, HttpServetResponse rep)方法后，该方法会自动被Tomcat服务器调用，doGet方法的参数有谁传递过来？怎样传递？ 
 
分析之我见： doGet方法的
    
                                
    • 
                                
  • 揭秘玖富的粉丝营销之谜 与小米粉丝社区类似
                                    aoyouzi
揭秘玖富的粉丝营销之谜
                                    
    玖富旗下悟空理财凭借着一个微信公众号上线当天成交量即破百万，第七天成交量单日破了1000万;第23天时，累计成交量超1个亿……至今成立不到10个月，粉丝已经超过500万，月交易额突破10亿，而玖富平台目前的总用户数也已经超过了1800万，位居P2P平台第一位。很多互联网金融创业者慕名前来学习效仿，但是却鲜有成功者，玖富的粉丝营销对外至今仍然是个谜。 
  
　　近日，一直坚持微信粉丝营销
    
                                
    • 
                                
  • Java web的会话跟踪技术
                                    百合不是茶
url会话Cookie会话Seession会话Java Web隐藏域会话
                                    
    会话跟踪主要是用在用户页面点击不同的页面时,需要用到的技术点 
  
会话:多次请求与响应的过程 
  
  
1,url地址传递参数,实现页面跟踪技术 
         格式:传一个参数的 
url?名=值  
    传两个参数的 
url?名=值 &名=值 
  
关键代码
    
                                
    • 
                                
  • web.xml之Servlet配置
                                    bijian1013
javaweb.xmlServlet配置
                                    
    定义： 
<servlet>
  <servlet-name>myservlet</servlet-name>
  <servlet-class>com.myapp.controller.MyFirstServlet</servlet-class>
  <init-param>
   <param-name>
    
                                
    • 
                                
  • 利用svnsync实现SVN同步备份
                                    sunjing
SVN同步E000022svnsync镜像
                                    
    1. 在备份SVN服务器上建立版本库 
   svnadmin create test 
2. 创建pre-revprop-change文件 
    cd test/hooks/ 
    cp pre-revprop-change.tmpl pre-revprop-change 
3. 修改pre-revprop-
    
                                
    • 
                                
  • 【分布式数据一致性三】MongoDB读写一致性
                                    bit1129
mongodb
                                    
    本系列文章结合MongoDB，探讨分布式数据库的数据一致性，这个系列文章包括： 
 
 数据一致性概述与CAP 
 最终一致性(Eventually Consistency) 
 网络分裂(Network Partition)问题 
 多数据中心(Multi Data Center) 
 多个写者(Multi Writer)最终一致性 
 一致性图表(Consistency Chart) 
 数据
    
                                
    • 
                                
  • Anychart图表组件-Flash图转IMG普通图的方法
                                    白糖_
Flash
                                    
    问题背景：项目使用的是Anychart图表组件，渲染出来的图是Flash的，往往一个页面有时候会有多个flash图，而需求是让我们做一个打印预览和打印功能，让多个Flash图在一个页面上打印出来。 
  
那么我们打印预览的思路是获取页面的body元素，然后在打印预览界面通过$("body").append(html)的形式显示预览效果，结果让人大跌眼镜：Flash是
    
                                
    • 
                                
  • Window 80端口被占用 WHY?
                                    bozch
端口占用window
                                    
    平时在启动一些可能使用80端口软件的时候，会提示80端口已经被其他软件占用，那一般又会有那些软件占用这些端口呢？ 
   下面坐下总结： 
        1、web服务器是最经常见的占用80端口的，例如：tomcat , apache  , IIS , Php等等； 
        2
    
                                
    • 
                                
  • 编程之美-数组的最大值和最小值-分治法（两种形式）
                                    bylijinnan
编程之美
                                    
    

import java.util.Arrays;

public class MinMaxInArray {

	/**
	 * 编程之美 数组的最大值和最小值 分治法
	 * 两种形式
	 */
	public static void main(String[] args) {
		int[] t={11,23,34,4,6,7,8,1,2,23};
		int[] 
    
                                
    • 
                                
  • Perl正则表达式
                                    chenbowen00
正则表达式perl
                                    
    首先我们应该知道 Perl 程序中，正则表达式有三种存在形式，他们分别是： 
 
 
 
匹配：m/<regexp>;/ （还可以简写为 /<regexp>;/ ，略去 m） 
 
 
 
替换：s/<pattern>;/<replacement>;/ 
 
 
 
转化：tr/<pattern>;/<replacemnt>;
    
                                
    • 
                                
  • [宇宙与天文]行星议会是否具有本行星大气层以外的权力呢?
                                    comsci

                                    
     
 
      举个例子: 地球,地球上由200多个国家选举出一个代表地球联合体的议会,那么现在地球联合体遇到一个问题,地球这颗星球上面的矿产资源快要采掘完了....那么地球议会全体投票,一致通过一项带有法律性质的议案,既批准地球上的国家用各种技术手段在地球以外开采矿产资源和其它资源........ 
 
   &
    
                                
    • 
                                
  • Oracle Profile 使用详解
                                    daizj
oracleprofile资源限制
                                    
    Oracle Profile 使用详解 转 
一、目的： 
Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制，使用Create Profile命令创建一个Profile，用它来实现对数据库资源的限制使用，如果把该profile分配给用户，则该用户所能使用的数据库资源都在该profile的限制之内。 
 
二、条件： 
创建profile必须要有CREATE PROFIL
    
                                
    • 
                                
  • How HipChat Stores And Indexes Billions Of Messages Using ElasticSearch & Redis
                                    dengkane
elasticsearchLucene
                                    
    This article is from an interview with Zuhaib Siddique, a production engineer at HipChat, makers of group chat and IM for teams. 
HipChat started in an unusual space, one you might not 
    
                                
    • 
                                
  • 循环小示例，菲波拉契序列，循环解一元二次方程以及switch示例程序
                                    dcj3sjt126com
c算法
                                    
    # include <stdio.h>

int main(void)
{
	int n;
	int i;
	int f1, f2, f3;

	f1 = 1;
	f2 = 1;

	printf("请输入您需要求的想的序列：");
	scanf("%d", &n);

	for (i=3; i<n; i
    
                                
    • 
                                
  • macbook的lamp环境
                                    dcj3sjt126com
lamp
                                    
      
sudo vim /etc/apache2/httpd.conf 
  
/Library/WebServer/Documents 
是默认的网站根目录 
  
重启Mac上的Apache服务 
    
这个命令很早以前就查过了，但是每次使用的时候还是要在网上查： 
停止服务：sudo /usr/sbin/apachectl stop 
开启服务：s
    
                                
    • 
                                
  • java ArrayList源码 下
                                    shuizhaosi888
ArrayList源码
                                    
    版本 jdk-7u71-windows-x64 
  
JavaSE7 ArrayList源码上：http://flyouwith.iteye.com/blog/2166890    
  
	/**
	 * 从这个列表中移除所有c中包含元素
	 */
	public boolean removeAll(Collection<?> c) {
    
                                
    • 
                                
  • Spring Security（08）——intercept-url配置
                                    234390216
Spring Securityintercept-url访问权限访问协议请求方法
                                    
    intercept-url配置 
目录 
1.1     指定拦截的url 
1.2     指定访问权限 
1.3     指定访问协议 
1.4     指定请求方法 
   

1.1   &n
    
                                
    • 
                                
  • Linux环境下的oracle安装
                                    jayung
oracle
                                    
    linux系统下的oracle安装 
本文档是Linux(redhat6.x、centos6.x、redhat7.x) 64位操作系统安装Oracle 11g(Oracle Database 11g Enterprise Edition Release 11.2.0.4.0 - 64bit Production)，本文基于各种网络资料精心整理而成，共享给有需要的朋友。如有问题可联系：QQ：52-7
    
                                
    • 
                                
  • hotspot虚拟机
                                    leichenlei
javaHotSpotjvm虚拟机文档
                                    
    JVM参数  
http://docs.oracle.com/javase/6/docs/technotes/guides/vm/index.html 
  
JVM工具 
http://docs.oracle.com/javase/6/docs/technotes/tools/index.html 
  
JVM垃圾回收 
http://www.oracle.com
    
                                
    • 
                                
  • 读《Node.js项目实践：构建可扩展的Web应用》 ——引编程慢慢变成系统化的“砌砖活”
                                    noaighost
Webnode.js
                                    
    读《Node.js项目实践：构建可扩展的Web应用》 
——引编程慢慢变成系统化的“砌砖活” 
眼里的Node.JS 
初初接触node是一年前的事，那时候年少不更事。还在纠结什么语言可以编写出牛逼的程序，想必每个码农都会经历这个月经性的问题：微信用什么语言写的？facebook为什么推荐系统这么智能，用什么语言写的？dota2的外挂这么牛逼，用什么语言写的？……用什么语言写这句话，困扰人也是阻碍
    
                                
    • 
                                
  • 快速开发Android应用
                                    rensanning
android
                                    
    Android应用开发过程中，经常会遇到很多常见的类似问题，解决这些问题需要花时间，其实很多问题已经有了成熟的解决方案，比如很多第三方的开源lib，参考 
Android Libraries 和 
Android UI/UX Libraries。 
 
编码越少，Bug越少，效率自然会高。 
 
但可能由于 根本没听说过、听说过但没用过、特殊原因不能用、自己已经有了解决方案等等原因，这些成熟的解决
    
                                
    • 
                                
  • 理解Java中的弱引用
                                    tomcat_oracle
java工作面试
                                    
    　不久之前，我 
面试了一些求职Java高级开发工程师的应聘者。我常常会面试他们说，“你能给我介绍一些Java中得弱引用吗？”，如果面试者这样说，“嗯，是不是垃圾回收有关的？”，我就会基本满意了，我并不期待回答是一篇诘究本末的论文描述。   　　然而事与愿违，我很吃惊的发现，在将近20多个有着平均5年开发经验和高学历背景的应聘者中，居然只有两个人知道弱引用的存在，但是在这两个人之中只有一个人真正了
    
                                
    • 
                                
  • 标签输出html标签" target="_blank">关于标签输出html标签
                                    xshdch
jsp
                                    
    http://back-888888.iteye.com/blog/1181202 
 
 
关于<c:out value=""/>标签的使用，其中有一个属性是escapeXml默认是true(将html标签当做转移字符，直接显示不在浏览器上面进行解析)，当设置escapeXml属性值为false的时候就是不过滤xml，这样就能在浏览器上解析html标签， 
&nb
    
                                
    •