Skip to content

the usage of tryOnMounted inside the composables is causing issues. #3723

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

Closed
7 tasks done
Garine519 opened this issue Jan 15, 2024 · 1 comment
Closed
7 tasks done

Comments

@Garine519
Copy link

Garine519 commented Jan 15, 2024

Describe the bug

I recently updated vueUse to the latest version and noticed the tryOnMounted hook was added inside couple of the composables. The issue that I have is that when I try to change my route hash (which triggers an 'beforeUpdateandupdated` lifecycle hook, it's getting into the method and intervening with my logic.

for example. inside useScroll, it's not updating my y.value. (unless I wrap it within a setTimeout). [waiting after tryOnMounted to be executed]

Screenshot 2024-01-15 at 4 01 02 PM

inside useElementSize its setting the width and height again, which is triggering a watcher I have inside the component on every route hash change.

I would suggest passing an option to the composables to disable the tryOnMounted hook. or reconsider using it all together within some of the composables.

Reproduction

https://github.com/vueuse/vueuse/blob/main/packages/shared/tryOnMounted/index.ts

System Info

System:
    OS: macOS 14.2.1
    CPU: (10) x64 Apple M1 Pro
    Memory: 28.47 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Brave Browser: 105.1.43.93
    Chrome: 120.0.6099.216
    Chrome Canary: 122.0.6249.1
    Firefox: 114.0.2
    Safari: 17.2.1
  npmPackages:
    @vueuse/components: ^10.7.1 => 10.7.1 
    @vueuse/core: ^10.7.1 => 10.7.1 
    vue: ^3.4.7 => 3.4.7 

npm notice 
npm notice New major version of npm available! 9.5.1 -> 10.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.3.0
npm notice Run npm install -g npm@10.3.0 to update!
npm notice

Used Package Manager

pnpm

Validations

@Doctor-wu
Copy link
Member

I believe tryOnMounted was added to that composables are reasonable cause those functions like useElementSize or useScroll are indeed need to get/set dom

@ilyaliao ilyaliao closed this as not planned Won't fix, can't repro, duplicate, stale May 29, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

No branches or pull requests

3 participants