fix(customFormatter): properly accessing ref value during debugger (#12948)

diff --git a/packages/runtime-core/src/customFormatter.ts b/packages/runtime-core/src/customFormatter.ts
index 1dd03be7d2c7e2d6ff040e86a12f8799017e8e30..dfe39bf43870b55b8d7b6ef29c001ea09da1835b 100644 (file)
--- a/packages/runtime-core/src/customFormatter.ts
+++ b/packages/runtime-core/src/customFormatter.ts
@@ -4,6 +4,8 @@ import {
   isReadonly,
   isRef,
   isShallow,
+  pauseTracking,
+  resetTracking,
   toRaw,
 } from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
@@ -34,13 +36,16 @@ export function initCustomFormatter(): void {
       if (obj.__isVue) {
         return ['div', vueStyle, `VueInstance`]
       } else if (isRef(obj)) {
+        // avoid tracking during debugger accessing
+        pauseTracking()
+        const value = obj.value
+        resetTracking()
         return [
           'div',
           {},
           ['span', vueStyle, genRefFlag(obj)],
           '<',
-          // avoid debugger accessing value affecting behavior
-          formatValue('_value' in obj ? obj._value : obj),
+          formatValue(value),
           `>`,
         ]
       } else if (isReactive(obj)) {