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

Question

我有一个 VueJS 组件<managed-list>，我在同一个模板中使用了两次来显示两组不同的数据。每个都显示在自己的<section>容器中，使用v-if导航选项卡进行切换。

似乎这些组件被实例化为同一个实例。我调用组件console.log()的created钩子，并在页面加载时收到一条消息到控制台。但是，当我用 Tab 键显示另一个数据表时，相应的模板v-if会呈现，但created钩子不会再次触发。

我的理解是，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>

Answer 1

之所以会发生这种情况，是因为默认情况下，Vue 会尝试通过重用组件来节省时间。您的<managed-list>组件在和对的两个可能的<section>标签中，因此 Vue 只是保留该组件，而不是销毁并立即重新渲染它。v-ifv-else-if

如果你想强制 Vue 将两个<managed-list>标签中的每一个与它自己的组件相关联，你应该key为每个组件标签添加一个唯一的属性：

<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 文档。

这是一个简单的说明性示例：

<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', {
  template: '<p>I am child</p>',
  created() {
    console.log('created')
  }
})

new Vue({
  el: '#app',
  data() {
    return { foo: 'a' }
  },
  methods: {
    toggle() {
      this.foo = (this.foo === 'a') ? 'b' : 'a';
    }
  }
})