search

vue-final / vue-final-modal

🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
https://vue-final-modal.org
MIT License
864 stars 95 forks source link

WATCH_ARRAY in @vue/compat is triggered by CoreModal.vue #390

Closed codepainters closed 7 months ago

codepainters commented 9 months ago

Version

vue-final-modal: 4.4.5 vue: 3.3.4 @vue/compat: 3.3.4

What is Expected?

Warning-free execution.

What is actually happening?

This calll to watch() triggers a warning from @vue/compat: https://github.com/vue-final/vue-final-modal/blob/ef209434484efae9f9bfea48ac151a64395125c8/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue#L133-L136

Actually the warning is legit, as far as I udnerstand the Vue docs:

When you call watch() directly on a reactive object, it will implicitly create a deep watcher - the callback will be triggered on all nested mutations. This should be differentiated with a getter that returns a reactive object - in the latter case, the callback will only fire if the getter returns a different object.

hunterliu1003 commented 7 months ago

@codepainters I am not familiar of what is @vue/compat doing. Can you provide a minimal reproduction?

codepainters commented 7 months ago

Basically @vue/compat shows warnings for anything that might need taking care of when transitioning from Vue 2 to Vue 3 (which is what we are doing now).

I'll try to find some time to isolate it.

joonas-erho commented 3 months ago

@hunterliu1003 This issue persists in version 4.5.4 when using @vue/compat. I believe it could be fixed by adding the deep: true property to the watcher in question.