Fix dom not change while data change

[miyagipipi]

trafficstars

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)