如何通过动态引用修改Vue响应式属性？需兼容TypeScript

当然可以实现这个需求，下面是具体的解决方案，同时兼容TypeScript：

核心思路 #

你当前的问题在于单独定义的ref变量无法通过字符串键名动态访问，所以需要把这些响应式变量整合到一个对象中，这样就能通过键名索引来匹配并更新对应属性。

完整实现代码 #

import { ref, Ref } from 'vue';

// 1. 将所有响应式属性整合到一个对象中
const state = {
  page: ref('1'),
  item: ref('1'),
  product: ref('ok'),
  note: ref(5)
};

// 2. 定义TypeScript类型，确保类型安全
type State = typeof state;
// 定义更新 payload 类型：键为State的键，值为对应ref的value类型
type UpdatePayload = Partial<{
  [K in keyof State]: State[K]['value']
}>;

// 3. 实现update函数
const update = (object: UpdatePayload) => {
  const properties: Array<keyof State> = ['page', 'item', 'product', 'note'];

  properties.forEach(prop => {
    if (prop in object) {
      // 通过对象索引访问对应ref，更新其value属性
      state[prop].value = object[prop] as State[keyof State]['value'];
    }
  });
};

// 调用示例
const updateObject = {
  note: 10, // 这里如果传字符串会触发TS类型报错，符合类型要求
  page: '2'
};
update(updateObject);

关键说明 #

• 整合响应式属性：把单独的ref变量放到state对象中，是为了能通过prop字符串键动态访问到对应的响应式引用，这是动态更新的基础。
• TypeScript类型保障：通过UpdatePayload类型限制了传入对象的键只能是指定的属性名，且值的类型必须与对应响应式属性的类型匹配，避免类型错误。
• ref的赋值规则：因为ref包装后的变量需要通过.value访问和修改值，所以更新时必须操作state[prop].value。

另一种可选方案（使用reactive） #

如果一开始就用reactive定义响应式对象，代码会更简洁：

import { reactive } from 'vue';

const state = reactive({
  page: '1',
  item: '1',
  product: 'ok',
  note: 5
});

type State = typeof state;
type UpdatePayload = Partial<State>;

const update = (object: UpdatePayload) => {
  const properties: Array<keyof State> = ['page', 'item', 'product', 'note'];
  
  properties.forEach(prop => {
    if (prop in object) {
      state[prop] = object[prop] as State[keyof State];
    }
  });
};

这种方式不需要手动处理.value，因为reactive的属性是直接可读写的。

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