如何为对象的每个属性创建响应式引用？求通用类型安全方案

针对将对象所有属性转为响应式ref的需求，这里提供两种类型安全的通用实现方式：

1. 自定义泛型工具函数（适配非响应式原始对象） #

如果你的原始对象是普通非响应式对象，可以写一个泛型函数遍历属性并生成对应ref：

import { ref, Ref } from 'vue';

function objectToRefs<T extends object>(obj: T): { [K in keyof T]: Ref<T[K]> } {
  const refs = {} as { [K in keyof T]: Ref<T[K]> };
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      refs[key] = ref(obj[key]);
    }
  }
  return refs;
}

使用示例：

interface Dog {
  name: string;
  age: number;
}

const puppy: Dog = {
  name: 'Snoop',
  age: 2,
};

const puppyRefs = objectToRefs(puppy);
// puppyRefs.name 类型为 Ref<string>，puppyRefs.age 类型为 Ref<number>

这个实现的核心优势：

• 完全保留原对象的类型信息，TS会自动推导每个ref的类型
• 支持任意结构的普通对象，无需手动逐个定义ref
• 转换后的每个属性都是独立的响应式ref

2. 利用Vue内置的toRefs（适配响应式对象） #

如果你的原始对象是通过reactive创建的响应式对象，直接使用Vue内置的toRefs即可，它会自动将响应式对象的每个属性转为对应ref，且保持类型安全：

import { reactive, toRefs } from 'vue';

interface Dog {
  name: string;
  age: number;
}

const puppy = reactive<Dog>({
  name: 'Snoop',
  age: 2,
});

const puppyRefs = toRefs(puppy);
// puppyRefs.name 类型为 Ref<string>，puppyRefs.age 类型为 Ref<number>

注意：toRefs仅对响应式对象生效，如果传入普通对象，它不会将属性转为响应式，只是创建属性的引用，这时候建议用第一种自定义函数。

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