fix(shared): unwrap refs in toDisplayString (#7306)

close #5578
close #5593
close #11199
close #11201

packages/shared/__tests__/toDisplayString.spec.ts

@@ -11,12 +11,28 @@ describe('toDisplayString', () => {
   })
 
   test('primitive values', () => {
+    expect(toDisplayString(0)).toBe('0')
     expect(toDisplayString(1)).toBe('1')
+    expect(toDisplayString(NaN)).toBe('NaN')
     expect(toDisplayString(true)).toBe('true')
     expect(toDisplayString(false)).toBe('false')
     expect(toDisplayString('hello')).toBe('hello')
   })
 
+  test('primitive values in refs', () => {
+    expect(toDisplayString(ref(0))).toBe('0')
+    expect(toDisplayString(ref(1))).toBe('1')
+    expect(toDisplayString(ref(NaN))).toBe('NaN')
+    expect(toDisplayString(ref(true))).toBe('true')
+    expect(toDisplayString(ref(false))).toBe('false')
+    expect(toDisplayString(ref('hello'))).toBe('hello')
+  })
+
+  test('symbol values', () => {
+    expect(toDisplayString(Symbol('hello'))).toBe('Symbol(hello)')
+    expect(toDisplayString(ref(Symbol('hello')))).toBe('Symbol(hello)')
+  })
+
   test('Object and Arrays', () => {
     const obj = { foo: 123 }
     expect(toDisplayString(obj)).toBe(JSON.stringify(obj, null, 2))

packages/shared/src/toDisplayString.ts

@@ -10,6 +10,11 @@ import {
   objectToString,
 } from './general'
 
+// can't use isRef here since @vue/shared has no deps
+const isRef = (val: any): val is { value: unknown } => {
+  return !!(val && val.__v_isRef === true)
+}
+
 /**
  * For converting {{ interpolation }} values to displayed strings.
  * @private
@@ -22,13 +27,14 @@ export const toDisplayString = (val: unknown): string => {
       : isArray(val) ||
           (isObject(val) &&
             (val.toString === objectToString || !isFunction(val.toString)))
-        ? JSON.stringify(val, replacer, 2)
+        ? isRef(val)
+          ? toDisplayString(val.value)
+          : JSON.stringify(val, replacer, 2)
         : String(val)
 }
 
-const replacer = (_key: string, val: any): any => {
+const replacer = (_key: string, val: unknown): any => {
-  // can't use isRef here since @vue/shared has no deps
+  if (isRef(val)) {
-  if (val && val.__v_isRef) {
     return replacer(_key, val.value)
   } else if (isMap(val)) {
     return {