前言

最近在实践vue3.x , 经常有如下迷惑行为:

checkedGood.value = checked.value

在这里我就有如下疑问：

checked 会被收集依赖吗
checked 变了，checkedGood 会变吗

checked 会被收集依赖吗：

事实证明不会收集依赖，是否收集依赖由两个条件：

function trackRefValue(ref) {
    if (shouldTrack && activeEffect) {
        ref = toRaw(ref);
        if ((process.env.NODE_ENV !== 'production')) {
            trackEffects(ref.dep || (ref.dep = createDep()), {
                target: ref,
                type: "get" /* TrackOpTypes.GET */,
                key: 'value'
            });
        }
        else {
            trackEffects(ref.dep || (ref.dep = createDep()));
        }
    }
}

shouldTrack
activeEffect （是否注册过副作用函数，即是否由副作用函数包裹）

我这种情况checkedGood.value = checked.value ， activeEffect（为渲染依赖）是有值的，那重点就在shouldTrack 为什么false

查源码可知：

 if (setup) {
        const setupContext = (instance.setupContext =
            setup.length > 1 ? createSetupContext(instance) : null);
        setCurrentInstance(instance);
        pauseTracking();
        const setupResult = callWithErrorHandling(setup, instance, 0 /* ErrorCodes.SETUP_FUNCTION */, [shallowReadonly(instance.props) , setupContext]);
        resetTracking();
        unsetCurrentInstance();

在执行setup 的时候会先 pauseTracking() 暂停收集依赖，所以shouldTrack = false

结论：

checked 不会收集依赖（原因：在执行setup 的时候会先 pauseTracking() 暂停收集依赖， shouldTrack = false）
checkedGood 不会变（原因：没有收集checkedGood 的依赖）

从源码角度看懂checked.value 迷惑行为

前言