Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Double quotes are output in html structure when template renders ref type variable

For example, write in the .vue file： sfc.vuejs.org/

Text with double quotes will appear in the html structure

What is expected?

Do not output double quotes when using ref type variable in template

What is actually happening?

In Shared.esm-bundle.js, the "todisplayString" function renders the variable into a string, where the Template uses the object type variable (RefImpl is one of them) will use the statement "JSON.stringify(val, replacer, 2) " Because Json.stringify will have double quotes after the variable of the string is the string

I hope that the obtained string is judged that if the result is a pure string format, it should delete the double quotes.

Here are key code: https://github.com/vuejs/vue-next/blob/eb721d49c004abf5eff0a4e7da71bad904aa6bac/packages/shared/src/toDisplayString.ts#L15-L23

Hello, thank you for taking time filling this issue!

However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).

I hope to see your helper-created issue very soon!

Normally, Refs are unwrapped in the template. But as you put it on a nonreactive object, this one is not. ou can (and have to) access it's value here as foo.name.value

<template>
 <div>
   {{ foo.name.value }}
 </div>
</template>