组件“mounted"在页面加载时触发两次 [英] Component `mounted` fires twice on page load

问题描述

我有一个非常奇怪的错误，页面加载组件 mounted 和 beforeMount 触发/运行两次?我的每个组件都代表一个页面，因此当我在 mywebsite.com/contact 上加载页面时，Contact.vue 函数 mounted 和 >beforeMount 触发/运行两次但如果我在 mywebsite.com/foo 上加载页面，Contact.vue 函数 mounted 和beforeMount 触发/运行一次(我认为这是应该发生的?).

I have a very weird error where on page load a components mounted and beforeMount fire/run twice? Each of my components represents a page, so when I load the page on mywebsite.com/contact the Contact.vue functions mounted and beforeMount fire/run twice but if I load the page on mywebsite.com/foo the Contact.vue functions mounted and beforeMount fire/run once (which is what I think? should happen).

知道为什么这些函数会执行两次吗?我有一些挑剔的设置，但它适用于动态模板.

Any idea why these functions would execute twice? I have a bit of finicky setup but it work nicely for dynamic templates.

router/index.js:

const router = new Router({
routes: [
  {
      path: (window.SETTINGS.ROOT || '') + '/:slug',
      name: 'Page',
      component: Page,
      props: true
  },
]
})

Page.vue:

<template>
  <component v-if="wp" :is="templateComponent" v-bind:wp="wp"></component>
  <p v-else>Loading...</p>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
import * as Templates from './templates'

// Map templates
let templateCmps = {}
_.each(Templates, cmp => {
  templateCmps[cmp.name] = cmp
})

export default {

props: ["slug"],

components: {
  ...templateCmps

  // Example:
  // 'default': Templates.Default,
  // 'contact': Templates.Contact,
  // 'home': Templates.Home,
},

computed: {
  ...mapGetters(['pageBySlug']),

  wp() {
    return this.pageBySlug(this.slug);
  },

  templateComponent() {
    let template = 'default' // assign default template

    if (!_.isNull(this.wp.template) && this.wp.template.length)
      template = this.wp.template.replace('.php','').toLowerCase()

    return template
  }
},

created() {
  this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>

Contact.vue:

<template>
    <main></main>
</template>

<script type="text/javascript">


export default {

    name: 'contact',

    mounted() {
      console.log('Contact::mounted') // this outputs twice
    },

    beforeMount() {
      console.log('Contact::beforeMount') // this outputs twice
    }
}

</script>

推荐答案

我遇到了类似的问题.我不是 100% 确定这一点，但我认为这个问题可能是由 vuex 引起的.Vuex 有它自己的 Vue 内部实例(创建了 此处 在 resetStoreVM() 函数 在 constructor()).我怀疑 Vue 的这个内部实例会导致一些组件被重新创建，进而触发这些组件的生命周期事件多次触发.

I had (have) a similar issue. I'm not 100% sure about this, but I think the issue may be caused by vuex. Vuex has it's own internal instance of Vue (created here in the resetStoreVM() function called in the constructor()). My suspicion is that this internal instance of Vue causes some components to be re-created, which in turn triggers the lifecycle events for those components to fire more than once.

如果不在 vuex 中，是否有可能您正在创建多个 Vue 的实例(即 new Vue({})>) 在您的应用程序中?或者，是否有一些代码导致您的主要 Vue 实例或 Contact 组件被初始化多次?这就是我能想到的所有可能导致这种情况的原因.

If not in vuex, is it possible that you're creating more than one instance of Vue (i.e. new Vue({})) in your app? Alternatively, is there some code that is causing your primary Vue instance or the Contact component to be initialized more than once? That's all I can think of that might cause this.

这篇关于组件“mounted"在页面加载时触发两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！