this.$destroy vs v-if 带有页面的 vue js

Question

我有一个包含许多项目的菜单。在项目单击上，我创建了一个新的 Vue 元素（使用 Vuex 商店）。问题是：

关闭女巫在 vue 实例之外我必须调用 this.$destroy 或 v-if="false" 根元素。

<template> 
   <div v-if="closeVar">
     ....
   </div> 
</template>
<script>
 export default {
   ...,
   data() {
      return {
          closeVar: true
      };
   },
   methods: {
      onWindowsClose() {
          this.$destroy() OR this.closeVar = false; ????
      }
   },
   created() {
       window[id + 'onWindowsClose'] = this.onWindowsClose;
   }
}
</script>

Answer 1

来自$destroy 文档：

在正常使用情况下，您不必自己调用此方法。更喜欢使用 v-if 和 v-for 以数据驱动的方式控制子组件的生命周期。

所以文档的答案是首选使用v-if。此外，您应该将 v-if 放在父组件的标签上，而不是根元素上的组件内：

父母

<child v-if="closeVar"></child>

否则，您只会删除孩子的内容，而不是整个组件。

不同之处在于，例如，如果您使用内容重新填充该特定实例，则不会再次调用子级的 created 挂钩（这是可能的，因为组件不会被销毁。）