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"的字符串。

Answer 3

v-if和v-show之间的区别只是DOM中是否存在元素，而不是元素是否已创建。 v-if在为false时将其从DOM中删除，v-show仅将其隐藏。但是，该组件不会被破坏。

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

3 个答案: