Vuejs2 防止v-if、v-else、v-else-if中的相同组件标记共享Vue实例

我有一个VueJS组件

，我在同一个模板中两次使用它来显示两组不同的数据。每个都显示在自己的

容器中，该容器使用导航选项卡上的

v-if

进行切换

这些组件似乎被实例化为同一个实例。我在组件的

创建的
钩子中调用
console.log（）
，并在页面加载时向控制台发送消息。但是，当我切换到另一个数据表时，相应的
v-if
模板会呈现，但是创建的
钩子不会再次触发

我的理解是，在模板中使用
v-if
语句时，组件是正确创建和销毁的。但我的情况似乎不是这样。我做错什么了吗

<template>
  <div>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <router-link class="nav-link" :class="{active: $route.params.tab=='reports'}" to="reports">Reports</router-link>
      </li>
      <li class="nav-item">
        <router-link class="nav-link" :class="{active: $route.params.tab=='snippets'}" to="snippets">Snippets</router-link>
      </li>
    </ul>

    <section v-if="$route.params.tab == 'reports'">
      <h2>Reports</h2>

      <managed-list 
        :imports-disabled="true" 
        prop-delete-endpoint="ReportTemplate/delete" 
        prop-resource-url="ReportTemplate"
        :prop-fetch-url="'ReportTemplate/filter?filters='+reportFilter"
        prop-edit-action="/reports/templates/edit/{?}">
      </managed-list>
    </section>

    <section v-else-if="$route.params.tab == 'snippets'">
      <h2>Snippets</h2>

      <managed-list 
        :imports-disabled="true" 
        prop-delete-endpoint="ReportTemplate/delete" 
        prop-resource-url="ReportTemplate"
        :prop-fetch-url="'ReportTemplate/filter?filters='+snippetFilter"
        prop-edit-action="/reports/templates/edit/{?}">
      </managed-list>
    </section>
  </div>

</template>

<script>
import ManagedList from "./ManagedList"
import bus from '../bus.js'

export default {
  name: 'ReportTemplates',
  components: {
    ManagedList
  },
  data() {
    return {
      snippetFilter : JSON.stringify([
        ["is_snippet","=", 1]
      ]),
      reportFilter : JSON.stringify([
        ["is_snippet","=", 0]
      ])
    }
  },
  created() {
    console.log(this.snippetFilter, this.reportFilter)
  }
}
</script>




报告


片段


报告
片段
从“/ManagedList”导入ManagedList
从“../bus.js”导入总线
导出默认值{
名称：“ReportTemplates”，
组成部分：{
管理列表
},
数据（）{
返回{
snippetFilter:JSON.stringify([
[“is_snippet”，“=”，1]
]),
reportFilter:JSON.stringify([
[“is_snippet”，“=”，0]
])
}
},
创建（）{
console.log（this.snippetFilter、this.reportFilter）
}
}
之所以会出现这种情况，是因为在默认情况下，Vue会在可能的情况下通过重用组件来节省时间。您的
组件位于
v-if
和
v-else-if
对的两个可能的
标记中，因此Vue只是保留该组件，而不是销毁并立即重新渲染它

如果要强制Vue将两个
标记中的每一个标记与其自己的组件关联，则应为每个组件标记添加唯一的
键
属性：

<section v-if="$route.params.tab == 'reports'">
  <h2>Reports</h2>
  <managed-list key="reports" ... />
</section>

<section v-else-if="$route.params.tab == 'snippets'">
  <h2>Snippets</h2>
  <managed-list key="snippets" ... />
</section>


报告
片段



下面是一个简单的示例：


Vue.component（'child'{
模板：“我是孩子”
，
创建（）{
console.log（'created'）
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{foo:'a'}
},
方法：{
切换（）{
this.foo=（this.foo=='a'）？'b'：'a'；
}
}
})

切换孩子
A.
B
正是我所需要的。。。谢谢你的详细解释！