vue数据监听踩坑记录

平时用vue写代码时，因为vue自带的监听机制，让我们能在修改页面数据时直接更新页面，但是偶尔会出现无法监听到的情况。

例如：

// 获取报表
        public async getChannelList() {
            this.channelList = await getChannels();
            this.channelList.forEach(item => {
                item.isSelected = false
            })
        }

我们在这里需要获取 channelList，然后在后面给每一个item一个isSelected的属性。但是在使用过程中出现了数据已经更新但是页面无响应的情况

如图，我这里把第二个数据的isSelected变成了true，但是在页面显示还是false。
一开始我以为是数据页面异步的原因，所以我使用了 nextTick 以及 $set 去做数据绑定，但是仍然无法解决。

—————————————————————————————————

原因

vue在初始化的时候会深度遍历我们的数据（面试经常背的内容就不多赘述了）当我们第一步给页面数据赋值的时候，实际上vue已经做了各个属性的监听，导致我们第二步需要给页面数据添加属性时，vue没有监听到isSelected这个属性。

解决办法

1.如果是页面初始化数据，将所有初始属性写出来，让vue监听到所有属性
2

public async getChannelList() {
            let data:any = await getChannels();
            data.forEach(item => {
                item.isSelected = false
            });
            this.channelList = JSON.parse(JSON.stringify(data))
        }

首先用一个空的data去接住我们拿出来的数据，然后操作这个data新创建我们需要的其他属性，最后深拷贝一次性赋值给我们实际页面上渲染的数组对象。

总结

代码不规范，头发剩两行。