Templates rendering multiple times

[twistmala]

Hi,

I've noticed that templates are rendering a lot of times. Right after I posted this problem quasarframework/quasar-ui-qcalendar#433, I tried to add console.log() to another template not related to quasar component and I found out that the problem is probably not in the quasarframework / calendar component.

Can you take a look at the above problem that I documented and explain to me whether this is normal behaviour?

I've read the official documentation, but I still don't understand why a certain component that is already on the screen would be rendered so many times just because the screen size has changed, or you've done a scroll up/down.

In case the templates are rendering on every move, I will need to reorder the data so that as little logic as possible is executed on render. Or maybe I've configured the app wrong. If necessary, I will add how the application is configured.

Thank you in advance :)

[marcosgomesneto]

This appears to be an issue unique to Quasar's QCalendar extension and has nothing to do with VueJS. I tested it and everything went fine for me.

VueJS does not rerender/remount just because of a scroll, unless the scroll is linked to some logic from some extension or plugin that changes some state.

Other reasons for re-rendering:

Data Changes: When the data properties of a component change, Vue automatically triggers a re-render to reflect the updated state.

Computed Properties: If a computed property depends on some reactive data and that data changes, the computed property will be reevaluated, leading to a re-render.

Watchers: Vue allows you to watch for changes on a particular piece of data and perform custom logic when that data changes. If the watched data changes, it can trigger a re-render.

Parent-Child Component Communication: If a parent component passes updated data to a child component through props, changes in that data can trigger a re-render of the child component.

Event Handling: When an event is emitted from a child component and caught by a parent component, it may result in a re-render if the event handler modifies data.

Directives: Certain directives, like v-if and v-for, can cause components to be added or removed from the DOM, leading to a re-render.