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'}])