时间戳

首页 > 解决方案 > 组件“mounted”在页面加载时触发两次

vue.js - 组件“mounted”在页面加载时触发两次

问题描述

我有一个非常奇怪的错误，在页面加载组件mounted并beforeMount触发/运行两次？我的每个组件都代表一个页面，所以当我在mywebsite.com/contact函数Contact.vue上加载页面mounted并beforeMount触发/运行两次但如果我在mywebsite.com/foo函数Contact.vue上加载页面mounted并beforeMount触发/运行一次（这是我认为的？应该发生）。

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

router/index.js：

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

页面.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>

联系方式：

<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>

标签： vue.jsvuejs2vue-componentvue-router

解决方案

我有（有）一个类似的问题。我对此不是 100% 确定，但我认为这个问题可能是由vuex. Vuex有它自己的内部实例Vue（在此处调用的resetStoreVM()函数constructor()中创建）。我怀疑这个内部实例Vue会导致重新创建某些组件，这反过来又会触发这些组件的生命周期事件多次触发。

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

推荐阅读