开始上手

reactivity 主要是关于 vue 中响应式的源码，源码在 reactivity 目录中。查看源码的导出情况响应式这块主要包含 ref、reactive、computed、effect 和 operations 5 个部分。

# Reactivity Api

export {
  ref, // Takes an inner value and returns a reactive and mutable ref object.The ref object has a single property .value that points to the inner value.
  shallowRef, // Creates a ref that tracks its own .value mutation but doesn't make its value reactive.
  isRef, // Checks if a value is a ref object.
  toRef, // Can be used to create a ref for a property on a source reactive object.
  toRefs, // Converts a reactive object to a plain object where each property of the resulting object is a ref pointing to the corresponding property of the original object.
  unref, // Returns the inner value if the argument is a ref, otherwise return the argument itself.
  proxyRefs,
  customRef, // Creates a customized ref with explicit control over its dependency tracking and updates triggering. It expects a factory function, which receives track and trigger functions as arguments and should return an object with get and set.
  triggerRef, // Execute any effects tied to a shallowRef manually.
  Ref,
  ToRefs,
  UnwrapRef,
  ShallowUnwrapRef,
  RefUnwrapBailTypes
} from './ref'
export {
  reactive, // Returns a reactive copy of the object.
  readonly, // Takes an object (reactive or plain) or a ref and returns a readonly proxy to the original.
  isReactive, // Checks if an object is a reactive proxy created by reactive.
  isReadonly, // Checks if an object is a readonly proxy created by readonly.
  isProxy, // Checks if an object is a proxy created by reactive or readonly.
  shallowReactive, // Creates a reactive proxy that tracks reactivity of its own properties but does not perform deep reactive conversion of nested objects (exposes raw values).
  shallowReadonly, // Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values).
  markRaw, // Marks an object so that it will never be converted to a proxy.
  toRaw, // Returns the raw, original object of a reactive or readonly proxy.
  ReactiveFlags,
  DeepReadonly,
  UnwrapNestedRefs
} from './reactive'
export {
  computed, // Takes a getter function and returns an immutable reactive ref object for the returned value from the getter.
  ComputedRef,
  WritableComputedRef,
  WritableComputedOptions,
  ComputedGetter,
  ComputedSetter
} from './computed'
export {
  effect,
  stop,
  trigger,
  track,
  enableTracking,
  pauseTracking,
  resetTracking,
  ITERATE_KEY,
  ReactiveEffect,
  ReactiveEffectOptions,
  DebuggerEvent
} from './effect'
export { TrackOpTypes, TriggerOpTypes } from './operations'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

以上注释部分均属于 Reactivity Api，effect 部分属于副作用，这部分将在 runtime-core 中引用。

# 文件及作用

reactivity 模块中包括如下文件：

packages/reactivity/src
├── baseHandlers.ts // COMMON type: array/object proxy handlers.
├── collectionHandlers.ts // COLLECTION type: map/set/weakSet/weakMap proxy handlers.
├── computed.ts // 计算响应式
├── effect.ts // 依赖（副作用）收集和管理
├── index.ts // 导出 API
├── operations.ts // operations 相关
├── reactive.ts // reactive 相关 API
└── ref.ts // ref 相关 API

1
2
3
4
5
6
7
8
9

# 参考文档

编辑

上次更新: 2022/04/15, 00:23:56

← 开始上手 Ref→