Vue 切换路由再切回后数据有误
发布于 3 年前 作者 huaer 1208 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

是这样的,我有一个页面是聊天界面,每次进入这个界面的时候系统会发送 【欢迎语】,然后有一个数组chatHistory 是存聊天记录的,界面会根据这个数组进行渲染。 如果我只停留在这个页面,那一切正常,但是我发现一旦我切换路由,比如点到首页 再点回去就出问题了,具体表现如下:
1、发现系统发送了欢迎语,但是界面上并没有显示
2、在mounted 方法里打印 chatHistory ,预期为[] 实际为[]
3、在接收系统欢迎语之后,插入chatHistory 之前打印 chatHistory ,预期为[] 实际为[{欢迎语}]
4、在接收系统欢迎语之后,插入chatHistory 之后打印 chatHistory ,预期为[{欢迎语}] 实际为[{欢迎语},{欢迎语}]
5、表现2和表现3,有累加的特性,我切出去切回来一次 chatHistory 的欢迎语数量会增加

这些表现看上去就像在我切出去切回来后,页面里有两个 chatHistory , mounted 里打印的、界面渲染的是chatHistory _a,然后插入欢迎语记录的是chatHistory _b 这个数组生命周期和页面不一致,它像是全局的,会一直往里插入。

结合以上于是我又试着在两处分别打印了 this ,发现在切换路由的过程中mounted中 this 的_uid是会变的,而插入聊天记录的地方 _uid 倒是一直不变

第一次进入一切正常

第二次进入数组里直接有了两条记录

第三次则直接有了3条

下面是部分代码(一次只能发5张所以合在一起了,见谅):

请问这会是什么原因导致的呢?有没有解决方案?

回到顶部