Skip to content

feat(reactivity): untrack #13286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: minor
Choose a base branch
from
+34 −1
Open

feat(reactivity): untrack #13286

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cc326a7
feat: ref peek
teleskop150750 May 6, 2025
d089f23
feat: untrack
teleskop150750 May 6, 2025
acf02a1
feat: add untrack export
teleskop150750 May 6, 2025
dc89e00
chore: remove peek
teleskop150750 Jul 23, 2025
87e0d1d
feat(runtime-core): add untrack
teleskop150750 Jul 23, 2025
328607b
chore: merge minor into branch
teleskop150750 Jul 23, 2025
ec0a97e
chore: revert auto format
teleskop150750 Jul 23, 2025
82914dc
test(runtime-core): add untrack for computed
teleskop150750 Jul 23, 2025
3973e6b
chore: revert auto format
teleskop150750 Jul 23, 2025
bece02d
refactor(runtime-core): [untrack] use setActiveSub
teleskop150750 Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion packages/reactivity/__tests__/effect.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,12 @@ import {
serializeInner,
} from '@vue/runtime-test'
import { ITERATE_KEY, getDepFromReactive } from '../src/dep'
import { onEffectCleanup, pauseTracking, resetTracking } from '../src/effect'
import {
onEffectCleanup,
pauseTracking,
resetTracking,
untrack,
} from '../src/effect'
import {
type DebuggerEvent,
type ReactiveEffectRunner,
Expand Down Expand Up @@ -1177,6 +1182,17 @@ describe('reactivity/effect', () => {
expect(spy2).toHaveBeenCalledTimes(2)
})

it('should not track dependencies when using untrack', () => {
const value = ref(1)
let dummy
effect(() => {
dummy = untrack(() => value.value)
})
expect(dummy).toBe(1)
value.value = 2
expect(dummy).toBe(1)
})

describe('dep unsubscribe', () => {
function getSubCount(dep: ReactiveNode | undefined) {
let count = 0
Expand Down
9 changes: 9 additions & 0 deletions packages/reactivity/src/effect.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,15 @@ export function cleanup(
}
}

export function untrack<T>(fn: () => T): T {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we consider using MaybeRefOrGetter<T> instead of () => T here?

Copy link
Author

@teleskop150750 teleskop150750 Jul 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Of course you can. But the utility won't be too overloaded from this. ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can just call toValue(source). In other words this will make it an untrack wrapper around toValue.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand you perfectly. In my mindset, passing Ref directly should be almost completely avoided. Therefore, the use of toValue is minimized. If necessary, the user can call it himself inside untrack, rather than doing it automatically each time. If you insist, I will add your edit.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is just my opinion. I think I would prefer to hear what others think.

try {
pauseTracking()
return fn()
} finally {
resetTracking()
}
}

/**
* Registers a cleanup function for the current active effect.
* The cleanup function is called right before the next effect run, or when the
Expand Down
1 change: 1 addition & 0 deletions packages/reactivity/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export {
enableTracking,
pauseTracking,
resetTracking,
untrack,
onEffectCleanup,
ReactiveEffect,
EffectFlags,
Expand Down
2 changes: 1 addition & 1 deletion packages/runtime-core/__tests__/rendererAttrsFallthrough.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,7 @@ describe('attribute fallthrough', () => {
const Child = {
props: [],
render() {
return (openBlock(), createBlock('div'))
return openBlock(), createBlock('div')
},
}

Expand Down
1 change: 1 addition & 0 deletions packages/runtime-core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export {
toRaw,
// effect
effect,
untrack,
stop,
getCurrentWatcher,
onWatcherCleanup,
Expand Down