Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
1.91k stars 85 forks source link

The Lifecycle Hooks is out of order after v3.9.0 #697

Open jackywongmm opened 1 month ago

jackywongmm commented 1 month ago

Describe the bug

image

  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

jackywongmm commented 1 month ago

image This is the component structure

jackywongmm commented 1 month ago

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

jackywongmm commented 1 month ago

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

alvarosabu commented 1 month ago

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

jackywongmm commented 1 month ago

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 commented 1 month ago

When I tested LifeCycle of Vue framework and Tresjs framework, I got confused! The normal Vue framework when router changed should be LifeCycle 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

https://github.com/Tresjs/tres/assets/59913119/b787f5c6-e0a7-44ec-83b9-5d651a7da649

alvarosabu commented 2 days ago

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 commented 2 days ago

@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 commented 1 day ago

@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