问题:
在Vue 3.0 中我们使用 reactive()
定义的响应式数据的时候,当是一个数组或对象时,我们直接进行赋值,发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据;这是为什么呢?
就如同官网所说的reactive存在一些局限性
:(官方的描述)
原因:
原因就是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
创建的响应式数据应该避免直接使用=
号进行赋值;会覆盖响应式;
解决方案:
一、再封装一层数据,即定义属性名,在后期赋值的时候,对此属性进行直接赋值
再封装一层数据,注意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;
<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>