Vue3中如何解决函数需同时接收Ref<Note>和普通Note参数的问题

你提到的两种方案都可以实现，还有更低入侵的兼容方案，具体实现如下：

方案1：模板侧解包，函数入参改为普通Note类型（更推荐） #

这种方案是业务开发中的首选，普通类型的入参通用性更强：

• 模板侧修改事件绑定，手动解包Ref后传参：

  <template>
    <!-- 手动取Ref的value传入函数 -->
    <YourComponent @modified-note="(note) => writeNote(note.value)" />
  </template>
  

• 修改函数的入参类型为普通Note：

  // 入参直接用原始类型，setup内部直接传Note对象也能适配
  const writeNote = (note: Note) => { 
    console.log(`note ${note.id}`)
  }
  

方案2：setup内部将普通对象转Ref后传入 #

如果你不想修改模板和原函数的类型定义，可以在内部调用时做转换：
使用Vue提供的ref或toRef工具方法把普通Note对象转为Ref类型：

import { ref } from 'vue'

// setup内部调用时转换
const rawNote: Note = getNote()
const noteRef = ref(rawNote)
writeNote(noteRef)

注意：该方案需要额外的转换操作，调用成本比方案1高。另外你原函数的写法有错误，Ref类型需要取.value才能访问内部属性，应该改为note.value.id。

方案3：兼容两种入参类型，无需修改调用侧代码 #

如果不想改两边的调用逻辑，可以直接修改函数实现，用Vue提供的unref工具自动解包：

import { unref, type Ref } from 'vue'

// 入参支持两种类型
const writeNote = (note: Ref<Note> | Note) => { 
  // unref会自动判断入参类型：是Ref就返回.value，不是直接返回原值
  const rawNote = unref(note)
  console.log(`note ${rawNote.id}`)
}

这种方案两边的调用逻辑都不用改，模板直接传Ref、setup内部直接传普通对象都可以正常运行，类型也完全匹配。

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