type of reactive collection values is abnormal

[Teiiiiiio]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqtVMlu2zAQ/ZUJL7YRWUabm+G4S5BDizYJ0gA5hDnQ8shhIpECF2cR9O8dkt4aBEZaVCeR84bz5s0jW/alafKlRzZmE1sY2Tiw6HwDlVCLY86c5WzKlawbbRy0YFAUTi4xM1hm0l6ultBBaXQNPTqqxxVXhVbWwUzrBwvHm6y+wkf4KZr+DVdA303v6g7hh3SuQrgwUhXYy6hKY2SBY0or+x8G0N1mu/BrreZoSl/BtXwRZg66hPMXeJ34cZV4OxgEQqORo9wYB/fcIEgLl1hOznw9QzPNZt6FtLAtvNO1cLIQVfUMXj0a0TQ4z2ZYCG8xdZUv0PXfoD9IB6d+PyUhdIV5pRd9zraK9fefMubs8N3g0OGfdfbj8yQTlXgP7rV8+VJUfiuiigJG/Yisj5oJRbLNsZQK/4VZqvBefgkdWSbXaXVSyeKBfNdXosaxdYRfZKnpRHcAx1Nog6t22QX0IWc9u/KJtIHDWoQuVJiM0i2hO0ELh3VTCYe0ApjM5RKWw1Ibujc34axMqlLfglTJMpzB5yIwo/iKYywZYWut2XRyMByC9UWB1h4EWaPSaIw2MBzGUgBtGzK7bty22+yOKBKPERH5b4zW6q547TqAhr+e8l8Rm4w2urGMXhgaQSkX+b3Vip6hOBXOCl03skJz3jhJI+JsnOYVYuQx/fg97jnjcfU6UM4dFg9v7N/bp7DH2YVBi2aJnG1iThiyVwqf/jrDJ/rfBGs99xWh9wQvkezjA8cE+0qSEO0dXGT7LT6gZMMre/rkUNl1U4FoQHYRzxk9oCd7Wt/SPcqPYh4Zk3W/AZf6+Tk=

Steps to reproduce

1.create reactive map

const books = reactive(new Map([
    ['The Little Prince', { price: ref(1) }],
    ['The Wonderful Wizard of Oz ', { price: ref(2) }],
]))

2.show

  <div v-for="[name,info] in books" @click="onClick(name,info.price)"><!-- success!but type error -->
    {{name}}:{{info.price}}
  </div>

3.add click event to print book's name and price

const onClick = (name:string,price:number) => {
  console.log(name+"'s price is:"+price)
}

What is expected?

info.price type should be number

What is actually happening?

Argument of type 'Ref<number>' is not assignable to parameter of type 'number'

System Info

No response

Any additional comments?

No response

[TheDutchCoder]

price is already reactive, you probably shouldn't make them refs. Specifically this part seems relevant (https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-proxy-vs-original-1):

This rule applies to nested objects as well. Due to deep reactivity, nested objects inside a reactive object are also proxies:

Example without refs: https://play.vuejs.org/#eNqtVNtOGzEQ/ZXBL0nEJoHyFoX0gnho1QKiSDxgHpzNbDDs2itfwmW1/96xnVsrFEHFPq09Zzxnzhy7YV/rerDwyEZsbHMjawcWna+hFGp+zJmznE24klWtjYMGDIrcyQVmBotM2svlEloojK6gQ0d1uOIq18o6mGr9YOF4ndVV+Ai/RN294Qrou+lc3SH8lM6VCBdGqhw7GVWpjcxxBIfQ3mbbyGutZmgKX8K1fBFmBrqA8xfYzvmUcm57vUBjOHSUFkPgnmsEaeESi/GZr6ZoJtnUOyJXhG3hna6Ek7koy2fw6tGIusZZNsVceIupl8EcXfcV0r10cOryc2pflzgo9bzL2Uan7u5TRpztvxkcOvy7zm78IClEJd6C+1e+wUKUfiOiigJG/Yisj5oJRbLNsJAK/4dZqvAufsllWp2UMn8gn3WVqHBkHSHnWWo3Ee3B8QSaYKVtXgG9z1nHLh0ibai+Or4NFd5ChQofHhwE9HiY7hDdGFo4rOpSOKQVwHgmF7DoF9rQrboJlTOpCn0LUiVrcQZf8tAHxZcdRYIRtuqZTcZ7/T5Yn+do7V6QP04EjdEG+v1YCqBpQmbbjppmk91SQ8RjSEQ+ntG2R8geKx+8i9J4uFaMZfTy0KgKOR/cW63oeYrT4yzXVS1LNOe1kzRKzkZpriFGLtSPP+KeMx6XTwfl3GH+8Mr+vX0Ke5xdGLRoFsjZOuaEoamn8OnvM3yi/3Ww0jNfEnpH8BLJZj5wTLBvJAnR3sJFtt/jw0p2vbKnTw6VXTUViAZkG/Gc0cN6sqP1Dd2jwVHMIwOz9g8+qQDU

[Teiiiiiio]

@TheDutchCoder Thanks for your reply
When i explicit add reactive for map values,The type is correctly
playground

const books = reactive(new Map([
    ['The Little Prince', reactive({ price: ref(1) })],
    ['The Wonderful Wizard of Oz ', reactive({ price: ref(2) })],
]))

price is already reactive, you probably shouldn't make them refs. Specifically this part seems

In my project,I want to provide a computed for price,It seems I should use watch in your example

[TheDutchCoder]

@Teiiiiiio I don't think so?
Anyway, I think this is just normal behaviour. I personally never use reactive, ref is so much easier imo.

https://play.vuejs.org/#eNqtVU1T2zAQ/SuLLnGKkxS4ZZL0g+FApwWGMsMBcXCcdRDYkkcf4SPj/96VhJOUYVLokFOkfat9+/RWXrJvdd1fOGRDNjK5FrUFg9bVUGZyPubMGs4mXIqqVtrCEjRmuRULTDUWqTDn7RJyVdXO4gwaKLSqoEOHdrjkMlfSWJgqdWdgvMpPJN7Dr6xOrrgE+l11Lm4QfgprS4QzLWSOnZTq1VrkOIQ9aK7TTeSlkjPUhSvhUjxlegaqgNMn2MzZjznX3a6nMRhYSgshsI81gjBwjsXoxFVT1JN06iyRK/x25qyqMivyrCwfwcl7ndU1ztIp5pkzGHvpz9Emr5DuxoNjl19i+6rEfqnmCWdrxZLtpww5230z2Hf4d53t+H5UiEq8BfdSvv4iK91aRBkEDPoRWRc0yyTJNsNCSPwfZrHCu/hFlyl5WIr8jnyWyKzCobGEnKex3Ui0C+MJLL2VNnl59C5nHfPsEGF89fb4Zl2BCpOFyQRUIhz1FoawO4a9z+tD2lkhFAXHq3XyjiM/wX5ofDSIY0tDSguLVV1mFmkFMJqJBSx6hdI0yFe+xVTIQl1TE7EGZ/A194JR/Fm6oESAteKyyWin1wPj8hyN2fH3HK4etVYaer1QCmC59JlNM1wu19lNAz2KvGi4IT2J3YDofTzPTYuSO1sb/pPoC0rUplVyXba998QXOm5NEHJHgwimxNFgdQEspbeTrrsQ8/6tUZIe2OA6zrwYokR9WltBduBsGP3oYzQ96v5H2LPa4fOTRzk3mN+9sn9rHvweZ2caDeoFcraK2UyTh2L46PcJPtD/VbBSM1cSekvwHGk8nOcYYd9JS6K9gQtsj8Ongcbswhw9WJSmbcoT9cgm4DmjD8LhltbXdA/6ByGPBo81fwAPcUMl

[Teiiiiiio]

@TheDutchCoder sorry,i didn't make myself clear
playground

I think this is just normal behaviour

I think so too,but when i not explicit add reactive,type is unautomatically unwrapped,In fact, it has automatically unwrapped in line 40