vue3 - 使用reactive定义响应式数据进行数据修改赋值时，数据更新但视图不更新

问题：

在uniapp-vue3的项目中，使用reactive定义了一个数组，之后使用foreach对item的某个属性进行重新赋值，但经过console数据显示已经赋上值了，但是视图一直不更新，包括尝试nextTick(()=>{})和internalInstance.ctx.$forceUpdate()方法都无效。

分析：

查看了官网文档，发现了这里（响应式基础 | Vue.js (vuejs.org)），注意第二条

reactive函数会返回一个Proxy包装的对象，所以直接赋值一个数组时会使定义的变量失去响应式。

let userInfo = reactive([{name:'hanmeimei',age:12}])
console.log(userInfo) // Proxy(Array) 打印出来是一个Proxy对象 当然具备响应式 
userInfo =[{name:'zhangsan',age:18},{name:'lisi,age:10}]// 直接后端数据进行赋值
console.log(userInfo)  //[{name:'zhangsan',age:18},{name:'lisi,age:10}] 可以看出 就是打印出了一个普通的数组 所以不具备响应式

所以对于reactive创建的响应式数据应该避免直接使用=号进行赋值；会覆盖响应式;

 解决方案：

1、在封装一层数据，例如：

<script setup>
import { reactive, ref } from "vue";
// 定义响应式 
let choosenList = reactive({list:[]});
// 请求的数据
let newList1 = [
  { name: "Eula", age: "18", isActive: false },
  { name: "Umbra", age: "17", isActive: false },
]
// 更改数据
const setList = () => {
  choosenList.list= newList1
}
</script>

2、使用数组的splice来直接更改原数组

还是用reactive来定义响应式数据，只不过改数据的方式变了，使用数组的原生方法splice()来更改原数组，不是直接覆盖所以并不会影响响应式；

可改变原数组的原生方法还有push、unshift、pop、shift、reverse、sort、splice、fill

<script setup>
import { reactive, ref } from "vue";
// 定义响应式 
let list1 = reactive([]);

// 请求的数据
let newList1 = [
  { name: "Eula", age: "18", isActive: false },
  { name: "Umbra", age: "17", isActive: false },
]

// 更改数据
const setList1 = () => {
  // splice三个参数时 第一项是起始索引  第二项是长度  第三项是新插入的元素,可以有多个
  list1.splice(0,list1.length,...newList1)
}
</script>

3、使用 ref 来定义数据

复杂数据类型也可以使用ref进行定义，而且数据都是响应式的；原理就有点像第一种方式，重新包装了一层value；每次使用的时候都要写.value;

ref实际就是对一个普通值做了一层包装，包装成一个对象，并通过其get和set实现依赖收集和更新,其实现原理类似于computed;

<script setup>
import { reactive, ref } from "vue";
// 定义响应式
let list1 = ref([]);

// 请求的数据
let newList1 = [
  { name: "Eula", age: "18", isActive: false },
  { name: "Umbra", age: "17", isActive: false },
]

// 更改数据
const setList1 = () => {
  list1.value = newList1;
}
</script>

 

let userInfo =reactive([{name:'Eula'}])