vue3 - 使用reactive定义响应式数据进行列表赋值时，视图没有更新的解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 - 使用reactive定义响应式数据进行列表赋值时，视图没有更新的解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1，问题

在Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候，当是一个数组或对象时，我们直接进行赋值，发现数据已经修改成功，但是页⾯并没有自动渲染成最新的数据；这是为什么呢？

就如同官网所说的reactive存在一些局限性：（官方的描述）

vue3 - 使用reactive定义响应式数据进行列表赋值时，视图没有更新的解决方案,vue.js,javascript,前端

2，原因

原因就是reactive函数会返回一个Proxy包装的对象，所以当我们这样直接赋值时：（看下面例子）

import { reactive } from "vue";

let userInfo = reactive([{name:'Eula'}]) 
console.log(userInfo) // Proxy(Array) 打印出来是一个Proxy对象 当然具备响应式

// 直接后端数据进行赋值
userInfo = [{name:'优菈'}]
console.log(userInfo)  // [{name:'优菈'}] 可以看出 就是打印出了一个普通的数组 所以不具备响应式

这样赋值的话，就会把Proxy对象给覆盖掉，从而无法触发对应的set和get，最终就会导致丢失掉响应性了；

上面的代码 reactive([{name:'Eula'}]) 创建了一个响应式数组，返回一个Proxy包装的对象由userInfo变量进行存放，但是后面我又把一个普通的数组（也就是后端返回的数据）赋值给userInfo，注意这时userInfo这个变量存放的已经是一个普通的数组了，当然也就不具备响应式了；

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

3，解决方案

一、再封装一层数据，即定义属性名，在后期赋值的时候，对此属性进行直接赋值

再封装一层数据，注意myRenderList 这个属性就是新增的属性用来存放列表数据，就是比较麻烦了一些。

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

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

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

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

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

splice有三个参数时，可以对数组进行修改，第一项是起始索引，第二项是长度，第三项是新插入的元素，可以有多个；

下面的代码是把之前数组的每一项删除掉，然后插入新的数据newList1，使用...扩展符进行展开每一项；

 list1.splice(0,list1.length,...newList1)

当然，push()方法也是可以触发响应式的，只不过只能在后面新增数据。还有pop，shift，unshift等方法（用的不多）

<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>

三、使用 ref 来定义数据

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

ref实际就是对一个普通值做了一层包装，包装成一个对象，并通过其get和set实现依赖收集和更新,其实现原理类似于computed;文章来源地址https://www.toymoban.com/news/detail-638012.html

<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>