Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(runtime-core): export queuePostFlushCb #1078

Merged
merged 2 commits into from
Apr 30, 2020
Merged

feat(runtime-core): export queuePostFlushCb #1078

merged 2 commits into from
Apr 30, 2020

Conversation

basvanmeurs
Copy link
Contributor

In some cases (such as the Vugel renderer), action needs to be taken immediately after a patch. nextTick could be used. But the danger is that application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.

Our use case
In the case of Vugel, we use Vue3 with the custom renderer api to render on tree2d nodes. Three2d uses a render tree with children stored in arrays rather than linked list (HTML DOM). This causes O(n*n) complexity when adding new elements to a v-for. It leads to bad performance in some cases, when using a lot of items in a v-for. This is caused by the facts that vue iterates all items from the start, and when inserting new items one by one at the start of the array it will have to be copied over and over. We had a (very heavy, 10'000 item) case where an update took 1 second.

After our fix it went down to 60ms. We deferred the synchronisation between Vugel and tree2d until after all child operations (per parent node) have been done. One problem we had is that we can't tell which operation (appendChild, insertBefore, removeChild, clearChildren) operation is the final one. So we wait until a new parent is encountered (vue patches the list items until traversing into the children).

This allows us to sync all nodes properly except for the last encountered one. Because we have no way of telling when the complete patch was done. For this reason, we sync the last encountered parent using nextTick(). https://github.com/Planning-nl/vugel/blob/master/src/runtime/nodes/Base.ts#L132

But the danger is that application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.

basvanmeurs and others added 2 commits April 29, 2020 11:51
In some cases (such as the Vugel renderer), action needs to be taken immediately after a patch. nextTick could be used but application callbacks could be scheduled before it. queuePostFlushCb allows us to implement a more 'integrated' and less error-prone mechanism.
@yyx990803 yyx990803 merged commit ba240eb into vuejs:master Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants