Vue3 反应性奇怪的行为答案

【问题标题】：Vue3 reactivity weird behaviorVue3 反应性奇怪的行为
【发布时间】：2021-09-09 10:38:00
【问题描述】：

我正在学习 vue3 反应系统，无法弄清楚以下奇怪的行为。这是我的代码。

setup(props) {
    let weekDay = props.weekDay;
    let taskState = reactive({
        [weekDay]: [[{
            description: '',
            status: '',
        }]],
    });
    function changeStatus(index, event) {
        let task = taskState[weekDay][index];  //works
        taskState[weekDay][index] = {
            ...task,
            status: event.target.value
        };
    }
    return {
      taskState,
      changeStatus
    }
}

反应性地更新状态看起来很有效，但是如果我像下面这样更改函数，这将不起作用。为什么会这样？对象 task 和 taskState[weekDay][index] 不是一样吗？

    function changeStatus(index, event) {
        let task = taskState[weekDay][index]; //not works
        task = { 
            ...task,                        
            status: event.target.value   
        }; 
    }

【问题讨论】：

我看到你在嵌套另一个数组[[{ description: '', status: '', }]]我想应该是[{ description: '', status: '', }]
@BoussadjraBrahim - taskState[weekDay][index] 在这两种情况下都是对象，而不是数组
它会给出类似[{ description: '', status: '', }]
@BoussadjraBrahim 没关系，问题是为什么我需要显式更新任务状态对象来触发反应性，而不是像任务一样与引用相同的另一个对象？
vuejs.org/v2/guide/reactivity.html#For-Arrays

标签： javascript javascript-objects vuejs3

【解决方案1】：

似乎 task 对象不是响应式对象，因为我们使用赋值来更改值到常规对象，并且对象 task 不再具有响应式父对象例如 taskState，因此没有附加 setter 并返回一个简单的值，而不是响应式代理

function changeStatus(index, event) {
    let task = taskState[weekDay][index]; //not works
    task = { 
        ...task,                        
        status: event.target.value   
    }; 
}

如果我们想让它工作，我们应该这样使用：

 function changeStatus(index, event) {
        let task = taskState[weekDay]; //works
        task[index] = { 
            ...task[index],                        
            status: event.target.value   
        }; 
    }

在这种情况下，task[index] 将是响应式的，setter 将在 taskState[weekDay] 对象中触发

【讨论】：