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: ''
}