Vue3组合式API中useCounter的v-model渲染[object Object]问题

问题场景 #

在Vue3组合式API中实现了useCount可复用钩子，返回包含ref类型的count和increment方法的对象。出现以下异常：

• 输入框使用v-model.number="counter.count"时，渲染结果为[object Object]
• 直接绑定独立ref变量v-model.number="count"时，数值显示正常
• 在increment方法中直接修改counter.count.value，可以正常实现递增操作

原因分析 #

Vue模板中，顶级ref变量会自动解包，但当ref作为对象的属性存在时（如counter.count），模板不会自动解包。v-model.number会尝试将绑定值转为数字类型，但此时绑定的是ref对象本身，转换失败后就会显示[object Object]。而模板插值{{ counter.count }}能正常显示，是因为插值语法会自动对ref进行解包处理。

解决方案 #

在绑定v-model.number时，手动访问ref对象的value属性即可：

修改后的App.vue代码 #

<script setup>
import { ref } from 'vue'
import useCount from './useCount.js'

const count = ref(5)

const counter = useCount({
  initialCount: 5
})

const increment = () => {
  count.value++
  counter.count.value++
}
</script>

<template>
  <h1>{{ counter.count }}</h1>
  <input v-model.number="counter.count.value" />
  <button @click="counter.increment">
    Increment useCount
  </button>

  <h1>{{ count }}</h1>
  <input v-model.number="count" />
  <button @click="increment">
    Increment all
  </button>
</template>

useCount钩子代码（无需修改） #

import { ref } from 'vue'

const useCount = (props = {}) => {
  const count = ref(props.initialCount ?? 0)
  
  const increment = () => {
    count.value++
  }
  
  return {
    increment,
    count,
  }
}

export default useCount

内容的提问来源于stack exchange，提问作者alfianandinugraha