vue3 数组项是对象，解决修改数组某一项数据视图不更新问题

示例代码

<template>
  <section class="courseDetail">
    <p v-for="item in arr" :key="item.id">{{ item.obj.text }}</p>
  </section>
</template>
<script setup>
const arr = ref([]) // 显示的数据
const arr1 = ref([]) // 接口获取的数据
let arr2 = ref([])
const updateArr = (list) => {
  if (!list.value.length) {
    arr2.value = []
  } else {
    arr2.value = list.value.map(item => {
      return {
        ...item,
        val: 1
      }
    })
  }
  
}
const timer = setTimeout(() => {
  arr1.value = [
    {id:1, name: '数据1', obj: {val:1,text:'1'}},
    {id:2, name: '数据2', obj: {val:1,text:'1'}}
  ]
  updateArr(arr1)
  arr.value = arr2.value
  clearTimeout(timer)
}, 1000)

const timer2 = setTimeout(() => {
  arr2.value[0].obj = {val:2,text:'2'}
  updateArr(arr2)
  console.log('arr2-2',arr2.value)
  console.log('arr', arr.value)
  clearTimeout(timer2)
}, 4000)
</script>