root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(reactivity): only setup onTrigger debug flags on assign

This commit is contained in:
Evan You 2024-12-03 23:26:30 +08:00
parent 313dc61bef
commit ccd3f3f5c6
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
3 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/reactivity/src/computed.ts
View File

@ -1,6 +1,6 @@
import { hasChanged, isFunction } from '@vue/shared' import { hasChanged, isFunction } from '@vue/shared'
import { ReactiveFlags, TrackOpTypes } from './constants' import { ReactiveFlags, TrackOpTypes } from './constants'
import { onTrack, setupFlagsHandler } from './debug' import { onTrack, setupOnTrigger } from './debug'
import { import {
type DebuggerEvent, type DebuggerEvent,
type DebuggerOptions, type DebuggerOptions,
@ -130,9 +130,6 @@ export class ComputedRefImpl<T = any> implements IComputed {
private readonly setter: ComputedSetter<T> | undefined, private readonly setter: ComputedSetter<T> | undefined,
) { ) {
this[ReactiveFlags.IS_READONLY] = !setter this[ReactiveFlags.IS_READONLY] = !setter
if (__DEV__) {
setupFlagsHandler(this)
}
} }
get value(): T { get value(): T {
@ -188,6 +185,10 @@ export class ComputedRefImpl<T = any> implements IComputed {
} }
} }
if (__DEV__) {
setupOnTrigger(ComputedRefImpl)
}
/** /**
* Takes a getter function and returns a readonly reactive ref object for the * Takes a getter function and returns a readonly reactive ref object for the
* returned value from the getter. It can also take an object with get and set * returned value from the getter. It can also take an object with get and set

16
packages/reactivity/src/debug.ts
View File

@ -44,12 +44,24 @@ export function onTrigger(sub: Link['sub']): void {
} }
} }
export function setupFlagsHandler(target: Subscriber): void { export function setupOnTrigger(target: { new (...args: any[]): any }): void {
if (!__DEV__) { if (!__DEV__) {
throw new Error( throw new Error(
`Internal error: setupFlagsHandler should be called only in development.`, `Internal error: setupOnTrigger should be called only in development.`,
) )
} }
Object.defineProperty(target.prototype, 'onTrigger', {
get() {
return this._onTrigger
},
set(val) {
if (!this._onTrigger) setupFlagsHandler(this)
this._onTrigger = val
},
})
}
function setupFlagsHandler(target: Subscriber): void {
// @ts-expect-error // @ts-expect-error
target._flags = target.flags target._flags = target.flags
Object.defineProperty(target, 'flags', { Object.defineProperty(target, 'flags', {

9
packages/reactivity/src/effect.ts
View File

@ -1,6 +1,6 @@
import { extend } from '@vue/shared' import { extend } from '@vue/shared'
import type { TrackOpTypes, TriggerOpTypes } from './constants' import type { TrackOpTypes, TriggerOpTypes } from './constants'
import { setupFlagsHandler } from './debug' import { setupOnTrigger } from './debug'
import { activeEffectScope } from './effectScope' import { activeEffectScope } from './effectScope'
import { import {
type IEffect, type IEffect,
@ -74,9 +74,6 @@ export class ReactiveEffect<T = any> implements IEffect, ReactiveEffectOptions {
if (activeEffectScope && activeEffectScope.active) { if (activeEffectScope && activeEffectScope.active) {
activeEffectScope.effects.push(this) activeEffectScope.effects.push(this)
} }
if (__DEV__) {
setupFlagsHandler(this)
}
} }
get active(): boolean { get active(): boolean {
@ -176,6 +173,10 @@ export class ReactiveEffect<T = any> implements IEffect, ReactiveEffectOptions {
} }
} }
if (__DEV__) {
setupOnTrigger(ReactiveEffect)
}
export interface ReactiveEffectRunner<T = any> { export interface ReactiveEffectRunner<T = any> {
(): T (): T
effect: ReactiveEffect effect: ReactiveEffect