Vuejs 方法调用了两次

Question

首先，我不得不说我是 VueJs 的新手，但我在理解生命周期钩子方面遇到了一些麻烦！

我有一个组件，它有 3 个选项卡按钮，然后是三个列表，这些列表将有条件地呈现：

<main class="wrapper">
<div class="summary--tab pb">
<span class="summary__tab--item " :class="{ active: isActive('cat1') }"
>category 1</span
>
<span
class="summary__tab--item"
:class="{ active: isActive('cat2') }"
@click.prevent="setActive('cat2')"
>category 2</span
>
<span
class="summary__tab--item"
:class="{ active: isActive('cat3') }"
@click.prevent="setActive('cat3')"
>category 3</span
>
</div>
<div class="projects_container">
<template v-if="activeItem === 'cat1'">
<div v-for="element in cat1Projects" :key="element.id" class="item">
{{ element.title }}
<br />
{{ element.id }}
</div>
</template>
<template v-else-if="activeItem === 'cat2'">
<div v-for="element in cat2Projects" :key="element.id" class="item">
{{ element.title }}
<br />
{{ element.id }}
</div>
</template>
<template v-else>
<div v-for="element in cat3Projects" :key="element.id" class="item">
{{ element.title }}
<br />
{{ element.id }}
</div>
</template>
</div>
</main>

这是我的方法：

methods: {
fetchData() {
axios.get(this.baseUrl + 'projects.json').then(response => {
this.projects = response.data.projects
})
},
isActive(menuItem) {
console.log('get', menuItem)
return this.activeItem === menuItem
},
setActive(menuItem) {
this.activeItem = menuItem
}
} 

但是我路由到这个组件，我知道isActive在安装之前和更新钩子之前都在调用。

这是我的生命周期钩子：

beforeCreate() {
console.log('before created')
},
created() {
console.log('created')
this.fetchData()
},
beforeMount() {
console.log('before mount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('before update')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('before destroy')
},
destroyed() {
console.log('destroyed')
this.$store.dispatch('closeMenu')
}

我怎样才能防止这种情况发生？或者两个处理这个问题的更好解决方案是什么？

这是我的控制台日志：

created 
before mount 
get cat1 
get cat2 
get cat3 
mounted 
before update 
get cat1 
get cat2 
get cat3 
updated

Answer 1

看起来您在模板中使用了:class="{ active: isActive('cat#') }"。 您应该尽量避免在模板中使用函数(@handlers之外(。

模板呈现两次，一次在挂载时，一次在更新时。

如果要避免这种情况，可以在模板中使用条件：this.activeItem === 'cat1'

如果您发现模板中的条件this.activeItem === 'cat1'有点冗长，则可以像这样使用计算：

computed:{
activeItemKeyey() {
return {
cat1: this.activeItem === 'cat1',
cat2: this.activeItem === 'cat2',
cat3: this.activeItem === 'cat3',
}
}
}

然后在模板中...

<div class="summary--tab pb">
<span class="summary__tab--item " :class="{ active: activeItemKeyey['cat1'] }"
>category 1</span
>
<span
class="summary__tab--item"
:class="{ active: activeItemKeyey['cat2'] }"
@click.prevent="setActive('cat2')"
>category 2</span
>
<span
class="summary__tab--item"
:class="{ active: activeItemKeyey['cat3'] }"
@click.prevent="setActive('cat3')"
>category 3</span
>
</div>

这可能看起来有点矫枉过正，但如果你将菜单构建为一个对象(或数组(，它可以很好地扩展。