求助， vue 轮询请求更新数据渲染时闪烁

[SanGo]

我遇到一个问题，做一个监控平台，采用轮询请求更新 data，但是由于相关联的视图试用 vfor 渲染的，更新视图时会导致闪烁更新，搜过狗哥也没解决方案，还请大佬们指点一下

[SanGo]

@shenyu1996 data 更新前没有做赋值操作，初始渲染的时候是为空的不用管

[SanGo]

@no1xsyzy 更新的会这样 https://s2.ax1x.com/2019/07/05/ZawBp8.gif

[ytxbnahn]

更新数据时 你是不是先初始化了 data=[] 然后在重新赋值.@SanGo

[SanGo]

@ytxbnahn 没有，只有第一次加载的时候是有初始化的，更新的时候没有初始化 data，代码在附加的图里面

[wdspro]

@SanGo 楼上整理了三种可能
一个是你的 key 尽量不要用 index 用用其他的 ID 啥的 尽量减少重绘
二就是你取回新的 data 前是不是有初始化数组为[] 肯定就又完完整整重新渲染了两次 会闪烁
第三种就是有可能硬件有影响 数据量太大的时候 排除方式是最小化自己的数据量来例化测一下 楼上说的 transfromZ 也有可能
别着急问 先看看大家的回答 这么多楼了 你的 key 还没改试一下

[wdspro]

你的图里 第二个 for 循环里怎么有两个:key

[no1xsyzy]

https://stackoverflow.com/help/minimal-reproducible-example
https://stackoverflow.com/help/how-to-ask

[SanGo]

@wdspro 哦哦，现在第二个 for 现在改了，还是一样的
1.不用 key 的话用 item.id 这类的 key 也会因为 data 的对象导致更新
2.去会心的 data 前没有初始化数组
3.数据量在#22 的图有...非常少

[ASpiral]

点开第一张图就看到 :key="item.CtiNo + i"，key 不要用到 index …

[SanGo]

@jorneyr 设计和效果都上了附图了，附 1 是代码，附 2 和#22 是效果，
搜索过 data 更新闪烁，大多数都是说采用 v-cloak 来解决，但是我这里不是初始化的空白闪烁问题，是更新数据的异步闪烁 Orz，期望#22 的数据更新时不发生闪烁，该代码目标是实现监控组通话数量（数量还没绑定进去渲染），谢谢

[SanGo]

关于各位说到的 key 不要用到 index 的问题，现在已经改成了下图
https://s2.ax1x.com/2019/07/05/ZagvC9.png
也没有改变结果 Orz

[no1xsyzy]

res.Cti 的值是？
你还说没有先清空再添加？

[SanGo]

@no1xsyzy 直接赋值呀。。是个数组包对象

[no1xsyzy]

你用了两个接口去获取
一个 getCti 一个 getTrunk
你先把 getCti 的结果填充进去，然后再去获取的 getTrunk
我有理由相信 getCti 本身没有 Trunk 的信息，所以 Trunk 被清空了，然后又通过 watch 添加的，中间必然差至少一帧。

[no1xsyzy]

这个问题不管是开 vue debugger （浏览器插件）还是开 Network 选项卡都是可以轻易得知的。

[jorneyr]

看不出问题来，如果可能的话， 弄一个最小的测试案例，大家可以重现，然后才能去调试。
数据模拟生成就好，不用走服务器端

[SanGo]

@no1xsyzy 是的，是这个问题 Orz 所以难以处理这块

[no1xsyzy]

@SanGo 这难解决？请回炉重造（指程序员）。

[lhstock]

watch 监听 CTI 又修改 CTI 是作死

[SanGo]

@no1xsyzy 给多一个变量拿到 trunk 插入 cti 以后再直接替换是可以，但是感觉都是绕了一圈- -