前端vue实战小测试

问题1

我们先直觉判断一下，当input value大于5的时候是否会禁用。
 

其实这题考的就是对象的引用，我们可以在浏览器上试试下面的内容会打印什么。

let a = 1;
let b = {
  c: a
}
a = 3​

讲解一下把再inputValue大于5的时候，我们看似改变了disabled，但实际上buttonOption里的disabled并没有改变，对于有时候会传一些复杂配置项的时候可能会遇到这个问题，这时候我们有个比较好的办法就是computed，computed会依赖收集，当依赖变化的时候，buttonOption.disabled的值就会相应变化。在线地址。

问题2

老规矩直觉判断，当按钮点击的时候，是否会进行深监听，以及新旧value的值。 

此时我们监听了一个reactive定义的响应式数据，并且关闭了深监听，可是在打印中，我们依然进行了一个深监听，并且oldValue的值还是错误的。

然后我去翻了一下源码，一看不知道，原来不止是reactive定义的会有这个问题

我们先打一下断点

发现了一个问题，就是oldValue和newValue的引用是相同的，当newValue改变的时候oldValue也会改变。 

这里我们看到最后，是导致oldValue和newValue引用相同的原因，而只有当我们直接性的使用一些引用类型进行监听的时候才会造成这个问题，而一些基本类型或者引用类型上的属性则不会造成OldValue的失效问题。

function doWatch(
  source: WatchSource | WatchSource[] | WatchEffect | object,
  cb: WatchCallback | null,
  { immediate, deep, flush, onTrack, onTrigger }: WatchOptions = EMPTY_OBJ
): WatchStopHandle {
  //忽略代码const instance = currentInstance // 当前组件实例let getter: () => any //副作用参数let forceTrigger = false //是否强制更新let isMultiSource = false //数组开启
}
   // 组装setterif (isRef(source)) {
    getter = () => source.value// shallowRef也会有oldValue问题，性能优化用的这是
    forceTrigger = isShallow(source)
  } else if (isReactive(source)) {
    getter = () => source
    // 如果是reactive定义的会强制设置成deep，会有oldValue问题
    deep = true
  } 
  //忽略代码// 初始化 oldValue此时为{}let oldValue = isMultiSource ? [] : INITIAL_WATCHER_VALUE// 声明一个 job 调度器任务const job: SchedulerJob = () => {
    if (!effect.active) { // 如果副作用以停用则直接返回return
    }
    if (cb) {
      const newValue = effect.run()
      
      // 判断是否需要执行 cb// 1. getter 函数的值被改变，没有发生改变则不执行 cb 回调// 2. 设置了 deep 深度监听// 3. forceTrigger 为 trueif (
        deep ||
        forceTrigger ||
        (isMultiSource
          ? (newValue as any[]).some((v, i) =>hasChanged(v, (oldValue as any[])[i])
            )
          : hasChanged(newValue, oldValue)) ||
        (__COMPAT__ &&
          isArray(newValue) &&
          isCompatEnabled(DeprecationTypes.WATCH_ARRAY, instance))
      ) {
        // cleanup before running cb again// 当回调再次执行前先清除副作用if (cleanup) {
          cleanup()
        }
        // 触发 watch api 的回调，并将 newValue、oldValue、onInvalidate 传入callWithAsyncErrorHandling(cb, instance, ErrorCodes.WATCH_CALLBACK, [
          newValue,
          // pass undefined as the old value when it's changed for the first time// 首次调用时，将 oldValue 的值设置为 undefined
          oldValue === INITIAL_WATCHER_VALUE ? undefined : oldValue,
          onInvalidate
        ])
        oldValue = newValue // 引用相同的罪魁祸首，当每次回调执行完走到着，会让oldValue和newValue保持相同的引用。
      }
    } else {
      effect.run()
    }
  }
​

总结

这几天一直在修前面react的源码解析，主要是我注意到了在react源码理解的最大难点是在于复杂的数据结构，和各种指针链表的引用，但刚才看了一下v3的effect和调度，感觉比react确实要好理解一些。

关于我的一些介绍