reactive

定义: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

  1. const obj = reactive({ count: 0 })

响应式转换是“深层的”：会影响对象内部所有嵌套的属性。基于 ES2015 的 Proxy 实现，返回的代理对象不等于原始对象。建议仅使用代理对象而避免依赖原始对象。

更多API https://vue3js.cn/vue-composition-api/#reactive

正文

Vue3中响应数据核心是 reactive ， reactive 中的实现是由 proxy 加 effect 组合，先来看一下 reactive 方法的定义

  1. export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
  2. export function reactive(target: object) {
  3.   // if trying to observe a readonly proxy, return the readonly version.
  4.   // 如果目标对象是一个只读的响应数据,则直接返回目标对象
  5.   if (target && (target as Target).__v_isReadonly) {
  6.     return target
  7.   }
  9.   // 否则调用  createReactiveObject 创建 observe
  10.   return createReactiveObject(
  11.     target, 
  12.     false,
  13.     mutableHandlers,
  14.     mutableCollectionHandlers
  15.   )
  16. }

createReactiveObject 创建 observe 

  1. // Target 目标对象
  2. // isReadonly 是否只读 
  3. // baseHandlers 基本类型的 handlers
  4. // collectionHandlers 主要针对(set、map、weakSet、weakMap)的 handlers
  5. function createReactiveObject(
  6.   target: Target,
  7.   isReadonly: boolean,
  8.   baseHandlers: ProxyHandler<any>,
  9.   collectionHandlers: ProxyHandler<any>
  10. ) {
  11.   // 如果不是对象
  12.   if (!isObject(target)) {
  13.     // 在开发模式抛出警告，生产环境直接返回目标对象
  14.     if (__DEV__) {
  15.       console.warn(`value cannot be made reactive: ${String(target)}`)
  16.     }
  17.     return target
  18.   }
  19.   // target is already a Proxy, return it.
  20.   // exception: calling readonly() on a reactive object
  21.   // 如果目标对象已经是个 proxy 直接返回
  22.   if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
  23.     return target
  24.   }
  25.   // target already has corresponding Proxy
  26.   if (
  27.     hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  28.   ) {
  29.     return isReadonly ? target.__v_readonly : target.__v_reactive
  30.   }
  31.   // only a whitelist of value types can be observed.
  33.   // 检查目标对象是否能被观察, 不能直接返回
  34.   if (!canObserve(target)) {
  35.     return target
  36.   }
  38.   // 使用 Proxy 创建 observe 
  39.   const observed = new Proxy(
  40.     target,
  41.     collectionTypes.has(target.constructor) ? collectionHandlers : baseHandlers
  42.   )
  44.   // 打上相应标记
  45.   def(
  46.     target,
  47.     isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive,
  48.     observed
  49.   )
  50.   return observed
  51. }
  53. // 同时满足3个条即为可以观察的目标对象
  54. // 1. 没有打上__v_skip标记
  55. // 2. 是可以观察的值类型
  56. // 3. 没有被frozen
  57. const canObserve = (value: Target): boolean => {
  58.   return (
  59.     !value.__v_skip &&
  60.     isObservableType(toRawType(value)) &&
  61.     !Object.isFrozen(value)
  62.   )
  63. }
  65. // 可以被观察的值类型
  66. const isObservableType = /*#__PURE__*/ makeMap(
  67.   'Object,Array,Map,Set,WeakMap,WeakSet'
  68. )

结语

看到这里我们大概清楚 reactive 是做为整个响应式的入口，负责处理目标对象是否可观察以及是否已被观察的逻辑，最后使用 Proxy 进行目标对象的代理，对 es6 Proxy 概念清楚的同学应该 Proxy 重点的逻辑处理在 Handlers , 接下来我们就一起去看看各种 Handlers

如果你对 Proxy 还不理解，可以点这里学习