vue3 将响应式值作为入参时响应式丢失

   场景：我想将一个响应式数据作为入参，在方法里面通过区分不同的参数来修改对应的响应式数据，这样可以减少些重复的代码。就很自然想到了下面方法（错误）

let name =ref('张三') 
let age = ref('18')

//函数是通过值传递的，不是引用方式，这样方式行不通
function  setInfo(refName:any,value:any){
  console.log('refName',refName);
  refName.value = value
}



<template>
<div>
  <div>个人信息{{ name + "-"+ age }}</div>
  <div @click="setInfo(name,'李四')">点我list</div>
  <div @click="setInfo(age,'28')">修改person</div>
</div>
</template>

从上面打印信息来看，获取的值，而不是响应式数据，这样就不能修改了。

其实JavaScript中，函数的入参都是按值来传递的，不是按引用值。

修改方案：使用对象的方式来修改

import {ref,toRefs} from 'vue'
let info = ref({
  name:'张三',
  age:'18'
})
const {name,age}  = toRefs(info.value)
//通过对象索引的方式修改
function  setInfo(refName:string,value:any){
  console.log('refName',refName);
  info.value[refName]= value
}
</script>
<template>
<div>
  <div>个人信息{{ name + "-"+ age }}</div>
  <div @click="setInfo('name','李四')">点我list</div>
  <div @click="setInfo('age','28')">修改person</div>
</div>

• 将要处理的信息变为对象
• 处理函数入参为key，如上面的“name”