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

diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts
index 12f2b249aa009009d92313d0ad4fe87fa9ce1eda..15748c88eb28908b768cc39b0ea856c067453879 100644 (file)
--- a/packages/reactivity/src/computed.ts
+++ b/packages/reactivity/src/computed.ts
@@ -1,6 +1,6 @@
 import { hasChanged, isFunction } from '@vue/shared'
 import { ReactiveFlags, TrackOpTypes } from './constants'
-import { onTrack, setupFlagsHandler } from './debug'
+import { onTrack, setupOnTrigger } from './debug'
 import {
   type DebuggerEvent,
   type DebuggerOptions,
@@ -130,9 +130,6 @@ export class ComputedRefImpl<T = any> implements IComputed {
     private readonly setter: ComputedSetter<T> | undefined,
   ) {
     this[ReactiveFlags.IS_READONLY] = !setter
-    if (__DEV__) {
-      setupFlagsHandler(this)
-    }
   }
 
   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
  * returned value from the getter. It can also take an object with get and set

diff --git a/packages/reactivity/src/debug.ts b/packages/reactivity/src/debug.ts
index 41908a0d1243cbf3704af86a3eafc32bffc1e013..14d22f0a1f2234a204e5c26c7de4e1ffbe72469a 100644 (file)
--- a/packages/reactivity/src/debug.ts
+++ b/packages/reactivity/src/debug.ts
@@ -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__) {
     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
   target._flags = target.flags
   Object.defineProperty(target, 'flags', {

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