vue里v-if实现动态组件导致watch重复调用问题

weixin_44961798

于 2021-07-14 16:36:45 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue js 动态规划

版权

1 篇文章

订阅专栏

本文介绍了在Vue应用中使用keep-alive组件时，由于未设置key导致的问题。问题主要源于封装的watch无法正常销毁，从而影响组件的销毁过程。提供了两种解决方法：一是通过主动销毁watch；二是根据路由或父组件状态判断执行特定操作。这些方案有助于避免内存泄漏和提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仅针对第三种情况做解答
问题在于封装了watch，所以vue可能不能Destroy

主动销毁即可，代码如下

  created() {
    this.unWatch = this.watchUpdate(() => {
      this.fetchList();
    });
  },

  beforeDestroy: function() {
    this.unWatch();
  }

参考这里判断当前路由或者从父组件传入current_component判断(有点曲线救国的意思)

  created() {
    this.unWatch = this.watchUpdate(() => {
      if (this.$route.fullPath === 'A组件路由路径') {
        // do something
      }
    });
  }