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

Question

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

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

我的理解是当使用 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> v-if 的标签和 v-else-if对，所以 Vue 只是保留该组件，而不是销毁并立即重新渲染它。

如果你想强制 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>

Here's the Vue documentation on that.

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

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';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <button @click="toggle">
    Toggle Children
  </button>

  <template v-if="foo === 'a'">
    <div> 
      A <child key="a"></child>    
    </div>
  </template>
  <template v-else-if="foo === 'b'">
    <div> 
      B <child key="b"></child>    
    </div>
  </template>
</div>