fix(helpers): useCssVars race condition (fix #9264) #9368
Conversation
| const ob = new MutationObserver(setVars) | ||
| ob.observe(instance.subTree.el!.parentNode, { childList: true }) | ||
| onUnmounted(() => ob.disconnect()) | ||
| if (instance.subTree.el?.parentNode) { |
There was a problem hiding this comment.
This modification can only solve the error report, but it does not solve the conflict between the execution of side-effect functions. From the example given by posva, we can see that the order of life cycle execution is not as expected. Unless we understand that this phenomenon is due to a side effect, causing the icon component to be unmounted first and then mounted again, so I am not sure whether this PR really solves the problem.
https://deploy-preview-9368--vue-sfc-playground.netlify.app/#eNqFVMlu2zAQ/RVWh1gGFOmQm+sEbdIUSIG2QZ3edGGkkaKEIgUusgNB/94hqS3OUh8scpY3j7N1wdemiVsDwSbYqkxWjSYKtGkIo7w8TwOt0uAi5VXdCKlJRyQUEdlTnT2QnhRS1CQN0D0NPk9GN5ngoypO7M0GWFp0xCi4MkqLeqeFhBkqTpwgtmHRPuXorZCSszo/cgvXCxMJtdDwjWqKdsgy7HqvdmTDlBMSrsn5hceK76mMZllnj4RYJMEgZqIMV5Odfy7I1dpbzZHiljJjeXHDGAYjpHegSUL2Qj5RKQzPN4OkIwUz6mFDVo1QekX6lHuCKS8Mz3SFWdOiLBl8FwJpOU6eRCEEBvk0XdANvVO+TXzJsEB40VA3jGrAGyHbe6M1In7JWJU92UKO0FjPO3cmNk7XLWL0/XqbeEcPkletO+DRVbU9rQrEmj1OThbpSAOSeL/EO26TBacgwmZCkKIq40clOHace2IaZKJuKgbyd2OTgJXfjAVJA8qY2P9wMi0NuPQ6nwfInt6QP6qDlaXBrQQFssW+m3SayhK0V1/vfsEBz5OyFrlhaP2B8g9gdxjL0ZtdYnWR9sLOsb1xTV7x8k5dHzRwNT7KEp2bxM3N1QdPn+mexWfOD8uOWRwn6nhkL1L55qBGRPBLKLBkf3mNHamt4Kc9QP5qiBEih6LicCtFo8LOCuxgMCEtNXcjRD83sCE7LfGV0ShEP2qYxgZHUjVWeDWo8L34teOInyMu4TiAQ5zFALqOOzLHGXRQ9t+jDQ/5P85guESY52eAW8yQw9mqhnKSMaoUtn2xP60QCwcIHVHhjJY9PqIo/Yzjhc3eQO6k8eA683P5bE/vK56H7uaz07+w3uQATaja0m4D51hUjL3rh6xsYBcR+2TcpNgnU1dAUUCmd5ZZhC1Cce207vTuVh/eBAeHMG2q4028zLwewuDOWsQLp6LZFaqN5IM2loa/LN8I4/eeXeYFZQr8U2e13c1ebffvrPUbH52jab0PmuMVDy6GbwmvR8xpq3cuq1Y69C5O5SAYHjBmcJwT+7NxX+C9AvHN1wf9P+Zbib0=
There was a problem hiding this comment.
I agree I didn't dive into the root cause of the reversed order of the hooks
|
thanks for the PR but this is not the proper fix. |
close #9264
Observations
It seems that the issue happens when there is a mount and directly unmount of the component
I noticed with the reproduction envs, that if I add an
onBeforeUnmounthook, it's triggered before theonMountedwhich explains why theparentNodeisundefinedthus the errorI think checking the
parentNodeto be defined is enough, another solution might be to track thebeforeUnmounthook and avoid plugging the observer