Vue3反应性奇怪的行为

如何解决Vue3反应性奇怪的行为

我正在学习 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   
        }; 
    }

解决方法

看起来 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] 对象中被触发