Vue3 template模板中解包问题

什么是解包？

Vue3 3.1 在template模板 使用 定义的数据是需要写 .value的

Vue3 3.2 之后 在 template模板 使用 定义的数据是不需要写 .value 的

这个是解包

但是在 template 模板中写行内函数就需要写 value 

导致的结果是两个不相同的数据 +1 但是函数执行之后是都 +1 的

<template>
<!-- 默认情况下在 template 中使用 ref 时，Vue 会自动解包(拿出其中的 value) -->
  <h2>当前count数量: {{ count }}</h2>
  <button @click="incrCountHandler">count数量+1</button>
  <button @click="count++">count数量+1</button>
  <hr>
  <!--  解包 使用的时候不需要写 value -->
  <h2>当前info.count数量: {{info.count}}</h2>
  <!-- 修改的时候需要写 .value -->
  <button @click="info.count.value++">info.count数量+1</button>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const incrCountHandler = () => {
      count.value++
    }

    const info = {
      count
    }
    return { count, incrCountHandler, info }
  },
}
</script>