vue3中在响应式对象中添加属性，或在响应数组中添加属性

在遇到这个问题时，我一直没办法解决，我分享一下我的解决办法，

async function addNewProperty(obj,newProperty,newValue) {

  //确保对象是响应式的

  if(!obj.isReactive){

      obj = ref(obj);

  }

  //添加新属性

   obj.value[newProperty] = newValue;

}

第一个参数是响应对象,第二个参数是新属性的名字(比如image)，第三个参数是新属性的值

下面是我写的完整版的代码

async function addNewProperty(obj,newProperty,newValue) {

  //确保对象是响应式的

  if(!obj.isReactive){

      obj = ref(obj);

  }

  //添加新属性

   obj.value[newProperty] = newValue;

}

let Imglist = ['https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251928_35fb2880108e9aa56fdcf7f894249f26.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202310251937_a4ac1ae382a402426beb915f401e50e5.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200030_9a6a9bf107f4b4a7a25e4ccedf0c1174.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200034_b724e1ddef5a0bf5c79c273193b7073c.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309200032_5beee8420f9734b24d538e68e5c655ac.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308111609_92d3c7105793aed5afd3e609132840c9.jpg?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308122142_7e259a200b6aaec5a2c0445a665e38c3.png?thumb=1&w=250&h=250&f=webp&q=90',

'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202308081914_12255c6dc58e78e32afe9665b13fbaaa.png?thumb=1&w=250&h=250&f=webp&q=90']

let list = ref([])

const GetList = async() =>{

      const {data} = await getList()

      list.value = data

      for(var i=0;i<list.value.length;i++){

        const newValue = Imglist[i]

        addNewProperty(list.value[i],'image',newValue)

       

   }

}