I have an ionic vue project. I had few unexpected behavior and I am suspecting that the watch() callbacks continue to be called on components that are not being shown (but still not destroyed due to the caching of pages in ionic).
Is this expected? If so, is there any design pattern to disable these watchers when the components are not being shown?
I would imagine they would continue to fire since the components are still active/in the DOM.
What are you using watchers for? Maybe there is a better way to handle what you are trying to do?
Off the top of my head, a possible solution would be to use the Ionic Lifecycle events to set a flag whether or not the page is visible and then within your watcher check the flag before running the logic. But, I would think there is a better design to not have to do this.
That is the workaround I have just implemented. It looks a bit messy and requires maintainence.
In my application, the elements consume a global reactive value and update. I am also thinking if we can design the logic in a different way.
In an Ionic app, can we just use plain vue router setup and router-views if we don’t want the cached pages behavior ?
Hmmm…for my app I am using Vuex and computed properties within my components to pull data from the store. I don’t seem to have any issues with this. Maybe you could try computed properties to pull from your global value instead of watchers?
I guess what type of unexpected behavior are you getting?
I would imagine you could use the plain Vue router setup but the whole reason Ionic keeps pages alive is so that the app feels more like a native app. It makes it more snappy as it doesn’t have to reload all the components on every page change.
In my app, I have designed assuming there will be only one consumer for the property change. Since in the plain Vue, the undisplayed components are automatically unmounted, there is indeed only one consumer for the property change at any point in time.
I went ahead and used the ion view enter hooks and build the logic. Now every thing works fine, but with some added logic 