Vue2 中 setTimeout 导致 DOM 节点无法回收的内存泄露问题？

Question

vue2 内存泄露问题
测试页非常简单

1. 使用 vue create 创建了一个初始项目

2. 把代码改造如下

   • Home.vue

   <template>
     <div class="home">
    <button @click="close">close</button>
    <button @click="show">show</button>
    <exceptionList v-if="showDialog"/>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Home',
     data () {
    return {
      showDialog: false
    }
     },
     components: {
    // HelloWorld,
    exceptionList: () => import('@/components/exception')
     },
     methods: {
    close () {
      this.showDialog = false
    },
    show () {
      this.showDialog = true
    }
     }
   }
   </script>
   <style>
   button{
     width:100px;
     height:30px;
   }
   </style>

• components/exception.vue

  <template>
  <div class="ipc-dialog">
    <div>{{ total }}</div>
    <!-- 列表展示 -->
    <div
      v-for="(item,index) in 1000"
      :key="`${item}-${index}`"
      class="item"
    >
      {{ item }}ipc-prod2.8
    </div>
  </div>
  </template>
  
  <script>
  export default {
  name: 'Exception',
  data () {
    return {
      total: 1000
    }
  },
  mounted () {
    this.timer = setTimeout(() => {
      this.total = 10000
    }, 1000)
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
  }
  </script>

3. 进入到 home 页面
   
4. 点击 show 按钮, 1000ms(间隔时间越大,必现概率越高) 后点击 close 按钮
   
   观察 DOM节点无法被回收,并且持续泄露
   

解决后 一杯奶茶奉上~

Answer 1

你执行时机不对，定时器已经加到任务队列里面的你那样只能清除没队列的里的：

<script>
export default {
  name: 'Exception',
  data() {
    return {
      total: 1000,
      timer: null
    };
  },
  mounted() {
    this.timer = setTimeout(() => {
      this.total = 10000;
      this.timer = null; 
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      
      this.total = 10000; 
      clearTimeout(this.timer);
      this.timer = null; 
    }
  }
};
</script>

或者再加一个变量：

<script>
export default {
  name: 'Exception',
  data() {
    return {
      total: 1000,
      timer: null,
      isMounted: false
    };
  },
  mounted() {
    this.isMounted = true;
    this.timer = setTimeout(() => {
      if (this.isMounted) {
        this.total = 10000;
      }
    }, 1000);
  },
  beforeDestroy() {
    this.isMounted = false;
    clearTimeout(this.timer);
  }
};
</script>

Answer 2

补充一点, v3 亲测是可行的
估计要大佬 探测 vue2 源码了

自问自答吧,昨天解决了
https://juejin.cn/post/7460431444630011919