虚拟主机wordpress多站点,商标注册查询平台,单位网站建设ppt,o2o网站系统建设问题#xff1a; 在Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候#xff0c;当是一个数组或对象时#xff0c;我们直接进行赋值#xff0c;发现数据已经修改成功#xff0c;但是页⾯并没有自动渲染成最新的数据#xff1b;这是为什么呢#xff1f;
就如同官网…问题 在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()方法也是可以触发响应式的只不过只能在后面新增数据。还有popshiftunshift等方法用的不多
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
