Fix dom not change while data change

[miyagipipi]

When my data object changes (such as the state of an item affecting a button color), I find that dom actually hasn't changed. I analyzed the source code and found that the code shown below caused the dom rendering delay issue due to setTimeout.

index.vue line 313 watch( () => props.data, (newVal, oldVal) => { ... setTimeout(scrollRender, 0); } );

I changed this to directly run scrollRender() instead of run setTimeout, and DOM promptly rendered the latest item state.

Why use setTimeout here? The code in the scrollRender function not needs to wait a period of time before running.

Because in other watch, scrollRender is directly called, and if it is necessary to perform certain tasks after updating the DOM, vue nextTick can also be used to replace setTimeout. If possible, I have a suggestion:

1. Modify scrollRender so that the renderEnd function for DOM operations is not placed in the scrollRender function.
2. In watch part, directly run scrollRender() , and then call await nextTick(renderEnd)

[drawcall]

Thank you very much, I have limited energy and can submit a PR.

[ryrhjf]

你好，想请问一下可以详细的说一下解决方案吗？在项目里不知如何解决。

[miyagipipi]

你好，想请问一下可以详细的说一下解决方案吗？在项目里不知如何解决。 源码的 index.vue 313 行 setTimeout(scrollRender, 0) 改为直接运行 scrollRender() 就能解决。 如果你的实际业务涉及到 renderEnd 函数相关的事件，就将它从 scrollRender 函数中抽出来，执行 await nextTick(renderEnd)。