我有一个非常简单的例子.有两个div,每个v-if都有相同的变量,一个为真,一个为假.每个div中都嵌套了一个组件(同一个组件).

我(从console.log)看到的是,即使有v-if,组件也不会被销毁和创建,而是被重用.

这是虫子吗?特色因为我依赖于它们被销毁(问题发生在一些更复杂的组件中).

谢谢

下面是Html和javascript,还有JSFIDLE 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,
  },
})

推荐答案

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

例子:

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

Note that you could also put the 100 attribute to the 101, but I think it's cleaner to add it on the component since the 101 itself can be reused without issues.

Vue.js相关问答推荐

具有VUE身份验证的Azure AD

Vue.js编译的render函数不起作用

vue 3 中范围样式和深度样式的问题

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

VueJS - 将单独的组件加载到 vue 实例中

Vue CLI - 编译后将配置文件保留为外部

如何为 Vue 应用提供 robots.txt

未捕获的错误:[vue-composition-api] 必须在使用任何函数之前调用 Vue.use(plugin)

在 vuejs 中的图像中包含 router-link 标记

如何在 Vue.js 中触发点击 ref

使用 Vue.js (cdn) 在特定元素上切换显示/隐藏

在组件外使用 VueI18n 的问题

此 set-cookie 已被阻止,因为它具有 samesite=lax

Select 下拉列表中的复选框后如何清除 v-autocomplete(多个)搜索输入?

基于媒体查询的vue绑定值

使用 Vue-cli,我在哪里声明我的全局变量?

npm run dev 和 npm run production 的区别

如何从浏览器的源中删除 webpack://

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止