在映射元素的计算项上拼接答案

【问题标题】：Splice on computed item that maps elements在映射元素的计算项上拼接
【发布时间】：2021-11-11 13:09:28
【问题描述】：

我想确保数组中的所有对象都是Item 类型。如果我这样做，splice 以后将不再工作。

我就是这样做的：

computedItems: {
    get()
    {
        //return this.modelValue;
        return this.modelValue?.map((item) => new Item(item));
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}

这很好用，但它似乎破坏了反应性，因为：

removeItem(item) {
    let key = this.computedItems.findIndex((i) => {
        return item === i;
    });

    this.computedItems.splice(key, 1);
}

不起作用（没有错误，只是没有更新列表）。

如果我这样做

computedItems: {
    get()
    {
        return this.modelValue;
    },
    set(newValue)
    {
        this.$emit("update:modelValue", newValue);
    }
}

拼接确实按预期工作（但项目未映射到特定对象）。

我的问题：

我该如何解决？
为什么会这样？在计算的 setter 中映射是不是一个坏主意？

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

我不确定它为什么会发生，也无法很好地解释它。

数组和对象保存在内存中。所以它是一个指向记忆的指针。指针没有改变，没有任何反应。（头痛）

你能试试这个代码吗：

removeItem(item) {

    const newArray = [...this.computedItems];
    let key = newArray.findIndex(i => item === i);

    newArray.splice(key, 1);

    this.computedItems = newArray;
}

【讨论】：