From 10f36c8633cf1b53f7904f5922d2f915c3dcea04 Mon Sep 17 00:00:00 2001 From: "eveningwater.123" Date: Mon, 16 Jun 2025 18:20:05 +0800 Subject: [PATCH 1/4] fix: fix the Converting circular structure to JSON error --- packages/shared/src/toDisplayString.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index b23cf766a5c..1ae66593df1 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -11,6 +11,7 @@ import { isSymbol, objectToString, } from './general' +import { isVNode } from '@vue/runtime-core' // can't use isRef here since @vue/shared has no deps const isRef = (val: any): val is { value: unknown } => { @@ -22,6 +23,11 @@ const isRef = (val: any): val is { value: unknown } => { * @private */ export const toDisplayString = (val: unknown): string => { + // fix: https://github.com/vuejs/core/issues/13481 + if(isVNode(val)){ + console.warn('[Vue warn]: {{ interpolation }} values does not support vnode rendering, this is an incorrect usage!'); + return ''; + } return isString(val) ? val : val == null From 6848b65f0dd61d1bf977242544746eae415526d0 Mon Sep 17 00:00:00 2001 From: "eveningwater.123" Date: Mon, 16 Jun 2025 19:31:28 +0800 Subject: [PATCH 2/4] fix: Optimized the code --- packages/shared/src/toDisplayString.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index 1ae66593df1..9b65b2dd349 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -11,21 +11,25 @@ import { isSymbol, objectToString, } from './general' -import { isVNode } from '@vue/runtime-core' // can't use isRef here since @vue/shared has no deps const isRef = (val: any): val is { value: unknown } => { return !!(val && val[ReactiveFlags.IS_REF] === true) } +const isVNodeLike = (val: unknown): boolean => + !!(val && (val as any).__v_isVNode === true) /** * For converting {{ interpolation }} values to displayed strings. * @private */ export const toDisplayString = (val: unknown): string => { // fix: https://github.com/vuejs/core/issues/13481 - if(isVNode(val)){ - console.warn('[Vue warn]: {{ interpolation }} values does not support vnode rendering, this is an incorrect usage!'); + if(isVNodeLike(val)){ + if(__DEV__){ + console.warn( '[Vue warn]: Interpolated value is a VNode – this is unsupported and was ' + + + 'likely passed by mistake. Returning an empty string.'); + } return ''; } return isString(val) From e3fe72110977f53a7d6d2b85b0c3ecd62f7871ab Mon Sep 17 00:00:00 2001 From: "eveningwater.123" Date: Mon, 16 Jun 2025 19:39:59 +0800 Subject: [PATCH 3/4] fix: Optimized the code --- packages/shared/src/toDisplayString.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index 9b65b2dd349..9f18f3e9f0f 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -27,8 +27,7 @@ export const toDisplayString = (val: unknown): string => { // fix: https://github.com/vuejs/core/issues/13481 if(isVNodeLike(val)){ if(__DEV__){ - console.warn( '[Vue warn]: Interpolated value is a VNode – this is unsupported and was ' + - + 'likely passed by mistake. Returning an empty string.'); + console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was ' + 'likely passed by mistake. Returning an empty string.'); } return ''; } From c8b7edf590d62983eb8d4946dff2ade851f1ca12 Mon Sep 17 00:00:00 2001 From: "eveningwater.123" Date: Mon, 16 Jun 2025 19:40:25 +0800 Subject: [PATCH 4/4] fix: Optimized the code --- packages/shared/src/toDisplayString.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/src/toDisplayString.ts b/packages/shared/src/toDisplayString.ts index 9f18f3e9f0f..3c391b20c98 100644 --- a/packages/shared/src/toDisplayString.ts +++ b/packages/shared/src/toDisplayString.ts @@ -27,7 +27,7 @@ export const toDisplayString = (val: unknown): string => { // fix: https://github.com/vuejs/core/issues/13481 if(isVNodeLike(val)){ if(__DEV__){ - console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was ' + 'likely passed by mistake. Returning an empty string.'); + console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was likely passed by mistake. Returning an empty string.'); } return ''; }