我有一个非常奇怪的错误,在页面加载组件@Entity
@Table(name = "CAMPOS_OBRIGATORIOS")
public class CamposObrigatorios {
@EmbeddedId
private CamposObrigatoriosID id;
@ManyToOne
@JoinColumn(name = "PERFIL_CMPOBR", referencedColumnName = "CODIGO_USRPERFIL")
@MapsId("perfil") // maps 'perfil' attribute of embedded id
private UsuarioPerfil usuarioPerfil;
...
}
和mounted
触发/运行两次?我的每个组件都代表一个页面,因此当我在beforeMount
上加载页面时,mywebsite.com/contact
函数Contact.vue
和mounted
会触发/运行两次但如果我在beforeMount
加载页面{1}} mywebsite.com/foo
函数Contact.vue
和mounted
触发/运行一次(这是我认为的?应该发生的事情。)
知道为什么这些函数会执行两次吗?我有一些挑剔的设置,但它适用于动态模板。
beforeMount
:
router/index.js
Page.vue:
const router = new Router({
routes: [
{
path: (window.SETTINGS.ROOT || '') + '/:slug',
name: 'Page',
component: Page,
props: true
},
]
})
Contact.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>
答案 0 :(得分:1)
我有一个类似的问题。我对此不太确定,但我认为该问题可能是由vuex
引起的。 Vuex
有自己的Vue
内部实例(在here中调用的resetStoreVM()
function中创建了constructor()
)。我怀疑Vue
的内部实例会导致某些组件被重新创建,从而触发这些组件的生命周期事件触发多次。
如果不在vuex
中,那么是否有可能在应用中创建多个Vue
实例(即new Vue({})
)?另外,是否有一些代码导致您的主Vue
实例或Contact
组件被多次初始化?这就是我可能想到的所有原因。