@@ -44,27 +44,15 @@ type RefBase<T> = {
44
44
value : T
45
45
}
46
46
47
- /**
48
- * trackRefValue 用于跟踪依赖
49
- * @param ref
50
- */
51
47
export function trackRefValue ( ref : RefBase < any > ) {
52
- // 只有在需要跟踪且当前有活跃的effect时,才会进行依赖收集
53
48
if ( shouldTrack && activeEffect ) {
54
- // 获取ref的原始值,去除响应式对象的包装
55
49
ref = toRaw ( ref )
56
- // trackEffect 用于建立当前活跃的effect与ref之间的依赖关系
57
50
trackEffect (
58
- // 当前活跃的effect
59
51
activeEffect ,
60
- // 获取或创建 ref 的依赖管理器 dep
61
- ref . dep ||
62
- ( ref . dep = createDep (
63
- ( ) => ( ref . dep = undefined ) ,
64
- ref instanceof ComputedRefImpl ? ref : undefined ,
65
- ) ) ,
66
-
67
- // 开发模式,提供额外调试信息
52
+ ( ref . dep ??= createDep (
53
+ ( ) => ( ref . dep = undefined ) ,
54
+ ref instanceof ComputedRefImpl ? ref : undefined ,
55
+ ) ) ,
68
56
__DEV__
69
57
? {
70
58
target : ref ,
@@ -76,23 +64,14 @@ export function trackRefValue(ref: RefBase<any>) {
76
64
}
77
65
}
78
66
79
- /**
80
- * triggerRefValue 用于触发更新
81
- * @param ref
82
- * @param dirtyLevel
83
- * @param newVal
84
- */
85
67
export function triggerRefValue (
86
68
ref : RefBase < any > ,
87
69
dirtyLevel : DirtyLevels = DirtyLevels . Dirty ,
88
70
newVal ?: any ,
89
71
) {
90
- // 获取ref的原始值,去除响应式对象的包装
91
72
ref = toRaw ( ref )
92
- // 获取 ref 的依赖管理器
93
73
const dep = ref . dep
94
74
if ( dep ) {
95
- // triggerEffects 用于出发所有依赖此 ref 的 effect 更新
96
75
triggerEffects (
97
76
dep ,
98
77
dirtyLevel ,
@@ -169,58 +148,36 @@ function createRef(rawValue: unknown, shallow: boolean) {
169
148
if ( isRef ( rawValue ) ) {
170
149
return rawValue
171
150
}
172
- debugger
173
151
return new RefImpl ( rawValue , shallow )
174
152
}
175
153
176
154
class RefImpl < T > {
177
- // 存储ref的值
178
155
private _value : T
179
- // 存储ref的原始值
180
156
private _rawValue : T
181
157
182
- // 这是一个依赖对象,用于收集依赖,当依赖发生变化时,触发更新
183
158
public dep ?: Dep = undefined
184
- // 用于标识是否是一个ref对象
185
159
public readonly __v_isRef = true
186
160
187
161
constructor (
188
162
value : T ,
189
163
public readonly __v_isShallow : boolean ,
190
164
) {
191
- // 使用__v_isShallow标识是否是一个浅层的ref
192
- // 如果是浅层的ref,那么value就是原始值,否则就是一个响应式对象
193
165
this . _rawValue = __v_isShallow ? value : toRaw ( value )
194
166
this . _value = __v_isShallow ? value : toReactive ( value )
195
167
}
196
168
197
- // 获取ref的值
198
- // 如果ref的值是一个响应式对象,那么会对这个响应式对象进行依赖追踪
199
169
get value ( ) {
200
- debugger
201
170
trackRefValue ( this )
202
171
return this . _value
203
172
}
204
173
205
- // 设置ref的值
206
- // 在设置值时,会根据条件决定是否需要转换值
207
174
set value ( newVal ) {
208
- debugger
209
- // 确定是否可以直接使用newVal
210
- // 取决于 __v_isShallow、newVal是否是一个浅层或只读的响应式对象
211
175
const useDirectValue =
212
176
this . __v_isShallow || isShallow ( newVal ) || isReadonly ( newVal )
213
-
214
- // 根据 useDirectValue 判断是否需要将 newVal 转换为原始值
215
177
newVal = useDirectValue ? newVal : toRaw ( newVal )
216
-
217
- // 判断新值是否发生了变化
218
178
if ( hasChanged ( newVal , this . _rawValue ) ) {
219
- // 如果发生了变化,那么就更新值
220
179
this . _rawValue = newVal
221
180
this . _value = useDirectValue ? newVal : toReactive ( newVal )
222
-
223
- // 触发更新
224
181
triggerRefValue ( this , DirtyLevels . Dirty , newVal )
225
182
}
226
183
}
0 commit comments