为什么在v-if下不会破坏组件

Question

我有一个非常简单的例子。有两个div，每个div的v-if变量相同，一个为true，一个为false。每个div内嵌套有一个组件（相同的组件）。

我从console.log中看到的是，即使存在v-if，该组件也不会被破坏和创建，而是可以重用。

这是错误吗？特征？因为我依靠它们来销毁（问题发生在一些更复杂的组件中）。

谢谢。

HTML和javascript下面，还有jsfiddle https://jsfiddle.net/ekeydar/p64ewLd1/3/

这是html：

<div id="app">
  <button @click="show1=!show1">
    Toggle  
  </button>
  <div v-if="show1">
    <my-comp title="comp1"/>
  </div>
  <div v-if="!show1">
    <my-comp title="comp2"/>
  </div>
</div>

这是javascript：

Vue.component('my-comp', {
    props: ['title'],
  template: '<h1>{{title}}</h1>',
  created: function() {
    console.log('my-comp.created title='+ this.title);
  },
  destroyed: function()  {
    console.log('my-comp.destroyed title='+ this.title);
  }
}),

new Vue({
  el: '#app',
  data: {
    show1: true,
  },
})

Answer 1

这是Vue的预期功能。为了让Vue知道该组件不应被重用，而应该销毁并创建一个不同的组件，请key向这些组件添加属性。

例：

<div v-if="show1">
    <my-comp title="comp1" key="somekeyhere"/>
</div>
<div v-else>
    <my-comp title="comp2" key="someotherkeyhere"/>
</div>

请注意，您也可以将key属性放在上div，但我认为将其添加到组件上比较干净，因为它div本身可以重复使用而不会出现问题。

Answer 2

如果您希望组件在隐藏时始终被销毁（例如，为了节省内存），这里有一个小技巧（如果您愿意，也可以是可怕的黑客）。用作.NaN​ key由于NaN永远不会等于自身，Vue 将始终认为它是一个不同的元素。

  <div v-if="show1">
    <my-comp title="comp1" :key="NaN"/>
  </div>
  <div v-if="!show1">
    <my-comp title="comp2" :key="NaN"/>
  </div>

您需要:key=而不是key=因为否则该属性将是一个值为 的字符串"NaN"。