Page elements mounted twice

[scriptPilot]

I took the Webpack template and added the following mixin to the main.js file:

// Add mixin to all Vue objects
Vue.mixin({
  mounted: function () {
    if (this.$el['_prevClass'] === 'page') {
      console.log(this.$el['_prevClass'])
    }
  }
})

The result is, that there are allways two logs after I open a page, e.g. "About" page. Is there any reason?

[scriptPilot]

PS: I just tested with older build, and the problem was not there before change on routing

[bencompton]

@scriptPilot - yes, that is odd. I notice that when I add a log to the about page itself, it only gets called once.

export default {  
  mounted() {
    console.log('About page mounted')
  }  
}

Looks like something weird going on, so I'll see what I can find.

[bencompton]

Still haven't figured it out yet, but here are a couple of observations:

• In the kitchen sink, when I add a console log to page.vue mounted, it only gets called once when I go to a page, whereas the mixin mounted function I added to the kitchen sink app.js gets called twice.

• When I set a breakpoint on the mixin mounted function, the component contained in this has a different _uid each time, but if I save this.$el in variables both times and do el1 === el2, it is the exact same element supposedly getting mounted by two components.

• It has the same behavior in Vue 2.1.8 and Vue 2.1.10

[bencompton]

Actually, it doesn't seem to have anything to do with the new routing code. For instance, when I go back to 3d3993f, I can still reproduce it (mixin mount called twice in the kitchen sink). I went all the way back to c940248 and still see that the mixin mount is called twice. It seems bizarre that it gets called twice, but from what I can tell, it has worked like that for quite some time.

@scriptPilot - can you verify what version you see the mixin mounted function get called only once?

[scriptPilot]

@bencompton - With release 0.7.8 it works fine - only one mounted() hook called

[bencompton]

@scriptPilot - from my tests, I have never been able to get it to only call mounted once from Vue.mixin.

I just tried again and was able to reproduce the two calls with the instructions in your original post, which ended up being 0.7.7. Here are the steps I took:

1. Cloned the Webpack Template
2. Ran npm install then npm ls framework7-vue and verified that the version was 0.7.7
3. Inserted the code you posted above into main.js
4. Ran npm run dev, clicked on the about page and observed two console logs of 'page'

So, I saw two calls happening in version 0.7.7, which was prior to PR #79 being merged (as is version 0.7.8). Earlier, I tested all the way back to version 0.6.x and never was able to reproduce mounted being called only once from Vue.mixin, although it only gets called once if I add a mounted function to the pages themselves.

It looks to me like the 2 calls from Vue.mixin has worked like that for a long time. Maybe I'm misunderstanding something or doing something differently than you are? Perhaps you could provide more specific steps to reproduce the single call? My tests were in Chrome on Windows and Safari on macOS.

Even if it has been that way for a long time, it is still strange that it gets called twice.

[scriptPilot]

@bencompton - You are right. I checked before if there is a $route object - it seems, the page is mounted twice, the second time with $route object - maybe this has changed now and it's there at the first mount as well.

preroute() will be called twice as well for each page load.

[nolimits4web]

Well, this took me a while to debug and find out the issue. So, actually it is not an issue and everything is correct.

For example:
Your about.vue component has the following template:

<template>
  <f7-page>...</f7-page>
</template>

This custom page component returns single component <f7-page> which renders as <div class="page">. In the same time <f7-page> component renders the same <div class="page"> element. So your about.vue custom component and <f7-page> component renders same element which is of course will be mounted twice: first time as the output of f7-page and second time as the output of your custom page.

So i can recommend not to rely on $el class in this case inside of mounted mixin

[bencompton]

@nolimits4web - yes, that makes perfect sense. Great work figuring that out!

[scriptPilot]

@nolimits4web - Thank you Vladimir, I change my if statement to:

this.$route !== undefined &&
this.$options._componentTag === undefined &&
this.$el._prevClass === 'page'

Works again!

Dennis