The Lifecycle Hooks is out of order after v3.9.0

[jackywongmm]

Describe the bug

1. Why does the uninstallation sequence not follow vue3
2. Why does the subcomponent under Scene load again after unloading when I switch routes to a non-TRES page
   It will also appear in other versions

Reproduction

N

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[jackywongmm]

This is the component structure

[jackywongmm]

After my testing, I found that it happened in other versions after 3.9.0

[jackywongmm]

Only Scene will have the onUnmounted hook, child components will not trigger the onUnmounted hook.

[alvarosabu]

Hi @jackywongmm please add a minimal reproduction link? https://antfu.me/posts/why-reproductions-are-required

[jackywongmm]

Hi @jackywongmm please add a minimal reproduction link? https://antfu.me/posts/why-reproductions-are-required

https://stackblitz.com/edit/stackblitz-starters-uyd9qn?file=src%2Fviews%2FnormalView.vue
I tested the same thing with the latest version 4.0.1, where the subcomponents are unloaded and reloaded when the route is switched

[hexianWeb]

When I tested LifeCycle of Vue framework and Tresjs framework, I got confused! The normal Vue framework when router changed should be

But when I tested the LifeCycle of the Tresjs framework parent-child component during a Router Change, it turned out like this.

The subcomponent triggers the onMounted life cycle again after being unmounted. This confuses me. And the mounting order of Parent-Child components is different from VUE. Is there a reasonable explanation for this?
Reproduction For Tresjs LifeCycle
https://stackblitz.com/github/hexianWeb/tresjs-playground

bandicam.2024-06-05.21-43-46-771.mp4

[alvarosabu]

Is there a reasonable explanation for this?

It might be on how we are removing nodes on the custom renderer https://github.com/Tresjs/tres/blob/0d2767f3b832385e59926bc38b8e5d7dbabb1e4a/src/core/nodeOps.ts#L134C1-L174C4 but not entirely sure

@andretchen0 what are your thoughts 💭?

[andretchen0]

@alvarosabu

Off the cuff, I don't think there's anything in the current remove that would cause a remount of a removed element. My guess is that that problem is elsewhere.

For me, the route is a complicating factor. Does the problem here manifest without a route change? E.g., with a simple v-if?

In passing, I tried, but can't currently run this: https://stackblitz.com/~/github.com/hexianWeb/tresjs-playground

[hexianWeb]

@alvarosabu

Off the cuff, I don't think there's anything in the current remove that would cause a remount of a removed element. My guess is that that problem is elsewhere.

For me, the route is a complicating factor. Does the problem here manifest without a route change? E.g., with a simple v-if?

In passing, I tried, but can't currently run this: https://stackblitz.com/~/github.com/hexianWeb/tresjs-playground

Sorry for the late response, I built another simple demo with v-if to check the lifecycle. The
Lifecycle is executed correctly. I will confirm the real cause of the problem.
Stackblitz ： lifeCycle with v-if

[dghez]

MAYBE related to #796 ?

[alvarosabu]

Hi @hexianWeb could you check if it's fixed in the latest version of the package, the fix of #796 might solve the issue