IoT小程序不同于传统的web开发,采用每个页面对应一个Vue对象方式.在一些复杂的场景下,可能会发生内存泄露现象.下面是一些常见的前端内存泄露场景:

1.事件监听未释放

如在以下组件中,在created监听了页面的事件,需要再destroyed中调用off注销监听.
注:off(eventName, callback)方法,如果不传callback,会注销被监听对象中的所有eventName对应的方法.

  1. export default {
  2.   data() {
  3.     return {};
  4.   },
  5.   created() {
  6.     this.$page.on("show", this.onPageShow);
  7.   },
  8.   destroyed() {  // 不要忘记注销监听.
  9.     this.$page.off("show", this.onPageShow);
  10.   },
  11.   methods: {
  12.     onPageShow() {
  13.       // do something
  14.     },
  15.   },
  16. };

2.定时器未关闭

如下场景中,在组件的mounted生命周期中启动了定时器,在离开页面时,需要调用clearTimeout停止计时.

  1. export default {
  2.   data() {
  3.     return {};
  4.   },
  5.   created() {
  6.     this.$page.on("show", this.onPageShow);
  7.     this.$page.on("hide", this.onPageHide);
  8.   },
  9.   mounted() {
  10.     if (!this.timerId) {
  11.       this.updateTime();
  12.     }
  13.   },
  14.   destroyed() {
  15.     this.$page.off("show", this.onPageShow);
  16.     this.$page.off("hide", this.onPageHide);
  17.   },
  18.   methods: {
  19.     onPageShow() {
  20.       if (!this.timerId) {
  21.         this.updateTime();
  22.       }
  23.     },
  24.     onPageHide() {
  25.       if (this.timerId) {
  26.         clearTimeout(this.timerId);
  27.         this.timerId = 0;
  28.       }
  29.     },
  30.     updateTime() {
  31.       // do something
  32.          this.timerId = setTimeout(() => {
  33.         this.updateTime();
  34.       }, 1000);
  35.     },
  36.   },
  37. };

3.多组件多页面共享数据

一份数据在多个组件实例中使用时,根据vue实现机制,会直接在数据上增加get/set方法对数据进行递归监听.会导致组件多次引用同一份数据时,重复的创建响应式监听且无法释放.

  1. import ShareData from "share-data.js";
  3. // 请注意,及时在组件的vue文件中定义的对象,如果定义在组件外,全局也只有一份.
  4. // 如果当前组件会被创建多个,也会引起内存泄露.
  5. const DATA_OUT_OF_COMPONENT = { my: "data", foo: "foo" };
  7. export default {
  8.   data() {
  9.     return {
  10.       share: ShareData,
  11.       my: DATA_OUT_OF_COMPONENT
  12.     };
  13.   }
  14. };

如果要在模板中引用,则修改成通过computed引用,如:

  1. import ShareData from "share-data.js";
  2. const DATA_OUT_OF_COMPONENT = { my: "data", foo: "foo" };
  4. export default {
  5.   data() {
  6.     return {};
  7.   },
  8.   computed:{
  9.     share(){
  10.       return ShareData
  11.     },
  12.     my(){
  13.       return DATA_OUT_OF_COMPONENT
  14.     }
  15.   }
  16. };