function watch(source, cb, options) {
if (!!(process.env.NODE_ENV !== "production") && !isFunction(cb)) {
warn$1(
`\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
);
}
return doWatch(source, cb, options);
}
function doWatch(source, cb, {
immediate,
deep,
flush,
once,
onTrack,
onTrigger
} = EMPTY_OBJ) {
if (cb && once) {
const _cb = cb;
cb = (...args) => {
_cb(...args);
unwatch();
};
}
if (!!(process.env.NODE_ENV !== "production") && deep !== void 0 && typeof deep === "number") {
warn$1(
`watch() "deep" option with number value will be used as watch depth in future versions. Please use a boolean instead to avoid potential breakage.`
);
}
if (!!(process.env.NODE_ENV !== "production") && !cb) {
if (immediate !== void 0) {
warn$1(
`watch() "immediate" option is only respected when using the watch(source, callback, options?) signature.`
);
}
if (deep !== void 0) {
warn$1(
`watch() "deep" option is only respected when using the watch(source, callback, options?) signature.`
);
}
if (once !== void 0) {
warn$1(
`watch() "once" option is only respected when using the watch(source, callback, options?) signature.`
);
}
}
const warnInvalidSource = (s) => {
warn$1(
`Invalid watch source: `,
s,
`A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.`
);
};
const instance = currentInstance;
const reactiveGetter = (source2) => deep === true ? source2 : (
// for deep: false, only traverse root-level properties
traverse(source2, deep === false ? 1 : void 0)
);
let getter;
let forceTrigger = false;
let isMultiSource = false;
if (isRef(source)) {
getter = () => source.value;
forceTrigger = isShallow(source);
} else if (isReactive(source)) {
getter = () => reactiveGetter(source);
forceTrigger = true;
} else if (isArray(source)) {
isMultiSource = true;
forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
getter = () => source.map((s) => {
if (isRef(s)) {
return s.value;
} else if (isReactive(s)) {
return reactiveGetter(s);
} else if (isFunction(s)) {
return callWithErrorHandling(s, instance, 2);
} else {
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(s);
}
});
} else if (isFunction(source)) {
if (cb) {
getter = () => callWithErrorHandling(source, instance, 2);
} else {
getter = () => {
if (cleanup) {
cleanup();
}
return callWithAsyncErrorHandling(
source,
instance,
3,
[onCleanup]
);
};
}
} else {
getter = NOOP;
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(source);
}
if (cb && deep) {
const baseGetter = getter;
getter = () => traverse(baseGetter());
}
let cleanup;
let onCleanup = (fn) => {
cleanup = effect.onStop = () => {
callWithErrorHandling(fn, instance, 4);
cleanup = effect.onStop = void 0;
};
};
let ssrCleanup;
if (isInSSRComponentSetup) {
onCleanup = NOOP;
if (!cb) {
getter();
} else if (immediate) {
callWithAsyncErrorHandling(cb, instance, 3, [
getter(),
isMultiSource ? [] : void 0,
onCleanup
]);
}
if (flush === "sync") {
const ctx = useSSRContext();
ssrCleanup = ctx.__watcherHandles || (ctx.__watcherHandles = []);
} else {
return NOOP;
}
}
let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
const job = () => {
if (!effect.active || !effect.dirty) {
return;
}
if (cb) {
const newValue = effect.run();
if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || false) {
if (cleanup) {
cleanup();
}
callWithAsyncErrorHandling(cb, instance, 3, [
newValue,
// pass undefined as the old value when it's changed for the first time
oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
onCleanup
]);
oldValue = newValue;
}
} else {
effect.run();
}
};
job.allowRecurse = !!cb;
let scheduler;
if (flush === "sync") {
scheduler = job;
} else if (flush === "post") {
scheduler = () => queuePostRenderEffect(job, instance && instance.suspense);
} else {
job.pre = true;
if (instance)
job.id = instance.uid;
scheduler = () => queueJob(job);
}
const effect = new ReactiveEffect(getter, NOOP, scheduler);
const scope = getCurrentScope();
const unwatch = () => {
effect.stop();
if (scope) {
remove(scope.effects, effect);
}
};
if (!!(process.env.NODE_ENV !== "production")) {
effect.onTrack = onTrack;
effect.onTrigger = onTrigger;
}
if (cb) {
if (immediate) {
job();
} else {
oldValue = effect.run();
}
} else if (flush === "post") {
queuePostRenderEffect(
effect.run.bind(effect),
instance && instance.suspense
);
} else {
effect.run();
}
if (ssrCleanup)
ssrCleanup.push(unwatch);
return unwatch;
}
-
这段 doWatch 是 Vue watch / watchEffect 的核心实现：把不同 source 归一为 getter，创建 ReactiveEffect，按 flush 调度，负责首次执行、变更比较、清理、以及与当前 EffectScope 绑定。
-
返回值是 unwatch，用于停止 effect，并从当前作用域移除，因而能随组件或 effectScope 一起销毁。
一次性监听（once）
if (cb && once) {
const _cb = cb;
cb = (...args) => {
_cb(...args);
unwatch();
};
}
- 有 cb（即 watch）且 once: true 时，包一层回调，第一次触发后自动 unwatch()。
统一构造 getter + 触发策略
if (isRef(source)) {
getter = () => source.value;
forceTrigger = isShallow(source);
} else if (isReactive(source)) {
getter = () => reactiveGetter(source);
forceTrigger = true;
} else if (isArray(source)) {
isMultiSource = true;
forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
getter = () => source.map((s) => {
if (isRef(s)) {
return s.value;
} else if (isReactive(s)) {
return reactiveGetter(s);
} else if (isFunction(s)) {
return callWithErrorHandling(s, instance, 2);
} else {
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(s);
}
});
} else if (isFunction(source)) {
if (cb) {
getter = () => callWithErrorHandling(source, instance, 2);
} else {
getter = () => {
if (cleanup) {
cleanup();
}
return callWithAsyncErrorHandling(
source,
instance,
3,
[onCleanup]
);
};
}
} else {
getter = NOOP;
!!(process.env.NODE_ENV !== "production") && warnInvalidSource(source);
}
-
支持四类来源：ref、reactive、数组、多源函数。
-
forceTrigger：对浅层 ref 或任意 reactive/多源含 reactive 时，强制视为可能变更（跳过引用相等的优化）。
-
watchEffect（无 cb）时，getter 内会处理 onCleanup（通过参数注入）。
deep 选项与遍历
if (cb && deep) { const baseGetter = getter; getter = () => traverse(baseGetter()); }
清理函数注册（onCleanup）绑定到 effect 停止
let cleanup; let onCleanup = (fn) => { cleanup = effect.onStop = () => { callWithErrorHandling(fn, instance, 4); cleanup = effect.onStop = void 0; }; };
首次值、调度任务（job）与变更比较
let oldValue = isMultiSource ? new Array(source.length).fill(INITIAL_WATCHER_VALUE) : INITIAL_WATCHER_VALUE;
const job = () => {
if (!effect.active || !effect.dirty) {
return;
}
if (cb) {
const newValue = effect.run();
if (deep || forceTrigger || (isMultiSource ? newValue.some((v, i) => hasChanged(v, oldValue[i])) : hasChanged(newValue, oldValue)) || false) {
if (cleanup) {
cleanup();
}
callWithAsyncErrorHandling(cb, instance, 3, [
newValue,
// pass undefined as the old value when it's changed for the first time
oldValue === INITIAL_WATCHER_VALUE ? void 0 : isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE ? [] : oldValue,
onCleanup
]);
oldValue = newValue;
}
} else {
effect.run();
}
};
