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

Author: yyx990803

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

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', {

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