vue项目内存不断增加

2019-01-21  本文已影响0人  变异宝宝

之前项目总是遇到崩溃问题,发现放着不动都会增加内存,于是找了一堆优化性能的方法,确实优化了一些,但是内存增加问题还是有。

于是请教了一个公司请的专家,用排除法(整段删除代码)找到了原因,原来是因为右上角的时间显示组件问题,

<template>
  <span>{{currDate}}</span>
</template>
<script>
export default{
  name: "date",
  data(){
    currDate
  },
  methods:{
    setDate(){
      this.currDate = this.$common.formatDate(new Date());
    }
  },
  mounted(){
    setInterval(this.setDate,1000);
  }
}
</script>

之前优化性能的时候还专门清理过计时器,但是把这个小小的组件给忘记了,灯下黑啊~
不过还是有诡异的事情发生了,按理说如果页面不跳转,内存应该不会增加了吧,结果还在加。
在网上找的使用setTimeout的写法

<script>
export default{
  name: "date",
  data(){
    currDate
  },
  methods:{
    setDate(){
      this.currDate = this.$common.formatDate(new Date());
    },
    updateFormat(f, time) {
      return function walk() {
        setTimeout(function () {
          f();
          walk(); 
        }, time);
      };
    }
  },
  mounted(){
    this.updateFormat(setDate, 1000)();
  }
}
</script>

这是个延迟递归,walk(f, time),一段时间后,内部再次调用walk(f, time)。对f, time进行了保存(闭包),但是。。。还是不行。

然后试过每次清除计时器,还是不行。

于是怀疑不是计时器的问题,把setDate方法改了,使用原生js修改innerHtml,好了。

最终是因为vue双向绑定的问题,具体原因,有待研究。

上一篇 下一篇

猜你喜欢

热点阅读