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

[SanGo]

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

[jorneyr]

试试 throttle 或者 debounce 进行节流，避免频繁更新，可以使用 underscore 或者 lodash 的实现，也可以自己实现这 2 个函数，参考 https://underscorejs.org/#throttle

[NaVient]

是你想的太复杂了把，这不就是更新数据先声明成临时变量，再循环去看页面数据和更新数据不同的地方，更新数据变更的项不就行了吗？

[clandyuki]

加上 key

[SanGo]

@jorneyr 是定时更新的，所以不用节流

[SanGo]

@NaVient 绑定的 data 发生变化，就会重新触发 v-for 去渲染导致闪烁
@clandyuki vfor 加 key 很常规啊。。。

[15651980765]

v-for 的时候绑定 key，值用数据的 id，不要用遍历的索引，这样可以保证数据变化后可以最大程度复用之前的 DOM。

[NaVient]

@SanGo #5 你不变更 data 整体，变更 data 的一个 index 不会触发的，VUE 内部是根据 key 去更新的

[shenyu1996]

是不是 data 更新前顺便赋了个 null

[TrickWu]

照理不会闪烁的，是根据 data 变化来触发视图更新，应该是你代码写的有问题

[Vegetable]

上代码吧兄弟

[cuzfinal]

这种引发列表重新渲染的肯定是用了不稳定 key，代码都不用看。

[no1xsyzy]

先复制一份然后尽可能缩，产生一份最小可复现样本。
如果如 #8 所言，或者类似地更新操作导致 data 暂时地不可用化，应该会在 console 里有报错，或者有 v-if="data"。
另外闪烁的样子录个 gif 吧，有可能甚至跟前端无关，是硬件跟不上也有可能。

[qiaobeier]

尝试闪烁的节点上加上 css 属性 transform: translateZ(0);

[f056917]

我的 key 都是 item.index，而且很少使用

[jorneyr]

代码那点破事真不是难事，码农更重要的是学会沟通，不要抱怨没人回答你的问题，
首先需要学会如何提问，其他人才能更好的理解你的问题。

如何有效地提问:
- 你做了什么，怎么做的
- 你查过什么资料，怎么说的
- 你是怎么设计的
- 贴出你的代码
- 编译错误是什么
- 代码截图，错误截图
- 结果有什么错，你期望的结果是什么
- 你是怎么想的

回答你的问题是情义，不理你是我的权力，没有人有义务要帮助你
你是在寻求帮助，态度好点，但也不要委屈自己

最后，如果你啥都不会，或者只会一点基础，不要期望我们告诉你怎么做

[sugars]

楼上正解，就提问者提供的信息，不够详情，无从下手（就这情况，更新时加了动画 css 也不是不可能）

[a852695]

能否贴个 GIF 和对应的部分代码，这样问题也好定位

[SanGo]

不知道 V2EX 怎么上图。。。

[SanGo]

我现在把这边的 key 改成了 index 了，依然会导致闪烁 Orz
https://s2.ax1x.com/2019/07/05/ZawEy4.png

[SanGo]

@sugars css 没加=-=。。