feat(compiler): ensure interpolation expressions are wrapped with toString()

packages/runtime-core/src/componentProps.ts

@@ -9,7 +9,8 @@ import {
   isArray,
   isObject,
   isReservedProp,
-  hasOwn
+  hasOwn,
+  toTypeString
 } from '@vue/shared'
 import { warn } from './warning'
 import { Data, ComponentInternalInstance } from './component'
@@ -374,7 +375,7 @@ function styleValue(value: any, type: string): string {
 }
 
 function toRawType(value: any): string {
-  return Object.prototype.toString.call(value).slice(8, -1)
+  return toTypeString(value).slice(8, -1)
 }
 
 function isExplicable(type: string): boolean {

packages/runtime-core/src/helpers/toString.ts

@@ -0,0 +1,10 @@
+import { isArray, isPlainObject, objectToString } from '@vue/shared'
+
+// for conversting {{ interpolation }} values to displayed strings.
+export function toString(val: any): string {
+  return val == null
+    ? ''
+    : isArray(val) || (isPlainObject(val) && val.toString === objectToString)
+      ? JSON.stringify(val, null, 2)
+      : String(val)
+}

packages/runtime-core/src/index.ts

@@ -36,9 +36,11 @@ export {
 } from './errorHandling'
 
 // Internal, for compiler generated code
+// should sync with '@vue/compiler-core/src/runtimeConstants.ts'
 export { applyDirectives } from './directives'
 export { resolveComponent, resolveDirective } from './helpers/resolveAssets'
 export { renderList } from './helpers/renderList'
+export { toString } from './helpers/toString'
 export { capitalize } from '@vue/shared'
 
 // Internal, for integration with runtime compiler