看完reactivity所有源码,添加部分注释

Author: xingzhichen

packages/reactivity/src/baseHandlers.ts

@@ -5,6 +5,7 @@ import { LOCKED } from './lock'
 import { isObject, hasOwn } from '@vue/shared'
 import { isRef } from './ref'
 
+//Symbol上的可枚举和不可枚举的属性
 const builtInSymbols = new Set(
   Object.getOwnPropertyNames(Symbol)
     .map(key => (Symbol as any)[key])
@@ -13,14 +14,18 @@ const builtInSymbols = new Set(
 
 function createGetter(isReadonly: boolean) {
   return function get(target: any, key: string | symbol, receiver: any) {
-    const res = Reflect.get(target, key, receiver)
+    const res = Reflect.get(target, key, receiver) //拿到需要的值
+    //如果是symbol类型，且是Symbol上的属性值，直接返回，不收集依赖
     if (typeof key === 'symbol' && builtInSymbols.has(key)) {
       return res
     }
+    //如果已经使用ref包装过，直接返回res.value（调用value已经将当前依赖收集到ref包装后的对象里）
     if (isRef(res)) {
       return res.value
     }
+    //依赖收集
     track(target, OperationTypes.GET, key)
+    //返回的值是对象的话，对值也进行监听。
     return isObject(res)
       ? isReadonly
         ? // need to lazy access readonly and reactive here to avoid
@@ -37,17 +42,24 @@ function set(
   value: any,
   receiver: any
 ): boolean {
+  //格式化值，主要是判断这个值是不是已经相应式的。
   value = toRaw(value)
-  const hadKey = hasOwn(target, key)
-  const oldValue = target[key]
+  const hadKey = hasOwn(target, key) //赋值的key是否存在
+  const oldValue = target[key] //旧的值
+  //这里的逻辑:
+  //记得之前get里面，我们判断，值是ref包装的就直接返回，不进行收集依赖。所以obj.a=ref(1)。我们读取key值a
+  //的时候，依赖是没有被收集的，依赖只被收集到ref(1)中。当我们重新赋值obj.a=1的时候，因为key值为a的依赖没有收集
+  //所以无法更新，下面这个逻辑就是判断这种情况。然后强制给ref(1)重新赋值，触发set，依赖更新。说实话，我觉着这样处理很不好
+  //因为我们强制更新ref(1)，其他地方使用这个ref。那么也会被强制更新。
   if (isRef(oldValue) && !isRef(value)) {
     oldValue.value = value
     return true
   }
+  //赋值
   const result = Reflect.set(target, key, value, receiver)
-  // don't trigger if target is something up in the prototype chain of original
+  //正常来说receiver恒等于target，除非手动改receiver，但是我没发现源码什么地方可以改receiver
   if (target === toRaw(receiver)) {
-    /* istanbul ignore else */
+    //开发环境记录的信息，追踪用
     if (__DEV__) {
       const extraInfo = { oldValue, newValue: value }
       if (!hadKey) {
@@ -56,6 +68,7 @@ function set(
         trigger(target, OperationTypes.SET, key, extraInfo)
       }
     } else {
+      //之前存在属性的话类型就是set，不存在的话类型就是add，下面我们看这两个上面区别
       if (!hadKey) {
         trigger(target, OperationTypes.ADD, key)
       } else if (value !== oldValue) {

packages/reactivity/src/effect.ts

@@ -118,25 +118,38 @@ export function track(
   type: OperationTypes,
   key?: string | symbol
 ) {
+  //全局的一个锁控制是否依赖收集
   if (!shouldTrack) {
     return
   }
+  //当前活动的effect，类似于老版本的watcher, render就是一个watcher,这里render，computed等都是effect
   const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1]
   if (effect) {
+    //这个只有当调用的是set和map等特殊数据结构的'keys', 'values', 'entries‘等方法时候，type才会为iterate。
+    //其实我们所有依赖的储存都是map的形式。key是你get的key，value就是依赖数组，比如你读obj.a 那么key就是a，value就是
+    //所有读obj.a的依赖，按理我们调用keys，values，entries等的时候 key应该是不同的值，但是事实上这些key对应的依赖都应该
+    //是同步更新，也就是说调用keys的依赖更新，调用values的依赖也必须更新。所以这里将他们都拿一个值存储
+    //这里的type一般是add，del等等，当调用'keys', 'values', 'entries‘的时候是iterate
     if (type === OperationTypes.ITERATE) {
       key = ITERATE_KEY
     }
+    //targetMap存储的key是对象，value也是一个map，下面会解释这个map上面东西
     let depsMap = targetMap.get(target)
+    //没有的话，新建一个map
     if (depsMap === void 0) {
       targetMap.set(target, (depsMap = new Map()))
     }
+    //depsmap的key是调用的key值，value是一个set。储存所有的依赖，
     let dep = depsMap.get(key as string | symbol)
+    //没有的话，新建一个set,所以就算访问不存在的属性，也会将依赖收集。
     if (!dep) {
       depsMap.set(key as string | symbol, (dep = new Set()))
     }
+    //收集依赖。
     if (!dep.has(effect)) {
-      dep.add(effect)
-      effect.deps.push(dep)
+      dep.add(effect) //这里是依赖收集
+      effect.deps.push(dep) //因为依赖也有个deps数组，将当前属性值所有的依赖存入正在收集的依赖中。computed的时候要用，到时会就懂为什么这里收集
+      //开发环境追踪，
       if (__DEV__ && effect.onTrack) {
         effect.onTrack({
           effect,
@@ -155,34 +168,40 @@ export function trigger(
   key?: string | symbol,
   extraInfo?: any
 ) {
+  //拿到target的所有的依赖map(key是对象的各个属性，value是依赖)
   const depsMap = targetMap.get(target)
   if (depsMap === void 0) {
     // never been tracked
     return
   }
+  //储存一般的effect
   const effects: Set<ReactiveEffect> = new Set()
+  //储存computed生成的effect
   const computedRunners: Set<ReactiveEffect> = new Set()
+  //当type为clear时候，所有属性的依赖都要更新，因为所有属性都被清空
   if (type === OperationTypes.CLEAR) {
-    // collection being cleared, trigger all effects for target
     depsMap.forEach(dep => {
+      //添加依赖
       addRunners(effects, computedRunners, dep)
     })
   } else {
-    // schedule runs for SET | ADD | DELETE
+    //添加依赖
     if (key !== void 0) {
       addRunners(effects, computedRunners, depsMap.get(key as string | symbol))
     }
-    // also run for iteration key on ADD | DELETE
+    //当数组的时候触发更新， add和delete都会引起length的变化，所以判断是数组且更新类型是add和delete的时候，额外更新调用了属性lengrh的依赖。
+    //当不为数组且是add或者delete的时候，更新key为iterate的依赖，这时候有可能是set和map等特殊类型，因为更新类型是add和delete的时候。
+    //他们的size，keys等等属性的依赖都需要跟着变化
     if (type === OperationTypes.ADD || type === OperationTypes.DELETE) {
       const iterationKey = Array.isArray(target) ? 'length' : ITERATE_KEY
       addRunners(effects, computedRunners, depsMap.get(iterationKey))
     }
   }
+  //运行依赖
   const run = (effect: ReactiveEffect) => {
     scheduleRun(effect, target, type, key, extraInfo)
   }
-  // Important: computed effects must be run first so that computed getters
-  // can be invalidated before any normal effects that depend on them are run.
+  //注意这里先运行computed生成的依赖，然后在运行普通的依赖，因为普通的依赖有可能需要读取computed的新值
   computedRunners.forEach(run)
   effects.forEach(run)
 }
@@ -203,6 +222,7 @@ function addRunners(
   }
 }
 
+//批量更新依赖
 function scheduleRun(
   effect: ReactiveEffect,
   target: any,
@@ -223,6 +243,7 @@ function scheduleRun(
       )
     )
   }
+
   if (effect.scheduler !== void 0) {
     effect.scheduler(effect)
   } else {

packages/reactivity/src/index.ts

@@ -1,28 +1,34 @@
-export { ref, isRef, toRefs, Ref, UnwrapRef } from './ref'
 export {
-  reactive,
-  isReactive,
-  readonly,
-  isReadonly,
-  toRaw,
-  markReadonly,
-  markNonReactive
+  ref, //ref api
+  isRef, //判断是否是已经使用ref包装过的数据
+  toRefs, //传入对象。将对象中的值都使用ref包装一层
+  Ref, //ref的ts类型
+  UnwrapRef //没有被ref包装的ts类型
+} from './ref'
+export {
+  reactive, //reactive api
+  isReactive, //判断是否reactive包装过一层
+  readonly, //readonly api，和reactive大体一致，但是这个包装的对象是可读的。其实可以赋值。使用下面的unlock
+  isReadonly, //判断是否是readonly包装过一层
+  toRaw, //object和使用reactive包装过后的object1 有一个隐射关系(使用map)，调用这个函数可以根据object1得到object
+  markReadonly, //调用这个函数，作用是将参数加入readonly名单，然后你使用reactive api包装对象时候的时候，自动判断在不在黑名单，在黑名单的话会调用readonly
+  markNonReactive //调用这个函数，将参数加入名单。使用reactive  api的时候自动判断要包装的对象在不在名单。不在的话禁止包装，返回原对象
 } from './reactive'
 export {
-  computed,
-  ComputedRef,
-  WritableComputedRef,
-  WritableComputedOptions
+  computed, // computed api
+  ComputedRef, //computed返回的是一个readonly ref对象，正常compoted返回的ts类型
+  WritableComputedRef, //当computed自行定义get和set的时候，返回的值是可写的，可写的ref ts类型
+  WritableComputedOptions //自定义get和set的computed 传入的参数的ts 类型
 } from './computed'
 export {
-  effect,
-  stop,
-  pauseTracking,
-  resumeTracking,
-  ITERATE_KEY,
-  ReactiveEffect,
-  ReactiveEffectOptions,
+  effect, //effect api
+  stop, //effect所依赖的对象停止自动更新effect。将有关effect的依赖清楚
+  pauseTracking, //停止目前所有的依赖收集
+  resumeTracking, //恢复依赖收集
+  ITERATE_KEY, //一个Symbol类型的值，依赖更新时候的一种类型
+  ReactiveEffect, //effect的类型。类似于vue2的watcher。依赖的类型
+  ReactiveEffectOptions, //调用effect的传参
   DebuggerEvent
 } from './effect'
-export { lock, unlock } from './lock'
-export { OperationTypes } from './operations'
+export { lock, unlock } from './lock' //加锁解锁是否可以修改可读类型
+export { OperationTypes } from './operations' //数据更新的类型。add/delete等等