vue3数组或对象赋值不更新解决方法示例
作者：清儿
这篇文章主要为大家介绍了vue3数组或对象赋值不更新解决方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
正文
vue3 使用proxy，对于对象和数组都不能直接整个赋。具体原因：reactive声明的响应式对象被 arr 代理，操作代理对象需要有代理对象的前缀，直接覆盖会丢失响应式。
数组赋值
// 方案1：创建一个响应式对象，对象的属性是数组
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
// 方案2: 使用 ref 函数
const state = ref([])
state.value = [1, 2, 3]
// 方案3: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])对象赋值
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// 直接赋值检测不到，因为响应式的是它的属性，而不是它自身
// 方法1: 单个赋值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：创建响应式对象
let obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
obj.data = {
name: 'lisi'
age: ''
}以上就是vue3数组或对象赋值不更新解决方法示例的详细内容，更多关于vue3数组对象赋值更新的资料请关注脚本之家其它相关文章！