페이지 로드 시 컴포넌트 '마운트'가 두 번 발생합니다.

페이지 로드 시 컴포넌트 '마운트'가 두 번 발생합니다.

페이지에서 컴포넌트를 로드하는 매우 이상한 오류가 발생했습니다.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
  },
]
})

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>

연락.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(여기서 작성된 함수는 에서 호출됩니다).제가 의심하는 것은 이 내부 사례가Vue는 일부 컴포넌트를 재작성하여 해당 컴포넌트의 라이프 사이클이벤트를 여러 번 트리거합니다.

에 없는 경우vuex, 여러 개의 instance를 만들고 있을 가능성이 있습니까?Vue(즉,new Vue({})앱에 저장해당신의 앱에?또는 프라이머리의 원인이 되는 코드가 있습니까?Vue인스턴스 또는Contact컴포넌트를 여러 번 초기화해야 합니까?그게 원인이 될 수 있다는 생각뿐입니다.

언급URL : https://stackoverflow.com/questions/50046304/component-mounted-fires-twice-on-page-load