vue中给数组添加新属性后当属性值变化时为什么页面没效果？

拿到请求接口数据后，给其中的config.list数组的每一项添加checked属性来控制当前导航是否选中，切换导航时修改checked的值：

data: function () {
    return {
        configList: [],
        menuList: [],   
        curType: null, 
        curMenu: 'coin',
    }
}

// res是接口返回值
if (res?.code == 0) {
    const config = res.data.config;

    this.configList = config; 
    // console.log(config);
    
    this.menuList = config.list.map(item => {
        if (item.name == this.curMenu) {
            item.checked = true;
            this.curType = item.type;
        } else {
            item.checked = false;
        }
        return item;
    });
}

// 切换导航
changeMenu(item) {
    if(item.type == this.curType) return; 
    this.menuList?.forEach(menu => {
        if (menu.type == item.type) {
            menu.checked = true;
            this.curType = item.type;
        } else {
            menu.checked = false;
        }
    })
},

这里的this.configList = config在后面没有用到，写的时候忘记删了，结果发现在切换导航时一直无法切换，打印出来发现数组中的checked是改变了，但是页面上没有效果。

打印config的值才知道，如果先把config赋值给data中的变量configList，config本身也会变成响应式的（多了getter和setter），所以后续给config里面的数组增加属性并要让该属性也成为响应式就需要用this.$set(item, 'checked', false)；

如果config不做赋值操作，它就仍然是一个普通对象，给它里面的list数组加上checked属性后也还是一个普通数组，只有赋值给data中的变量menuList时才会让config.list变成响应式。

修改：

// 第一种
if (res?.code == 0) {
    const config = res.data.config;
    // 先加属性再赋值
    this.menuList = config.list.map(item => {
        if (item.name == this.curMenu) {
            item.checked = true;
            this.curType = item.type;
        } else {
            item.checked = false;
        }
        return item;
    });
}

// 第二种 
if (res?.code == 0) {
    const config = res.data.config;
    // 先赋值变成响应式，通过this.$set()设置响应式属性值
    this.configList = config;
    this.menuList = config.list.map(item => {
        if (item.name == this.curMenu) {
            this.$set(item, 'checked', true);
            this.curType = item.type;
        } else {
            this.$set(item, 'checked', false);
        }
        return item;
    });
}